awesome-design-md 1.0.0

package/design-md/coinbase/DESIGN.md

@@ -0,0 +1,129 @@
+# Design System: Coinbase
+
+## 1. Visual Theme & Atmosphere
+
+Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
+
+The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
+
+**Key Characteristics:**
+- Coinbase Blue (`#0052ff`) as singular brand accent
+- Four-font proprietary family: Display, Sans, Text, Icons
+- 56px radius pill buttons with blue hover transition
+- Near-black (`#0a0b0d`) dark sections + white light sections
+- 1.00 line-height on display headings — ultra-tight
+- Cool gray secondary surface (`#eef0f3`) with blue tint
+- `text-transform: lowercase` on some button labels — unusual
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
+- **Pure White** (`#ffffff`): Primary light surface
+- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
+- **Cool Gray Surface** (`#eef0f3`): Secondary button background
+
+### Interactive
+- **Hover Blue** (`#578bfa`): Button hover background
+- **Link Blue** (`#0667d0`): Secondary link color
+- **Muted Blue** (`#5b616e`): Border color at 20% opacity
+
+### Surface
+- **Dark Card** (`#282b31`): Dark button/card backgrounds
+- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `CoinbaseDisplay` — hero headlines
+- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
+- **Body**: `CoinbaseText` — reading text
+- **Icons**: `CoinbaseIcons` — icon font
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
+| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Pill (56px radius)**
+- Background: `#eef0f3` or `#282b31`
+- Radius: 56px
+- Border: `1px solid` matching background
+- Hover: `#578bfa` (light blue)
+- Focus: `2px solid black` outline
+
+**Full Pill (100000px radius)**
+- Used for maximum pill shape
+
+**Blue Bordered**
+- Border: `1px solid #0052ff`
+- Background: transparent
+
+### Cards & Containers
+- Radius: 8px–40px range
+- Borders: `1px solid rgba(91,97,110,0.2)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base: 8px
+- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
+
+### Border Radius Scale
+- Small (4px–8px): Article links, small cards
+- Standard (12px–16px): Cards, menus
+- Large (24px–32px): Feature containers
+- XL (40px): Large buttons/containers
+- Pill (56px): Primary CTAs
+- Full (100000px): Maximum pill
+
+## 6. Depth & Elevation
+
+Minimal shadow system — depth from color contrast between dark/light sections.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Coinbase Blue (#0052ff) for primary interactive elements
+- Apply 56px radius for all CTA buttons
+- Use CoinbaseDisplay for hero headings only
+- Alternate dark (#0a0b0d) and white sections
+
+### Don't
+- Don't use the blue decoratively — it's functional only
+- Don't use sharp corners on CTAs — 56px minimum
+
+## 8. Responsive Behavior
+
+Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Coinbase Blue (`#0052ff`)
+- Background: White (`#ffffff`)
+- Dark surface: `#0a0b0d`
+- Secondary surface: `#eef0f3`
+- Hover: `#578bfa`
+- Text: `#0a0b0d`
+
+### Example Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."

package/design-md/coinbase/README.md

