Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections.
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: "Coinblue Exchange"3description: "Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections."4tags: [fintech, saas, minimal, trustworthy, modern]5colors:6 primary: "#0a0b0d"7 secondary: "#5b616e"8 tertiary: "#0052ff"9 neutral: "#eef0f3"10 surface: "#ffffff"11typography:12 display: Manrope13 body: Manrope14 mono: "JetBrains Mono"15 scale:16 hero: "5rem / 1 / 400 / -1.6px"17 h1: "4rem / 1 / 400 / -1.28px"18 h2: "2.25rem / 1.11 / 400 / -0.72px"19 body: "1.125rem / 1.56 / 400 / 0"20radius:21 sm: 8px22 md: 16px23 lg: 24px24 pill: 56px25shadows:26 button: "rgba(0,82,255,0.18) 0 6px 18px -6px"27borders:28 card: "1px solid rgba(91,97,110,0.2)"29 divider: rgba(91,97,110,0.2)30buttons:31 primary:32 background: #0052ff33 color: #ffffff34 border: 1px solid #0052ff35 shape: pill36 padding: 14px 28px37 font: 60038 shadow: rgba(0,82,255,0.18) 0 6px 18px -6px39 secondary:40 background: #eef0f341 color: #0a0b0d42 border: 1px solid #eef0f343 shape: pill44 padding: 14px 28px45 font: 60046 outline:47 background: transparent48 color: #0052ff49 border: 1px solid #0052ff50 shape: pill51 padding: 14px 28px52 font: 60053 ghost:54 background: transparent55 color: #0a0b0d56 border: none57 shape: pill58 padding: 12px 18px59 font: 60060charts:61 variant: "rounded-bars"62 stroke_width: 2.563 fill_opacity: 0.1464 gridlines: false65 bar_gap: 8px66 highlight: last67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"69dependencies: ["lucide-react"]70---71 72# Coinblue Exchange73 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 **Coinblue Exchange** 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** — pill shape, bg `#0052ff`, text `#ffffff`, border `1px solid #0052ff`, padding `14px 28px`, weight `600`, shadow `rgba(0,82,255,0.18) 0 6px 18px -6px`.110- **Secondary** — pill shape, bg `#eef0f3`, text `#0a0b0d`, border `1px solid #eef0f3`, padding `14px 28px`, weight `600`.111- **Outline** — pill shape, text `#0052ff`, border `1px solid #0052ff`, padding `14px 28px`, weight `600`.112- **Ghost** — pill shape, text `#0a0b0d`, padding `12px 18px`, weight `600`.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: `#ffffff`121- Border: `1px solid rgba(91,97,110,0.2)`122- Radius: `radius.lg` (`24px`)123- Internal padding: `20px` for compact cards, `24–28px` for content cards.124 125#### Charts126 127- Bar/line variant: `rounded-bars`128- No gridlines — let the bars/lines carry the data.129- Highlight strategy: `last` — emphasize a single bar/point per chart.130 131#### Typography pairings132 133- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.134- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.135- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.136 137### 4 · Hard constraints138 139Never do any of the following without explicit instruction from the user:140 141- Introduce a new color, font, radius, or shadow that isn't declared above.142- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).143- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.144- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.145- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.146 147### 5 · Before you finish — verify148 149Run through this checklist for every screen you produce:150 151- [ ] Every color used appears in the Colors table above.152- [ ] Headlines use the display font; body copy uses the body font.153- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).154- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.155- [ ] Cards and dividers use the declared border + shadow tokens.156- [ ] No values were invented; if you needed something missing, you stopped and asked.157 158---159 160## 1. Atmosphere161 162Coinblue Exchange is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. A single, deeply saturated brand blue (`#0052ff`) does all the interactive heavy lifting against white and near-black surfaces. The system feels institutional but modern — the kind of polish you want when an interface is asking you to move money.163 164The display typography runs on geometric grotesque at weight 400 with ultra-tight 1.00 line-heights — headlines are stacked and dense, never airy. Body text takes over at weights 400–600 with relaxed 1.50–1.56 line-heights, creating clear separation between "headline mode" and "reading mode." The most distinctive button signature is a **56px radius** — a pill that's unmistakably Coinblue, and rare enough in the industry to read as proprietary.165 166The page rhythm alternates between pristine white content sections and dark (`#0a0b0d`, `#282b31`) feature sections — a deliberate dark/light cadence that reinforces the dual-mode trading vibe.167 168**Signature moves**169- Coinblue Blue `#0052ff` as singular brand accent — never decorative170- Geometric sans hierarchy across display/UI/body roles171- 56px radius pill buttons — distinctive intermediate between rounded and full pill172- Hover transitions to lighter blue `#578bfa`173- Near-black (`#0a0b0d`) dark sections + white light sections174- 1.00 line-height on display — ultra-tight, billboard-style175- Cool gray secondary surface (`#eef0f3`) with blue tint176- `text-transform: lowercase` on some button labels — unusual and recognizable177 178## 2. Palette179 180### Primary181- **Coinblue Blue** `#0052ff` — primary brand, links, CTA borders182- **Pure White** `#ffffff` — primary light surface183- **Near Black** `#0a0b0d` — text, dark section backgrounds184- **Cool Gray Surface** `#eef0f3` — secondary button background185 186### Interactive187- Hover Blue `#578bfa` — button hover background188- Link Blue `#0667d0` — secondary link189- Muted Blue `#5b616e` at 20% — borders190 191### Surface192- Dark Card `#282b31` — dark button/card backgrounds193- Light Surface `rgba(247,247,247,0.88)` — subtle surface194 195## 3. Typography196 197| Role | Size | Weight | Leading | Notes |198|------|------|--------|---------|-------|199| Display Hero | 80px | 400 | 1.00 | Maximum impact |200| Display 2 | 64px | 400 | 1.00 | Sub-hero |201| Display 3 | 52px | 400 | 1.00 | Third tier |202| Section | 36px | 400 | 1.11 | Feature sections |203| Card title | 32px | 400 | 1.13 | Card headings |204| Feature title | 18px | 600 | 1.33 | Feature emphasis |205| Body Bold | 16px | 700 | 1.50 | Strong body |206| Body Semibold | 16px | 600 | 1.25 | Buttons, nav |207| Body | 18px | 400 | 1.56 | Reading |208| Body Small | 16px | 400 | 1.50 | Secondary reading |209| Button | 16px | 600 | 1.20 | +0.16px tracking |210| Caption | 14px | 600–700 | 1.50 | Metadata |211| Small | 13px | 600 | 1.23 | Tags |212 213**Display = ultra-tight (1.00).** No exceptions. UI text breathes (1.20–1.50). Display weight is intentionally light (400) — impact comes from size and leading, not weight.214 215## 4. Buttons216 217### Primary Pill (56px)218```css219background: #eef0f3;220border-radius: 56px;221padding: 14px 28px;222border: 1px solid #eef0f3;223```224Hover: `#578bfa`. Focus: 2px solid black outline.225 226### Dark Pill227- Background `#282b31`, text `#ffffff`, 56px radius228- Hover: `#578bfa`229 230### Blue Bordered231- Border `1px solid #0052ff`, transparent background232- 56px radius, blue text233 234## 5. Cards235 236- Background: `#ffffff` (light) or `#282b31` (dark)237- Border: `1px solid rgba(91,97,110,0.2)`238- Radius: 8–24px range; 16px standard239 240## 6. Charts241 242**Rounded pill-bars in saturated brand blue, with last-bar highlight** — the visual metaphor of "trending now." Line charts use a thicker 2.5px stroke and an end-of-line dot marker, like a live ticker reading.243 244## 7. Spacing245 246- Base: 8px247- Scale: `1, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 25, 32, 48`248 249## 8. Depth & elevation250 251Minimal shadow system — depth from dark/light section contrast. The brand CTA gets a single subtle blue glow (`rgba(0,82,255,0.18) 0 6px 18px -6px`) for emphasis.252 253## 9. Do's & don'ts254 255✅ **Do**256- Use brand blue (`#0052ff`) for primary interactive elements only257- Apply 56px radius for all CTA buttons — never 8px or 9999px258- Use display sizes 52–80px at line-height 1.00259- Alternate dark (`#0a0b0d`) and white sections260 261❌ **Don't**262- Use the brand blue decoratively — it's functional only263- Use sharp corners on CTAs — 56px minimum264- Apply heavy drop shadows — light sections, dark sections, no shadows265- Use bold (700) for display — 400 with tight leading is the look266 267---268 269## Tokens270 271> Generated from the same source the live preview renders from.272> Treat the values below as the contract — never substitute approximations.273 274### Colors275 276| Role | Value |277|-----------|-------|278| primary | `#0a0b0d` |279| secondary | `#5b616e` |280| tertiary | `#0052ff` |281| neutral | `#eef0f3` |282| surface | `#ffffff` |283 284### Typography285 286- **Display:** Manrope287- **Body:** Manrope288- **Mono:** JetBrains Mono289 290| Role | size / leading / weight / tracking |291|------|------------------------------------|292| Hero | 5rem / 1 / 400 / -1.6px |293| H1 | 4rem / 1 / 400 / -1.28px |294| H2 | 2.25rem / 1.11 / 400 / -0.72px |295| Body | 1.125rem / 1.56 / 400 / 0 |296 297### Radius298 299- sm: `8px`300- md: `16px`301- lg: `24px`302- pill: `56px`303 304### Shadows305 306- **button:** `rgba(0,82,255,0.18) 0 6px 18px -6px`307 308### Borders309 310- **card:** `1px solid rgba(91,97,110,0.2)`311- **divider:** `rgba(91,97,110,0.2)`312 313### Buttons314 315Four variants, each fully tokenized. The preview renders from these exact values.316 317#### Primary318 319| Property | Value |320|----------|-------|321| shape | `pill` |322| background | `#0052ff` |323| color | `#ffffff` |324| border | `1px solid #0052ff` |325| padding | `14px 28px` |326| fontWeight | `600` |327| shadow | `rgba(0,82,255,0.18) 0 6px 18px -6px` |328 329#### Secondary330 331| Property | Value |332|----------|-------|333| shape | `pill` |334| background | `#eef0f3` |335| color | `#0a0b0d` |336| border | `1px solid #eef0f3` |337| padding | `14px 28px` |338| fontWeight | `600` |339 340#### Outline341 342| Property | Value |343|----------|-------|344| shape | `pill` |345| background | `transparent` |346| color | `#0052ff` |347| border | `1px solid #0052ff` |348| padding | `14px 28px` |349| fontWeight | `600` |350 351#### Ghost352 353| Property | Value |354|----------|-------|355| shape | `pill` |356| background | `transparent` |357| color | `#0a0b0d` |358| border | `none` |359| padding | `12px 18px` |360| fontWeight | `600` |361 362### Charts363 364| Property | Value |365|----------|-------|366| variant | `rounded-bars` |367| strokeWidth | `2.5` |368| fillOpacity | `0.14` |369| gridlines | `false` |370| barGap | `8px` |371| highlight | `last` |372| dotMarker | `true` |373 # 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=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Manrope"', 'serif'], sans: ['"Manrope"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#0a0b0d', secondary: '#5b616e', accent: '#0052ff', neutral: '#eef0f3', surface: '#ffffff', }, borderRadius: { sm: '8px', md: '16px', lg: '24px', }, }, },};Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent.
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.
Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper.
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.