Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Token Mesh"3description: "Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji."4tags: [crypto, fintech, dark, minimal, modern]5colors:6 primary: "#e6e8eb"7 secondary: "#7d848e"8 tertiary: "#e6e8eb"9 neutral: "#1a1d22"10 surface: "#101216"11typography:12 display: Geist13 body: Geist14 mono: "Geist Mono"15 scale:16 hero: "3.25rem / 1.06 / 600 / -0.03em"17 h1: "2.125rem / 1.16 / 600 / -0.022em"18 h2: "1.4375rem / 1.3 / 600 / -0.012em"19 body: "0.9375rem / 1.6 / 400 / -0.005em"20radius:21 sm: 4px22 md: 6px23 lg: 10px24 pill: 9999px25shadows:26 card: "rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(230,232,235,0.08)"30 divider: rgba(230,232,235,0.10)31buttons:32 primary:33 background: #e6e8eb34 color: #10121635 border: none36 shape: rounded37 padding: 9px 18px38 font: 600 / 0.8125rem39 secondary:40 background: #1f232a41 color: #e6e8eb42 border: 1px solid rgba(230,232,235,0.10)43 shape: rounded44 padding: 9px 18px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #e6e8eb49 border: 1px solid rgba(230,232,235,0.16)50 shape: rounded51 padding: 9px 18px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #7d848e56 border: none57 shape: rounded58 padding: 9px 14px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.0864 gridlines: true65 bar_gap: 6px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"69dependencies: ["lucide-react"]70---71 72# Token Mesh73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Token Mesh** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#e6e8eb`, text `#101216`, padding `9px 18px`, weight `600`.110- **Secondary** — rounded shape, bg `#1f232a`, text `#e6e8eb`, border `1px solid rgba(230,232,235,0.10)`, padding `9px 18px`, weight `500`.111- **Outline** — rounded shape, text `#e6e8eb`, border `1px solid rgba(230,232,235,0.16)`, padding `9px 18px`, weight `500`.112- **Ghost** — rounded shape, text `#7d848e`, padding `9px 14px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#101216`121- Border: `1px solid rgba(230,232,235,0.08)`122- Shadow: `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px`123- Radius: `radius.lg` (`10px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- Highlight strategy: `single` — emphasize a single bar/point per chart.134 135#### Typography pairings136 137- **Display (`Geist`)** — h1, h2, hero headlines, brand wordmarks.138- **Body (`Geist`)** — paragraphs, labels, button text, form inputs.139- **Mono (`Geist Mono`)** — code, eyebrows, metadata, numerals in tables.140 141### 4 · Hard constraints142 143Never do any of the following without explicit instruction from the user:144 145- Introduce a new color, font, radius, or shadow that isn't declared above.146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.150 151### 5 · Before you finish — verify152 153Run through this checklist for every screen you produce:154 155- [ ] Every color used appears in the Colors table above.156- [ ] Headlines use the display font; body copy uses the body font.157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.159- [ ] Cards and dividers use the declared border + shadow tokens.160- [ ] No values were invented; if you needed something missing, you stopped and asked.161 162---163 164## 1. Atmosphere165 166Token Mesh is what crypto looks like when you remove the clichés. The page surface is dark slate `#101216` — never pure black, never blue-leaning. Cards lift to `#1a1d22` with a 1px black inset highlight at the top edge — the dark-mode catch-light that sells the surface as physical. Geist handles prose with its calm geometric proportions; Geist Mono with tabular numerals carries every price, percentage, market cap, and address so columns of figures align to the pixel. The single accent is cool mint `#3ad9a8` — used only on positive 24h deltas, the active wallet pane border, and the focus ring. Negative deltas use bone, with the minus sign carrying the meaning.167 168The discipline is in the absence: no glow, no purple-blue gradient, no neon, no rocket emoji. The system trusts the reader to read tabular numerals and signs.169 170**Signature moves**171- Geist Mono with `font-variant-numeric: tabular-nums` on every price, percentage, address172- Cool mint `#3ad9a8` only on positive deltas + active wallet pane border + focus ring173- Negative deltas in bone with minus sign — never in red174- Dark slate `#101216` page (never pure black, never blue) → `#1a1d22` card175- 1px black inset highlight on every card — dark catch-light176 177## 2. Palette178 179### Surfaces180- **Slate** `#101216` — page background (cool dark slate)181- **Slate Lift** `#1a1d22` — primary card surface182- **Pane** `#1f232a` — secondary button, hovered card183- **Hairline** `rgba(230,232,235,0.08)` — every divider184 185### Ink (light on dark)186- **Bone** `#e6e8eb` — text, headings, primary CTA fill, negative deltas187- **Bone 55** `#7d848e` — secondary text, mono labels188 189### Accent190- **Mint** `#3ad9a8` — positive 24h delta, active wallet pane border, focus ring191- **Mint Soft** `rgba(58,217,168,0.12)` — hovered token row background192 193## 3. Typography194 195| Role | Font | Size | Weight | Leading | Tracking |196|------|------|------|--------|---------|----------|197| Hero | Geist | 52px | 600 | 1.06 | -0.03em |198| H1 | Geist | 34px | 600 | 1.16 | -0.022em |199| H2 | Geist | 23px | 600 | 1.3 | -0.012em |200| Body | Geist | 15px | 400 | 1.6 | -0.005em |201| UI / Button | Geist | 13px | 500 | 1.4 | 0 |202| Price / KPI | Geist Mono | 28px | 600 | 1.0 | 0 tabular-nums |203| Delta | Geist Mono | 13px | 500 | 1.0 | 0 tabular-nums |204| Label | Geist Mono | 11px | 500 | 1.0 | 0.04em uppercase |205| Address / Hash | Geist Mono | 12px | 400 | 1.0 | 0 truncate |206 207Geist Mono everywhere a number or hash lives — prices, deltas, market caps, wallet addresses, transaction hashes. The tabular-nums variant is what makes a token table read as a serious exchange vs. a meme dashboard.208 209## 4. Buttons210 211### Primary (Bone Inverted)212```css213background: #e6e8eb;214color: #101216;215padding: 9px 18px;216border-radius: 6px;217font-weight: 600;218```219 220Bone-on-slate is the dark-mode equivalent of ink-on-bone — high contrast, no chrome required.221 222### Secondary (Pane)223- `#1f232a` background, 1px hairline at 10% bone, bone text — same shape, same padding224 225### Outline & Ghost226- Outline: transparent, 1px hairline at 16% bone227- Ghost: no border, bone-55, hover lifts to bone228 229## 5. Cards230 231```css232background: #1a1d22;233border: 1px solid rgba(230,232,235,0.08);234border-radius: 10px;235box-shadow:236 rgba(0,0,0,0.35) 0 1px 0 inset,237 rgba(0,0,0,0.4) 0 1px 2px;238```239 240The 1px black inset highlight at the top is the dark catch-light — without it the card reads as flat dark grey. The active wallet pane adds a 1px mint top border — the only place mint appears as a card edge.241 242## 6. Charts243 244Thin precise bars (3px wide, 6px gap) with dashed gridlines at 8% bone — used for token-volume sparklines. One bar in mint (the latest period if up, bone if down), others in 22% bone. Line charts at 1.5px bone with an 8% mint fill (when net up), ending in a mint dot marker. Y-axis labels in Geist Mono uppercase 11px aligned to the right.245 246## 7. Tabs247 248Underline 1.5px in mint for the active state. Inactive tabs are bone-55 in Geist 500. Hover = mint-soft background wash. Tabs sit on a 1px hairline baseline.249 250## 8. Spacing251 252- Base 4px (token-row aware)253- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`254- Section padding: 80px desktop, 32px mobile255 256## 9. Do's & don'ts257 258✅ **Do**259- Use Geist Mono with tabular-nums on every price, delta, address — column alignment IS the brand260- Reserve mint for positive deltas + active wallet pane + focus ring only261- Keep negative deltas in bone with a minus sign — never in red262- Hold the dark slate `#101216` page → slate-lift card tonal step263 264❌ **Don't**265- Use neon green for positive — cool mint `#3ad9a8` is muted on purpose266- Use red for negative — the system trusts the minus sign267- Use a purple-blue or pink gradient — the entire category does this; you do not268- Add glow halos to active states — 1px mint border is the only edge color269 270---271 272## Tokens273 274> Generated from the same source the live preview renders from.275> Treat the values below as the contract — never substitute approximations.276 277### Colors278 279| Role | Value |280|-----------|-------|281| primary | `#e6e8eb` |282| secondary | `#7d848e` |283| tertiary | `#e6e8eb` |284| neutral | `#1a1d22` |285| surface | `#101216` |286 287### Typography288 289- **Display:** Geist290- **Body:** Geist291- **Mono:** Geist Mono292 293| Role | size / leading / weight / tracking |294|------|------------------------------------|295| Hero | 3.25rem / 1.06 / 600 / -0.03em |296| H1 | 2.125rem / 1.16 / 600 / -0.022em |297| H2 | 1.4375rem / 1.3 / 600 / -0.012em |298| Body | 0.9375rem / 1.6 / 400 / -0.005em |299 300### Radius301 302- sm: `4px`303- md: `6px`304- lg: `10px`305- pill: `9999px`306 307### Shadows308 309- **card:** `rgba(0,0,0,0.35) 0 1px 0 inset, rgba(0,0,0,0.4) 0 1px 2px`310- **button:** `none`311 312### Borders313 314- **card:** `1px solid rgba(230,232,235,0.08)`315- **divider:** `rgba(230,232,235,0.10)`316 317### Buttons318 319Four variants, each fully tokenized. The preview renders from these exact values.320 321#### Primary322 323| Property | Value |324|----------|-------|325| shape | `rounded` |326| background | `#e6e8eb` |327| color | `#101216` |328| border | `none` |329| padding | `9px 18px` |330| fontWeight | `600` |331| fontSize | `0.8125rem` |332 333#### Secondary334 335| Property | Value |336|----------|-------|337| shape | `rounded` |338| background | `#1f232a` |339| color | `#e6e8eb` |340| border | `1px solid rgba(230,232,235,0.10)` |341| padding | `9px 18px` |342| fontWeight | `500` |343| fontSize | `0.8125rem` |344 345#### Outline346 347| Property | Value |348|----------|-------|349| shape | `rounded` |350| background | `transparent` |351| color | `#e6e8eb` |352| border | `1px solid rgba(230,232,235,0.16)` |353| padding | `9px 18px` |354| fontWeight | `500` |355| fontSize | `0.8125rem` |356 357#### Ghost358 359| Property | Value |360|----------|-------|361| shape | `rounded` |362| background | `transparent` |363| color | `#7d848e` |364| border | `none` |365| padding | `9px 14px` |366| fontWeight | `500` |367| fontSize | `0.8125rem` |368 369### Charts370 371| Property | Value |372|----------|-------|373| variant | `thin-bars` |374| strokeWidth | `1.5` |375| fillOpacity | `0.08` |376| gridlines | `true` |377| barGap | `6px` |378| highlight | `single` |379| dotMarker | `true` |380 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Geist"', 'serif'], sans: ['"Geist"', 'sans-serif'], mono: ['"Geist Mono"', 'monospace'], }, colors: { primary: '#e6e8eb', secondary: '#7d848e', accent: '#e6e8eb', neutral: '#1a1d22', surface: '#101216', }, borderRadius: { sm: '4px', md: '6px', lg: '10px', }, }, },};Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.