@@ -0,0 +1,23 @@
+# Coinbase Inspired Design System
+
+[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) extracted from the public [coinbase](https://coinbase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `DESIGN.md` | Complete design system documentation (9 sections) |
+| `preview.html` | Interactive design token catalog (light) |
+| `preview-dark.html` | Interactive design token catalog (dark) |
+
+Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/coinbase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.
+
+## Preview
+
+A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
+
+### Dark Mode
+![Coinbase Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-dark-screenshot.png)
+
+### Light Mode
+![Coinbase Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/coinbase/preview-screenshot.png)

package/design-md/coinbase/preview-dark.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Coinbase (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+<style>
+  :root { --white:#0a0b0d; --black:#eef0f3; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#1a1c20; --dark:#282b31; --muted:#8a8f99; --font:'Inter',system-ui,sans-serif; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #1a1c20; }
+  .nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
+  .nav-links a:hover { color:var(--black); }
+  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
+
+  .hero { padding:80px 24px; text-align:center; }
+  .hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
+  .btn-blue:hover { background:var(--hover-blue); }
+  .btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
+  .btn-gray:hover { background:var(--hover-blue); color:var(--black); }
+  .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
+  .btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
+  .section-dark .inner { max-width:1100px; margin:0 auto; }
+  .section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
+  .section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
+  .color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #1a1c20; }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--muted); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
+  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--muted); }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
+  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
+  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
+  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
+  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
+  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
+  .footer a { color:var(--blue); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
+<div style="position:fixed;top:16px;right:16px;z-index:200;background:#0052ff;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:56px;">Dark Mode</div>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Brand</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
+<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
+<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
+<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
+<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
+</div></section>
+
+<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
+<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
+<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
+</div></div></div>
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

package/design-md/coinbase/preview.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Coinbase (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+<style>
+  :root { --white:#fff; --black:#0a0b0d; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#eef0f3; --dark:#282b31; --muted:#5b616e; --font:'Inter',system-ui,sans-serif; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--gray-surface); }
+  .nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
+  .nav-links a:hover { color:var(--black); }
+  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 24px; border-radius:56px; font-size:14px; font-weight:600; text-decoration:none; }
+
+  .hero { padding:80px 24px; text-align:center; }
+  .hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
+  .btn-blue:hover { background:var(--hover-blue); }
+  .btn-gray { display:inline-block; background:var(--gray-surface); color:var(--black); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s; }
+  .btn-gray:hover { background:var(--hover-blue); color:var(--black); }
+  .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:12px 28px; border-radius:56px; font-size:16px; font-weight:600; text-decoration:none; }
+  .btn-outline { display:inline-block; background:transparent; color:var(--blue); padding:12px 28px; border-radius:56px; border:1px solid var(--blue); font-size:16px; font-weight:600; text-decoration:none; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-dark { padding:48px 24px; background:var(--black); color:var(--white); }
+  .section-dark .inner { max-width:1100px; margin:0 auto; }
+  .section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
+  .section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }
+  .color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--gray-surface); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--muted); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }
+  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--muted); }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
+  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(91,97,110,0.2); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
+  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }
+  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }
+  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
+  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }
+  .footer a { color:var(--blue); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up</a></nav>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Coinbase</span></h1><p>Every color, font, and component — visualized with crypto-grade precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get Started</a><a class="btn-gray" href="#">Learn More</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Brand</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0052ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Coinbase Blue</div><div class="color-swatch-hex">#0052ff</div><div class="color-swatch-role">Primary brand</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#578bfa"></div><div class="color-swatch-info"><div class="color-swatch-name">Hover Blue</div><div class="color-swatch-hex">#578bfa</div><div class="color-swatch-role">Hover state</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#eef0f3"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#eef0f3</div><div class="color-swatch-role">Secondary surface</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0a0b0d"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#0a0b0d</div><div class="color-swatch-role">Text, dark sections</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#282b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Card</div><div class="color-swatch-hex">#282b31</div><div class="color-swatch-role">Dark buttons</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b616e"></div><div class="color-swatch-info"><div class="color-swatch-name">Muted</div><div class="color-swatch-hex">#5b616e</div><div class="color-swatch-role">Secondary text</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:64px; font-weight:400; line-height:1.00;">Display Hero</div><div class="type-meta">CoinbaseDisplay — 80px / 400 / 1.00</div></div>
+<div class="type-sample"><div style="font-size:36px; font-weight:400; line-height:1.11;">Section Heading</div><div class="type-meta">CoinbaseSans — 36px / 400 / 1.11</div></div>
+<div class="type-sample"><div style="font-size:18px; font-weight:600; line-height:1.33;">Feature Title</div><div class="type-meta">CoinbaseSans — 18px / 600 / 1.33</div></div>
+<div class="type-sample"><div style="font-size:18px; font-weight:400; line-height:1.56; color:var(--muted);">Body — The future of money is here. Buy, sell, and manage crypto with Coinbase.</div><div class="type-meta">CoinbaseText — 18px / 400 / 1.56</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;">Button Label</div><div class="type-meta">CoinbaseSans — 16px / 600 / 1.20 / +0.16px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign Up</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-gray" href="#">Learn More</a><div class="button-label">Gray Surface</div></div>
+<div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Dark</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Details</a><div class="button-label">Blue Outline</div></div>
+</div></section>
+
+<div class="section-dark"><div class="inner" id="cards"><div class="section-label" style="color:rgba(255,255,255,0.5);">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Bitcoin (BTC)</h3><p>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.</p></div>
+<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and dApps. The second-largest crypto by market cap.</p></div>
+<div class="card"><h3>USDC</h3><p>A dollar-backed stablecoin. The digital dollar for the global crypto economy.</p></div>
+</div></div></div>
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.5 BTC"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:56px"></div><div class="radius-label">56px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://coinbase.com/">coinbase.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>