[{"data":1,"prerenderedAt":417},["ShallowReactive",2],{"$fEZez4XjPSW5u5Fumg8Qk9zE3BUMSv0VXOKBmwWYmS4Y":3},[4,12,20,27,35,42,50,57,65,72,80,87,95,102,109,116,123,130,137,144,151,158,165,172,179,186,193,200,207,214,221,228,235,242,249,256,263,270,277,284,291,298,305,312,319,326,333,340,347,354,361,368,375,382,389,396,403,410],{"slug":5,"name":6,"category":7,"designMd":8,"previewHtml":9,"previewDarkHtml":10,"readme":11},"airbnb","AIrbnb","Enterprise & Consumer","# Design System Inspiration of Airbnb\n\n## 1. Visual Theme & Atmosphere\n\nAirbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.\n\nThe typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's \"belong anywhere\" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.\n\nWhat distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.\n\n**Key Characteristics:**\n- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent\n- Airbnb Cereal VF — custom variable font with warm, rounded terminals\n- Palette-based token system (`--palette-*`) for systematic color management\n- Three-layer card shadows: border ring + soft blur + stronger blur\n- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements\n- Circular navigation controls (50% radius)\n- Photography-first listing cards — images are the hero content\n- Near-black text (`#222222`) — warm, not cold\n- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states\n- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed\u002Fdark variant of brand red\n- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light\n- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover\n\n### Premium Tiers\n- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding\n- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding\n\n### Text Scale\n- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold\n- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text\n- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions\n- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state\n- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links\n\n### Interactive\n- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational\n- **Border Gray** (`#c1c1c1`): Border color for cards and dividers\n- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces\n\n### Surface & Shadows\n- **Pure White** (`#ffffff`): Page background, card surfaces\n- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift\n- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`\n- **OpenType Features**: `\"salt\"` (stylistic alternates) on specific caption elements\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |\n| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category\u002Fcard titles |\n| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |\n| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |\n| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |\n| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |\n| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |\n| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |\n| Body \u002F Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |\n| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |\n| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `\"salt\"` feature |\n| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |\n| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |\n| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `\"salt\"` feature |\n| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |\n\n### Principles\n- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.\n- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.\n- **\"salt\" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.\n- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#222222` (near-black, not pure black)\n- Text: `#ffffff`\n- Padding: 0px 24px\n- Radius: 8px\n- Hover: transitions to error\u002Fbrand accent via `var(--accent-bg-error)`\n- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)\n\n**Circular Nav**\n- Background: `#f2f2f2`\n- Text: `#222222`\n- Radius: 50% (circle)\n- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)\n- Active: 4px white border ring + focus shadow\n- Focus: scale(0.92) shrink animation\n\n### Cards & Containers\n- Background: `#ffffff`\n- Radius: 14px (badges), 20px (cards\u002Fbuttons), 32px (large)\n- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)\n- Listing cards: full-width photography on top, details below\n- Carousel controls: circular 50% buttons\n\n### Inputs\n- Search: `#222222` text\n- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring\n- Radius: depends on context (search bar uses pill-like rounding)\n\n### Navigation\n- White sticky header with search bar centered\n- Airbnb logo (Rausch Red) left-aligned\n- Category filter pills: horizontal scroll below search\n- Circular nav controls for carousel navigation\n- \"Become a Host\" text link, avatar\u002Fmenu right-aligned\n\n### Image Treatment\n- Listing photography fills card top with generous height\n- Image carousel with dot indicators\n- Heart\u002Fwishlist icon overlay on images\n- 8px–14px radius on contained images\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px\n\n### Grid & Container\n- Full-width header with centered search\n- Category pill bar: horizontal scrollable row\n- Listing grid: responsive multi-column (3–5 columns on desktop)\n- Full-width footer with link columns\n\n### Whitespace Philosophy\n- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.\n- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.\n- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.\n\n### Border Radius Scale\n- Subtle (4px): Small links\n- Standard (8px): Buttons, tabs, search elements\n- Badge (14px): Status badges, labels\n- Card (20px): Feature cards, large buttons\n- Large (32px): Large containers, hero elements\n- Circle (50%): Nav controls, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |\n| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |\n| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active\u002Ffocused elements |\n\n**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#222222` (warm near-black) for text — never pure `#000000`\n- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent\n- Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional\n- Apply the three-layer card shadow for all elevated surfaces\n- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls\n- Use photography as the primary visual content — listings are image-first\n- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy\n- Use circular (50%) buttons for carousel\u002Fnavigation controls\n\n### Don't\n- Don't use pure black (`#000000`) for text — always `#222222` (warm)\n- Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only\n- Don't use thin font weights (300, 400) for headings — 500 minimum\n- Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated\n- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core\n- Don't introduce additional brand colors beyond the Rausch\u002FLuxe\u002FPlus system\n- Don't override the palette token system — use `--palette-*` variables consistently\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C375px | Single column, compact search |\n| Mobile | 375–550px | Standard mobile listing grid |\n| Tablet Small | 550–744px | 2-column listings |\n| Tablet | 744–950px | Search bar expansion |\n| Desktop Small | 950–1128px | 3-column listings |\n| Desktop | 1128–1440px | 4-column grid, full header |\n| Large Desktop | 1440–1920px | 5-column grid |\n| Ultra-wide | >1920px | Maximum grid width |\n\n*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*\n\n### Touch Targets\n- Circular nav buttons: adequate 50% radius sizing\n- Listing cards: full-card tap target on mobile\n- Search bar: prominently sized for thumb interaction\n- Category pills: horizontally scrollable with generous padding\n\n### Collapsing Strategy\n- Listing grid: 5 → 4 → 3 → 2 → 1 columns\n- Search: expanded bar → compact bar → overlay\n- Category pills: horizontal scroll at all sizes\n- Navigation: full header → mobile simplified\n- Map: side panel → overlay\u002Ftoggle\n\n### Image Behavior\n- Listing photos: carousel with swipe on mobile\n- Responsive image sizing with aspect ratio maintained\n- Heart overlay positioned consistently across sizes\n- Photo quality adjusts based on viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#222222`)\n- Brand accent: Rausch Red (`#ff385c`)\n- Secondary text: `#6a6a6a`\n- Disabled: `rgba(0,0,0,0.24)`\n- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`\n- Card shadow: full three-layer stack\n- Button surface: `#f2f2f2`\n\n### Example Component Prompts\n- \"Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a.\"\n- \"Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon).\"\n- \"Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev\u002Fnext arrows (#f2f2f2 bg, 50% radius).\"\n- \"Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent.\"\n- \"Design a heart\u002Fwishlist button: transparent background, 50% radius, white heart icon with dark shadow outline.\"\n\n### Iteration Guide\n1. Start with white — the photography provides all the color\n2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only\n3. Near-black (#222222) for text — the warmth matters\n4. Three-layer shadows create natural, warm lift — always use all three layers\n5. Generous radius: 8px buttons, 20px cards, 50% controls\n6. Cereal VF at 500–700 weight — no thin weights for any heading\n7. Photography is hero — every listing card is image-first\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Airbnb (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;\n    --secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;\n    --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;\n    --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;\n    --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;\n    --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }\n\n  .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 #ebebeb; }\n  .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--near-black); }\n  .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }\n  .hero h1 span { color:var(--rausch); }\n  .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }\n  .btn-circle:hover { box-shadow:var(--shadow-hover); }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }\n  .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid #ebebeb; margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }\n  .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }\n  .card-body { padding:16px; }\n  .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }\n  .card p { font-size:14px; color:var(--secondary); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }\n  .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }\n  .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }\n  .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }\n  .radius-context { font-size:8px; color:var(--disabled); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; border-top:1px solid #ebebeb; font-size:12px; color:var(--secondary); }\n  .footer a { color:var(--rausch); text-decoration:underline; }\n\n  @media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">🔍\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by \u003Cspan>Airbnb\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Explore Stays\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Become a Host\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff385c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Rausch Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff385c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e00b41\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Rausch\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e00b41\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#460479\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Luxe Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#460479\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Luxe tier\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#92174d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Plus Magenta\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#92174d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Plus tier\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Text & Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6a6a6a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6a6a6a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c1c1c1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c1c1c1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f2f2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Circular buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#428bff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Legal Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#428bff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Legal links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c13515\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c13515\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:28px; font-weight:700; line-height:1.43;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 28px \u002F 700 \u002F 1.43 \u002F Cereal VF\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 22px \u002F 600 \u002F 1.18 \u002F -0.44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 20px \u002F 600 \u002F 1.20 \u002F -0.18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.25;\">UI Medium — Inspiration for future getaways\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">UI — 16px \u002F 500 \u002F 1.25\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);\">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 14px \u002F 400 \u002F 1.43\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:700; line-height:1.33;\">Tag Bold — $145 night\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tag Bold — 12px \u002F 700 \u002F 1.33\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;\">SUPERHOST\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 8px \u002F 700 \u002F uppercase \u002F +0.32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Host\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">←\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circle Nav\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">→\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circle Nav\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;\">🔍\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Search\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Istanbul, Turkey\u003C\u002Fh3>\u003Cp>Entire apartment. 2 guests, 1 bed. $78 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#eee;\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Barcelona, Spain\u003C\u002Fh3>\u003Cp>Private room. 3 guests, 2 beds. $92 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#e8e8e8;\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Galveston, TX\u003C\u002Fh3>\u003Cp>Entire house. 6 guests, 3 beds. $145 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Where\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Search destinations\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Check in\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Apr 15, 2026\">\u003Cdiv class=\"form-state-label\">Focus (dark ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Guests\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"0 guests\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Message host\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell your host about your trip...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:56px; height:56px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Controls\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border:1px solid #ebebeb;\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Three-layer warm\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-hover);\">\u003Cdiv class=\"elevation-label\">Hover\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--near-black);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fairbnb.com\u002F\">airbnb.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Airbnb (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #1a1a1a; --near-black: #f0f0f0; --rausch: #ff385c; --deep-rausch: #e00b41;\n    --secondary: #a0a0a0; --disabled: #666666; --border: #3a3a3a; --surface: #2a2a2a;\n    --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;\n    --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;\n    --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;\n    --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }\n\n  .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 #2a2a2a; }\n  .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--near-black); }\n  .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }\n  .hero h1 span { color:var(--rausch); }\n  .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }\n  .btn-circle:hover { box-shadow:var(--shadow-hover); }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }\n  .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid #2a2a2a; margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }\n  .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }\n  .card-body { padding:16px; }\n  .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }\n  .card p { font-size:14px; color:var(--secondary); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }\n  .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }\n  .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--disabled); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }\n  .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }\n  .radius-context { font-size:8px; color:var(--disabled); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; border-top:1px solid #2a2a2a; font-size:12px; color:var(--secondary); }\n  .footer a { color:var(--rausch); text-decoration:underline; }\n\n  @media (max-width:744px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">🔍\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#ff385c;color:#ffffff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by \u003Cspan>Airbnb\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Explore Stays\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Become a Host\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff385c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Rausch Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff385c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e00b41\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Rausch\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e00b41\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#460479\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Luxe Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#460479\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Luxe tier\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#92174d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Plus Magenta\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#92174d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Plus tier\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Text & Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6a6a6a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6a6a6a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c1c1c1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c1c1c1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f2f2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Circular buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#428bff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Legal Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#428bff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Legal links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c13515\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c13515\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:28px; font-weight:700; line-height:1.43;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 28px \u002F 700 \u002F 1.43 \u002F Cereal VF\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 22px \u002F 600 \u002F 1.18 \u002F -0.44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 20px \u002F 600 \u002F 1.20 \u002F -0.18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.25;\">UI Medium — Inspiration for future getaways\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">UI — 16px \u002F 500 \u002F 1.25\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);\">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 14px \u002F 400 \u002F 1.43\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:700; line-height:1.33;\">Tag Bold — $145 night\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tag Bold — 12px \u002F 700 \u002F 1.33\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;\">SUPERHOST\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 8px \u002F 700 \u002F uppercase \u002F +0.32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Host\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">←\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circle Nav\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">→\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circle Nav\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;\">🔍\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Search\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Istanbul, Turkey\u003C\u002Fh3>\u003Cp>Entire apartment. 2 guests, 1 bed. $78 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#eee;\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Barcelona, Spain\u003C\u002Fh3>\u003Cp>Private room. 3 guests, 2 beds. $92 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#e8e8e8;\">Photo placeholder\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Galveston, TX\u003C\u002Fh3>\u003Cp>Entire house. 6 guests, 3 beds. $145 night.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Where\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Search destinations\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Check in\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Apr 15, 2026\">\u003Cdiv class=\"form-state-label\">Focus (dark ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Guests\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"0 guests\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Message host\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell your host about your trip...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:56px; height:56px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Controls\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border:1px solid #ebebeb;\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Three-layer warm\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-hover);\">\u003Cdiv class=\"elevation-label\">Hover\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--near-black);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fairbnb.com\u002F\">airbnb.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Airbnb Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fairbnb\u002FDESIGN.md) extracted from the public [Airbnb](https:\u002F\u002Fairbnb.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fairbnb\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airbnb Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fairbnb\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Airbnb Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fairbnb\u002Fpreview-screenshot.png)\n",{"slug":13,"name":14,"category":15,"designMd":16,"previewHtml":17,"previewDarkHtml":18,"readme":19},"airtable","AIrtable","Design & Productivity","# Design System Inspiration of Airtable\n\n## 1. Visual Theme & Atmosphere\n\nAirtable's website is a clean, enterprise-friendly platform that communicates \"sophisticated simplicity\" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.\n\n**Key Characteristics:**\n- White canvas with deep navy text (`#181d26`)\n- Airtable Blue (`#1b61c9`) as primary CTA and link color\n- Haas + Haas Groot Disp dual font system\n- Positive letter-spacing on body text (0.08px–0.28px)\n- 12px radius buttons, 16px–32px for cards\n- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`\n- Semantic theme tokens: `--theme_*` CSS variable naming\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Deep Navy** (`#181d26`): Primary text\n- **Airtable Blue** (`#1b61c9`): CTA buttons, links\n- **White** (`#ffffff`): Primary surface\n- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`\n\n### Semantic\n- **Success Green** (`#006400`): `--theme_success-text`\n- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`\n- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`\n\n### Neutral\n- **Dark Gray** (`#333333`): Secondary text\n- **Mid Blue** (`#254fad`): Link\u002Faccent blue variant\n- **Border** (`#e0e2e6`): Card borders\n- **Light Surface** (`#f8fafc`): Subtle surface\n\n### Shadows\n- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)\n- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`\n- **Display**: `Haas Groot Disp`, fallback: `Haas`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Haas | 48px | 400 | 1.15 | normal |\n| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |\n| Section Heading | Haas | 40px | 400 | 1.25 | normal |\n| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |\n| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |\n| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |\n| Body | Haas | 18px | 400 | 1.35 | 0.18px |\n| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |\n| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |\n| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius\n- **White**: white bg, `#181d26` text, 12px radius, 1px border white\n- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)\n\n### Cards: `1px solid #e0e2e6`, 16px–24px radius\n### Inputs: Standard Haas styling\n\n## 5. Layout\n- Spacing: 1–48px (8px base)\n- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)\n\n## 6. Depth\n- Blue-tinted multi-layer shadow system\n- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`\n\n## 7. Do's and Don'ts\n### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons\n### Don't: Skip positive letter-spacing, use heavy shadows\n\n## 8. Responsive Behavior\nBreakpoints: 425–1664px (23 breakpoints)\n\n## 9. Agent Prompt Guide\n- Text: Deep Navy (`#181d26`)\n- CTA: Airtable Blue (`#1b61c9`)\n- Background: White (`#ffffff`)\n- Border: `#e0e2e6`\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Airtable (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#fff; --navy:#181d26; --blue:#1b61c9; --gray:#333; --border:#e0e2e6; --weak:rgba(4,14,32,0.69); --light:#f8fafc; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }\n\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:56px; }\n  .color-swatch-info { padding:8px; }\n  .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }\n  .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }\n\n  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:9px; color:var(--weak); margin-top:4px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }\n\n  .form-group { margin-bottom:12px; max-width:380px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }\n  .form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:#c00; }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }\n  .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .radius-row { display:flex; gap:10px; flex-wrap:wrap; }\n  .radius-item { text-align:center; }\n  .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }\n  .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }\n  .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }\n  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }\n  .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up for free\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Airtable\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — connected in one workspace.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up for free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#181d26\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#181d26\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1b61c9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Airtable Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1b61c9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e0e2e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#254fad\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#254fad\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#333333\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#333333\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e0e2e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e2e6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f8fafc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f8fafc\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:400; line-height:1.15;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 48px \u002F 400 \u002F 1.15\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:900; line-height:1.50;\">Display Bold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas Groot Disp — 48px \u002F 900 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.15;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 32px \u002F 400 \u002F 1.15\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);\">Body — All your teams, all their workflows — connected in one workspace.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 18px \u002F 400 \u002F 1.35 \u002F +0.18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 16px \u002F 500 \u002F 1.30 \u002F +0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);\">Caption — Updated 3 min ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 14px \u002F 500 \u002F 1.35 \u002F +0.28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Product Development\u003C\u002Fh3>\u003Cp>Build products faster with connected workflows and real-time collaboration.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Marketing Campaigns\u003C\u002Fh3>\u003Cp>Plan, execute, and track campaigns from ideation to launch.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Operations\u003C\u002Fh3>\u003Cp>Streamline business processes with automated workflows.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Workspace\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"My Team\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Base Name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your base...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:48px; height:48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"border:1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Border only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;\">\u003Cdiv class=\"elevation-label\">Blue Shadow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue-tinted multi-layer\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;\">\u003Cdiv class=\"elevation-label\">Soft\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient navy glow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fairtable.com\u002F\">airtable.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Airtable (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#181d26; --navy:#f0f2f5; --blue:#1b61c9; --gray:#b0b4be; --border:#2a2e38; --weak:rgba(240,242,245,0.6); --light:#1e2330; --font:'Inter',-apple-system,system-ui,Segoe UI,Roboto,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--navy); font-family:var(--font); font-size:16px; line-height:1.35; letter-spacing:0.08px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:10px 20px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:0.08px; }\n\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:16px 24px; border-radius:12px; font-size:16px; font-weight:500; text-decoration:none; border:none; }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--navy); padding:16px 24px; border-radius:12px; border:1px solid var(--navy); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:56px; }\n  .color-swatch-info { padding:8px; }\n  .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }\n  .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }\n\n  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:9px; color:var(--weak); margin-top:4px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }\n\n  .form-group { margin-bottom:12px; max-width:380px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }\n  .form-input { width:100%; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; letter-spacing:0.08px; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:#c00; }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--navy); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }\n  .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .radius-row { display:flex; gap:10px; flex-wrap:wrap; }\n  .radius-item { text-align:center; }\n  .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }\n  .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }\n  .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }\n  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }\n  .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up for free\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#1b61c9;color:#fff;font-size:9px;font-weight:500;padding:4px 10px;border-radius:12px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Airtable\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — connected in one workspace.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up for free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#181d26\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#181d26\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1b61c9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Airtable Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1b61c9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e0e2e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#254fad\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#254fad\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#333333\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#333333\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e0e2e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e2e6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f8fafc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f8fafc\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:400; line-height:1.15;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 48px \u002F 400 \u002F 1.15\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:900; line-height:1.50;\">Display Bold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas Groot Disp — 48px \u002F 900 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.15;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 32px \u002F 400 \u002F 1.15\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.35; letter-spacing:0.18px; color:var(--weak);\">Body — All your teams, all their workflows — connected in one workspace.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 18px \u002F 400 \u002F 1.35 \u002F +0.18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 16px \u002F 500 \u002F 1.30 \u002F +0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);\">Caption — Updated 3 min ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Haas — 14px \u002F 500 \u002F 1.35 \u002F +0.28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Product Development\u003C\u002Fh3>\u003Cp>Build products faster with connected workflows and real-time collaboration.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Marketing Campaigns\u003C\u002Fh3>\u003Cp>Plan, execute, and track campaigns from ideation to launch.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Operations\u003C\u002Fh3>\u003Cp>Streamline business processes with automated workflows.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Workspace\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"My Team\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Base Name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your base...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:48px; height:48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"border:1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Border only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;\">\u003Cdiv class=\"elevation-label\">Blue Shadow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue-tinted multi-layer\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;\">\u003Cdiv class=\"elevation-label\">Soft\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient navy glow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fairtable.com\u002F\">airtable.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Airtable Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fairtable\u002FDESIGN.md) extracted from the public [Airtable](https:\u002F\u002Fairtable.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fairtable\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airtable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Airtable Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fairtable\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Airtable Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fairtable\u002Fpreview-screenshot.png)\n",{"slug":21,"name":22,"category":7,"designMd":23,"previewHtml":24,"previewDarkHtml":25,"readme":26},"apple","Apple","# Design System Inspiration of Apple\n\n## 1. Visual Theme & Atmosphere\n\nApple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.\n\nThe typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset — precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.\n\nThe color story is starkly binary. Product sections alternate between pure black (`#000000`) backgrounds with white text and light gray (`#f5f5f7`) backgrounds with near-black text (`#1d1d1f`). This creates a cinematic pacing — dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (`#0071e3`), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.\n\n**Key Characteristics:**\n- SF Pro Display\u002FText with optical sizing — letterforms adapt automatically to size context\n- Binary light\u002Fdark section rhythm: black (`#000000`) alternating with light gray (`#f5f5f7`)\n- Single accent color: Apple Blue (`#0071e3`) reserved exclusively for interactive elements\n- Product-as-hero photography on solid color fields — no gradients, no textures, no distractions\n- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact\n- Full-width section layout with centered content — the viewport IS the canvas\n- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons\n- Generous whitespace between sections allowing each product moment to breathe\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.\n- **Light Gray** (`#f5f5f7`): Alternate section backgrounds, informational areas. Not white — the slight blue-gray tint prevents sterility.\n- **Near Black** (`#1d1d1f`): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.\n\n### Interactive\n- **Apple Blue** (`#0071e3`): `--sk-focus-color`, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.\n- **Link Blue** (`#0066cc`): `--sk-body-link-color`, inline text links. Slightly darker than Apple Blue for text-level readability.\n- **Bright Blue** (`#2997ff`): Links on dark backgrounds. Higher luminance for contrast on black sections.\n\n### Text\n- **White** (`#ffffff`): Text on dark backgrounds, button text on blue\u002Fdark CTAs.\n- **Near Black** (`#1d1d1f`): Primary body text on light backgrounds.\n- **Black 80%** (`rgba(0, 0, 0, 0.8)`): Secondary text, nav items on light backgrounds. Slightly softened.\n- **Black 48%** (`rgba(0, 0, 0, 0.48)`): Tertiary text, disabled states, carousel controls.\n\n### Surface & Dark Variants\n- **Dark Surface 1** (`#272729`): Card backgrounds in dark sections.\n- **Dark Surface 2** (`#262628`): Subtle surface variation in dark contexts.\n- **Dark Surface 3** (`#28282a`): Elevated cards on dark backgrounds.\n- **Dark Surface 4** (`#2a2a2d`): Highest dark surface elevation.\n- **Dark Surface 5** (`#242426`): Deepest dark surface tone.\n\n### Button States\n- **Button Active** (`#ededf2`): Active\u002Fpressed state for light buttons.\n- **Button Default Light** (`#fafafc`): Search\u002Ffilter button backgrounds.\n- **Overlay** (`rgba(210, 210, 215, 0.64)`): Media control scrims, overlays.\n- **White 32%** (`rgba(255, 255, 255, 0.32)`): Hover state on dark modal close buttons.\n\n### Shadows\n- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `SF Pro Display`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- **Body**: `SF Pro Text`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | Product launch headlines, maximum impact |\n| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | Feature section titles |\n| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | Product tile headlines |\n| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | Bold card headings |\n| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | Regular card headings |\n| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | Large navigation headings |\n| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | Light sub-navigation text |\n| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | Standard reading text |\n| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | Emphasized body text, labels |\n| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | Large button text, light weight |\n| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | Standard button text |\n| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | Body links, \"Learn more\" |\n| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | Secondary text, descriptions |\n| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | Emphasized captions |\n| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | Fine print, footnotes |\n| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | Bold fine print |\n| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | Legal text, smallest size |\n\n### Principles\n- **Optical sizing as philosophy**: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.\n- **Weight restraint**: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.\n- **Negative tracking at all sizes**: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.\n- **Extreme line-height range**: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue (CTA)**\n- Background: `#0071e3` (Apple Blue)\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Border: 1px solid transparent\n- Font: SF Pro Text, 17px, weight 400\n- Hover: background brightens slightly\n- Active: `#ededf2` background shift\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Primary call-to-action (\"Buy\", \"Shop iPhone\")\n\n**Primary Dark**\n- Background: `#1d1d1f`\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Font: SF Pro Text, 17px, weight 400\n- Use: Secondary CTA, dark variant\n\n**Pill Link (Learn More \u002F Shop)**\n- Background: transparent\n- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)\n- Radius: 980px (full pill)\n- Border: 1px solid `#0066cc`\n- Font: SF Pro Text, 14px-17px\n- Hover: underline decoration\n- Use: \"Learn more\" and \"Shop\" links — the signature Apple inline CTA\n\n**Filter \u002F Search Button**\n- Background: `#fafafc`\n- Text: `rgba(0, 0, 0, 0.8)`\n- Padding: 0px 14px\n- Radius: 11px\n- Border: 3px solid `rgba(0, 0, 0, 0.04)`\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Search bars, filter controls\n\n**Media Control**\n- Background: `rgba(210, 210, 215, 0.64)`\n- Text: `rgba(0, 0, 0, 0.48)`\n- Radius: 50% (circular)\n- Active: scale(0.9), background shifts\n- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text\n- Use: Play\u002Fpause, carousel arrows\n\n### Cards & Containers\n- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)\n- Border: none (borders are rare in Apple's system)\n- Radius: 5px-8px\n- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` for elevated product cards\n- Content: centered, generous padding\n- Hover: no standard hover state — cards are static, links within them are interactive\n\n### Navigation\n- Background: `rgba(0, 0, 0, 0.8)` (translucent dark) with `backdrop-filter: saturate(180%) blur(20px)`\n- Height: 48px (compact)\n- Text: `#ffffff` at 12px, weight 400\n- Active: underline on hover\n- Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport\n- Mobile: collapses to hamburger with full-screen overlay menu\n- The nav floats above content, maintaining its dark translucent glass regardless of section background\n\n### Image Treatment\n- Products on solid-color fields (black or white) — no backgrounds, no context, just the object\n- Full-bleed section images that span the entire viewport width\n- Product photography at extremely high resolution with subtle shadows\n- Lifestyle images confined to rounded-corner containers (12px+ radius)\n\n### Distinctive Components\n\n**Product Hero Module**\n- Full-viewport-width section with solid background (black or `#f5f5f7`)\n- Product name as the primary headline (SF Pro Display, 56px, weight 600)\n- One-line descriptor below in lighter weight\n- Two pill CTAs side by side: \"Learn more\" (outline) and \"Buy\" \u002F \"Shop\" (filled)\n\n**Product Grid Tile**\n- Square or near-square card on contrasting background\n- Product image dominating 60-70% of the tile\n- Product name + one-line description below\n- \"Learn more\" and \"Shop\" link pair at bottom\n\n**Feature Comparison Strip**\n- Horizontal scroll of product variants\n- Each variant as a vertical card with image, name, and key specs\n- Minimal chrome — the products speak for themselves\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px\n- Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.\n\n### Grid & Container\n- Max content width: approximately 980px (the recurring \"980px radius\" in pill buttons echoes this width)\n- Hero: full-viewport-width sections with centered content block\n- Product grids: 2-3 column layouts within centered container\n- Single-column for hero moments — one product, one message, full attention\n- No visible grid lines or gutters — spacing creates implied structure\n\n### Whitespace Philosophy\n- **Cinematic breathing room**: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty — it is the pause between scenes in a film.\n- **Vertical rhythm through color blocks**: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, `#f5f5f7`, white). Each color change signals a new \"scene.\"\n- **Compression within, expansion between**: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.\n\n### Border Radius Scale\n- Micro (5px): Small containers, link tags\n- Standard (8px): Buttons, product cards, image containers\n- Comfortable (11px): Search inputs, filter buttons\n- Large (12px): Feature panels, lifestyle image containers\n- Full Pill (980px): CTA links (\"Learn more\", \"Shop\"), navigation pills\n- Circle (50%): Media controls (play\u002Fpause, arrows)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, solid background | Standard content sections, text blocks |\n| Navigation Glass | `backdrop-filter: saturate(180%) blur(20px)` on `rgba(0,0,0,0.8)` | Sticky navigation bar — the glass effect |\n| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Product cards, floating elements |\n| Media Control | `rgba(210, 210, 215, 0.64)` background with scale transforms | Play\u002Fpause buttons, carousel controls |\n| Focus (Accessibility) | `2px solid #0071e3` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Apple uses shadow extremely sparingly. The primary shadow (`3px 5px 30px` with 0.22 opacity) is soft, wide, and offset — mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the \"product as physical sculpture\" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).\n\n### Decorative Depth\n- Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content\n- Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows\n- Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones\n\n## 7. Do's and Don'ts\n\n### Do\n- Use SF Pro Display at 20px+ and SF Pro Text below 20px — respect the optical sizing boundary\n- Apply negative letter-spacing at all text sizes (not just headlines) — Apple tracks tight universally\n- Use Apple Blue (`#0071e3`) ONLY for interactive elements — it must be the singular accent\n- Alternate between black and light gray (`#f5f5f7`) section backgrounds for cinematic rhythm\n- Use 980px pill radius for CTA links — the signature Apple link shape\n- Keep product imagery on solid-color fields with no competing visual elements\n- Use the translucent dark glass (`rgba(0,0,0,0.8)` + blur) for sticky navigation\n- Compress headline line-heights to 1.07-1.14 — Apple headlines are famously tight\n\n### Don't\n- Don't introduce additional accent colors — the entire chromatic budget is spent on blue\n- Don't use heavy shadows or multiple shadow layers — Apple's shadow system is one soft diffused shadow or nothing\n- Don't use borders on cards or containers — Apple almost never uses visible borders (except on specific buttons)\n- Don't apply wide letter-spacing to SF Pro — it is designed to run tight at every size\n- Don't use weight 800 or 900 — the maximum is 700 (bold), and even that is rare\n- Don't add textures, patterns, or gradients to backgrounds — solid colors only\n- Don't make the navigation opaque — the glass blur effect is essential to the Apple UI identity\n- Don't center-align body text — Apple body copy is left-aligned; only headlines center\n- Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | \u003C360px | Minimum supported, single column |\n| Mobile | 360-480px | Standard mobile layout |\n| Mobile Large | 480-640px | Wider single column, larger images |\n| Tablet Small | 640-834px | 2-column product grids begin |\n| Tablet | 834-1024px | Full tablet layout, expanded nav |\n| Desktop Small | 1024-1070px | Standard desktop layout begins |\n| Desktop | 1070-1440px | Full layout, max content width |\n| Large Desktop | >1440px | Centered with generous margins |\n\n### Touch Targets\n- Primary CTAs: 8px 15px padding creating ~44px touch height\n- Navigation links: 48px height with adequate spacing\n- Media controls: 50% radius circular buttons, minimum 44x44px\n- \"Learn more\" pills: generous padding for comfortable tapping\n\n### Collapsing Strategy\n- Hero headlines: 56px Display → 40px → 28px on mobile, maintaining tight line-height proportionally\n- Product grids: 3-column → 2-column → single column stacked\n- Navigation: full horizontal nav → compact mobile menu (hamburger)\n- Product hero modules: full-bleed maintained at all sizes, text scales down\n- Section backgrounds: maintain full-width color blocks at all breakpoints — the cinematic rhythm never breaks\n- Image sizing: products scale proportionally, never crop — the product silhouette is sacred\n\n### Image Behavior\n- Product photography maintains aspect ratio at all breakpoints\n- Hero product images scale down but stay centered\n- Full-bleed section backgrounds persist at every size\n- Lifestyle images may crop on mobile but maintain their rounded corners\n- Lazy loading for below-fold product images\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Apple Blue (`#0071e3`)\n- Page background (light): `#f5f5f7`\n- Page background (dark): `#000000`\n- Heading text (light): `#1d1d1f`\n- Heading text (dark): `#ffffff`\n- Body text: `rgba(0, 0, 0, 0.8)` on light, `#ffffff` on dark\n- Link (light bg): `#0066cc`\n- Link (dark bg): `#2997ff`\n- Focus ring: `#0071e3`\n- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding).\"\n- \"Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px.\"\n- \"Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right.\"\n- \"Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below.\"\n- \"Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA.\"\n\n### Iteration Guide\n1. Every interactive element gets Apple Blue (`#0071e3`) — no other accent colors\n2. Section backgrounds alternate: black for immersive moments, `#f5f5f7` for informational moments\n3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below — never mix\n4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px\n5. The navigation glass effect (translucent dark + blur) is non-negotiable — it defines the Apple web experience\n6. Products always appear on solid color fields — never on gradients, textures, or lifestyle backgrounds in hero modules\n7. Shadow is rare and always soft: `3px 5px 30px 0.22 opacity` or nothing at all\n8. Pill CTAs use 980px radius — this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Apple (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #1d1d1f;\n    --white: #ffffff;\n    --pure-black: #000000;\n    --light-gray: #f5f5f7;\n    --apple-blue: #0071e3;\n    --link-blue: #0066cc;\n    --link-blue-dark: #2997ff;\n    --gray-80: rgba(0,0,0,0.8);\n    --gray-48: rgba(0,0,0,0.48);\n    --button-active: #ededf2;\n    --filter-bg: #fafafc;\n    --dark-surface-1: #272729;\n    --dark-surface-2: #28282a;\n    --dark-surface-3: #2a2a2d;\n    --overlay: rgba(210,210,215,0.64);\n    --shadow-card: rgba(0,0,0,0.22) 3px 5px 30px 0px;\n    --nav-bg: rgba(0,0,0,0.8);\n    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-text);\n    font-size: 17px; font-weight: 400; line-height: 1.47;\n    letter-spacing: -0.374px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 32px; height: 48px;\n    background: var(--nav-bg);\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: #ffffff; }\n  .nav-cta {\n    display: inline-block; background: var(--apple-blue); color: #ffffff;\n    padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 400;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.88; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; background: var(--light-gray); }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 56px; font-weight: 600; line-height: 1.07;\n    letter-spacing: -0.28px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 21px; font-weight: 400; line-height: 1.19; letter-spacing: 0.231px; color: var(--gray-80); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n  .btn-blue {\n    display: inline-block; background: var(--apple-blue); color: #ffffff;\n    padding: 8px 22px; border-radius: 980px; border: none;\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-blue:hover { opacity: 0.88; }\n  .btn-outline {\n    display: inline-block; background: transparent; color: var(--apple-blue);\n    padding: 8px 22px; border-radius: 980px;\n    border: 1px solid var(--apple-blue);\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-outline:hover { background: rgba(0,113,227,0.06); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 980px; margin: 0 auto; }\n  .section-label { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--gray-48); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.28px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid #d2d2d7; margin: 0; }\n\n  \u002F* DARK SECTION (full-width) *\u002F\n  .section-dark { background: var(--pure-black); color: #ffffff; padding: 64px 32px; }\n  .section-dark .section-inner { max-width: 980px; margin: 0 auto; }\n  .section-dark .section-label { color: rgba(255,255,255,0.48); }\n  .section-dark .section-title { color: #ffffff; }\n\n  \u002F* LIGHT-GRAY SECTION *\u002F\n  .section-gray { background: var(--light-gray); padding: 64px 32px; }\n  .section-gray .section-inner { max-width: 980px; margin: 0 auto; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--black); }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-48); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-48); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-80); letter-spacing: -0.224px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #d2d2d7; }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }\n  .btn-dark-fill {\n    display: inline-block; background: var(--black); color: #ffffff;\n    padding: 8px 22px; border-radius: 8px; border: none;\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer;\n  }\n  .btn-filter {\n    display: inline-block; background: var(--filter-bg); color: var(--gray-80);\n    padding: 6px 14px; border-radius: 11px; border: 3px solid rgba(0,0,0,0.04);\n    font-family: var(--font-text); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer;\n  }\n  .btn-media {\n    display: inline-flex; align-items: center; justify-content: center;\n    width: 36px; height: 36px; border-radius: 50%;\n    background: var(--overlay); color: var(--gray-48); border: none;\n    font-size: 14px; cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }\n  .card { background: var(--light-gray); border-radius: 8px; padding: 32px 24px; transition: box-shadow 0.3s; }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.196px; line-height: 1.14; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-80); line-height: 1.43; letter-spacing: -0.224px; }\n  .card-link { font-size: 14px; color: var(--link-blue); text-decoration: none; margin-top: 12px; display: inline-block; }\n  .card-link:hover { text-decoration: underline; }\n\n  .card-dark { background: var(--dark-surface-1); color: #ffffff; }\n  .card-dark h3 { color: #ffffff; }\n  .card-dark p { color: rgba(255,255,255,0.7); }\n  .card-dark .card-link { color: var(--link-blue-dark); }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 6px; letter-spacing: -0.224px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: 1px solid #d2d2d7; padding: 10px 14px; border-radius: 8px;\n    font-family: var(--font-text); font-size: 17px; outline: none;\n    letter-spacing: -0.374px; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.2); }\n  .form-input--focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.2); }\n  .form-input--error { border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,0.2); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: 1px solid #d2d2d7; padding: 10px 14px; border-radius: 8px;\n    font-family: var(--font-text); font-size: 17px; resize: vertical; outline: none;\n    letter-spacing: -0.374px;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-48); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--apple-blue); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }\n  .radius-context { font-size: 10px; color: var(--gray-48); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 8px; padding: 24px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; margin-bottom: 4px; }\n  .elevation-desc { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--gray-48); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: var(--light-gray); font-size: 12px; color: var(--gray-48); letter-spacing: -0.12px; }\n  .footer a { color: var(--link-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section-dark { padding: 48px 20px; }\n    .section-gray { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Shop Now\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Apple\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-blue\" href=\"#\">Learn more\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hero backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f5f5f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f5f5f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Alternate sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1d1d1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1d1d1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #d2d2d7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text on dark, button text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0071e3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Apple Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0071e3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0066cc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0066cc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Inline text links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2997ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Bright Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2997ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links on dark bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.8)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black 80%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.8)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.48)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black 48%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.48)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fafafc; border-bottom:1px solid #d2d2d7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Filter BG\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fafafc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Search\u002Ffilter buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ededf2; border-bottom:1px solid #d2d2d7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ededf2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Dark Surfaces\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#272729\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#272729\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark section cards\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#28282a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#28282a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark elevated cards\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2a2a2d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2a2a2d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Highest dark elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#242426\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#242426\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deepest dark tone\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:56px; font-weight:600; line-height:1.07; letter-spacing:-0.28px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 56px \u002F 600 \u002F 1.07 \u002F -0.28px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.28px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 40px \u002F 600 \u002F 1.10 \u002F normal \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.14; letter-spacing:0.196px;\">Tile Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tile Heading -- 28px \u002F 400 \u002F 1.14 \u002F 0.196px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.19; letter-spacing:0.231px;\">Card Title Bold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Bold -- 21px \u002F 700 \u002F 1.19 \u002F 0.231px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.19; letter-spacing:0.231px;\">Card Title Regular\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Regular -- 21px \u002F 400 \u002F 1.19 \u002F 0.231px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:17px; font-weight:400; line-height:1.47; letter-spacing:-0.374px;\">Body -- The all-new design brings incredible capability. Powerful features let you do more than ever.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 17px \u002F 400 \u002F 1.47 \u002F -0.374px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:17px; font-weight:600; line-height:1.24; letter-spacing:-0.374px;\">Body Emphasis -- Featured highlights\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Emphasis -- 17px \u002F 600 \u002F 1.24 \u002F -0.374px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:-0.224px;\">Link \u002F Caption -- Learn more about the latest features\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link \u002F Caption -- 14px \u002F 400 \u002F 1.43 \u002F -0.224px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:12px; font-weight:400; line-height:1.33; letter-spacing:-0.12px;\">Micro -- Legal text, footnotes, and fine print\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro -- 12px \u002F 400 \u002F 1.33 \u002F -0.12px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:10px; font-weight:400; line-height:1.47; letter-spacing:-0.08px;\">Nano -- smallest size, regulatory labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nano -- 10px \u002F 400 \u002F 1.47 \u002F -0.08px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Buy\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark-fill\" href=\"#\">Shop iPhone\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Fill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-filter\" href=\"#\">Search\u003C\u002Fa>\u003Cdiv class=\"button-label\">Filter\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-media\">▶\u003C\u002Fbutton>\u003Cdiv class=\"button-label\">Media\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--link-blue); padding:4px 16px; border-radius:980px; border:1px solid var(--link-blue); font-size:14px; font-weight:400; letter-spacing:-0.224px;\">Learn more >\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Link Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-dark\">\n\u003Csection class=\"section-inner\" id=\"cards-dark\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards (Dark)\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Cards on Dark Background\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-dark\">\n      \u003Ch3>iPhone\u003C\u002Fh3>\n      \u003Cp>Designed to be extraordinary. Featuring the most advanced chip, an incredible camera system, and all-day battery life.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\" style=\"color:#2997ff;\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Ch3>MacBook Neo\u003C\u002Fh3>\n      \u003Cp>Supercharged for pros. The most powerful MacBook ever with the M-series chip delivers unprecedented performance.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\" style=\"color:#2997ff;\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark\">\n      \u003Ch3>iPad Air\u003C\u002Fh3>\n      \u003Cp>Powerful and colorful. With the latest chip, stunning Liquid Retina display, and Apple Pencil support.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\" style=\"color:#2997ff;\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section-gray\">\n\u003Cdiv class=\"section-inner\" id=\"cards-light\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards (Light)\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Cards on Light Background\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\" style=\"background:#ffffff;\">\n      \u003Ch3>AirPods Max\u003C\u002Fh3>\n      \u003Cp>High-fidelity audio with active noise cancellation, spatial audio, and computational audio for immersive listening.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:#ffffff; box-shadow: var(--shadow-card);\">\n      \u003Ch3>Apple Watch\u003C\u002Fh3>\n      \u003Cp>The ultimate device for a healthy life. Advanced health sensors, fitness metrics, and seamless connectivity.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:#ffffff;\">\n      \u003Ch3>Apple TV+\u003C\u002Fh3>\n      \u003Cp>Original shows and movies from the world's greatest storytellers. Stream on all your favorite devices.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Apple ID\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"name@example.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"password\" value=\"mypassword123\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid@\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Feedback\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about your experience...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:17px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">17\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:11px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">11px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Search\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Features\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:980px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">980px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Media\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border:1px solid #d2d2d7;\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, solid bg\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.8); color:#fff; backdrop-filter:blur(20px);\">\u003Cdiv class=\"elevation-label\" style=\"color:#fff;\">Nav Glass\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\" style=\"color:rgba(255,255,255,0.6);\">Translucent + blur\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.22) 3px 5px 30px 0px;\">\u003Cdiv class=\"elevation-label\">Card Shadow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">3px 5px 30px 0.22\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px #0071e3;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid Apple Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark-surface-1); color:#fff;\">\u003Cdiv class=\"elevation-label\" style=\"color:#fff;\">Dark Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\" style=\"color:rgba(255,255,255,0.5);\">#272729\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fapple.com\u002F\">apple.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Apple (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #f5f5f7;\n    --white: #000000;\n    --pure-black: #000000;\n    --light-gray: #1d1d1f;\n    --apple-blue: #2997ff;\n    --link-blue: #2997ff;\n    --link-blue-dark: #2997ff;\n    --gray-80: rgba(255,255,255,0.8);\n    --gray-48: rgba(255,255,255,0.48);\n    --button-active: #333336;\n    --filter-bg: #1c1c1e;\n    --dark-surface-1: #272729;\n    --dark-surface-2: #28282a;\n    --dark-surface-3: #2a2a2d;\n    --overlay: rgba(60,60,67,0.64);\n    --shadow-card: rgba(0,0,0,0.5) 3px 5px 30px 0px;\n    --nav-bg: rgba(0,0,0,0.88);\n    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-text);\n    font-size: 17px; font-weight: 400; line-height: 1.47;\n    letter-spacing: -0.374px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 32px; height: 48px;\n    background: var(--nav-bg);\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: #f5f5f7; text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: #ffffff; }\n  .nav-cta {\n    display: inline-block; background: var(--apple-blue); color: #ffffff;\n    padding: 4px 12px; border-radius: 980px; font-size: 12px; font-weight: 400;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.88; }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: #f5f5f7; color: #000000;\n    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; background: var(--light-gray); }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 56px; font-weight: 600; line-height: 1.07;\n    letter-spacing: -0.28px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 21px; font-weight: 400; line-height: 1.19; letter-spacing: 0.231px; color: var(--gray-80); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n  .btn-blue {\n    display: inline-block; background: var(--apple-blue); color: #ffffff;\n    padding: 8px 22px; border-radius: 980px; border: none;\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-blue:hover { opacity: 0.88; }\n  .btn-outline {\n    display: inline-block; background: transparent; color: var(--apple-blue);\n    padding: 8px 22px; border-radius: 980px;\n    border: 1px solid var(--apple-blue);\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-outline:hover { background: rgba(41,151,255,0.1); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 980px; margin: 0 auto; }\n  .section-label { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--gray-48); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: -0.28px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid #333336; margin: 0; }\n\n  \u002F* DARK SECTION (inverted for dark mode = lighter section) *\u002F\n  .section-dark { background: #1d1d1f; color: #f5f5f7; padding: 64px 32px; }\n  .section-dark .section-inner { max-width: 980px; margin: 0 auto; }\n  .section-dark .section-label { color: rgba(255,255,255,0.48); }\n  .section-dark .section-title { color: #f5f5f7; }\n\n  \u002F* GRAY SECTION (slightly lighter dark) *\u002F\n  .section-gray { background: #1c1c1e; padding: 64px 32px; }\n  .section-gray .section-inner { max-width: 980px; margin: 0 auto; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--black); }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-48); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-48); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-80); letter-spacing: -0.224px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #333336; }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 400; color: var(--gray-48); margin-top: 8px; }\n  .btn-dark-fill {\n    display: inline-block; background: #f5f5f7; color: #000000;\n    padding: 8px 22px; border-radius: 8px; border: none;\n    font-family: var(--font-text); font-size: 17px; font-weight: 400;\n    text-decoration: none; cursor: pointer;\n  }\n  .btn-filter {\n    display: inline-block; background: var(--filter-bg); color: var(--gray-80);\n    padding: 6px 14px; border-radius: 11px; border: 3px solid rgba(255,255,255,0.06);\n    font-family: var(--font-text); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer;\n  }\n  .btn-media {\n    display: inline-flex; align-items: center; justify-content: center;\n    width: 36px; height: 36px; border-radius: 50%;\n    background: var(--overlay); color: var(--gray-48); border: none;\n    font-size: 14px; cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }\n  .card { background: var(--dark-surface-1); border-radius: 8px; padding: 32px 24px; transition: box-shadow 0.3s; }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 0.196px; line-height: 1.14; margin-bottom: 8px; color: #f5f5f7; }\n  .card p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.43; letter-spacing: -0.224px; }\n  .card-link { font-size: 14px; color: var(--link-blue); text-decoration: none; margin-top: 12px; display: inline-block; }\n  .card-link:hover { text-decoration: underline; }\n\n  .card-light { background: #1c1c1e; }\n  .card-elevated { background: var(--dark-surface-3); }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 6px; letter-spacing: -0.224px; }\n  .form-input {\n    width: 100%; background: #1c1c1e; color: var(--black);\n    border: 1px solid #333336; padding: 10px 14px; border-radius: 8px;\n    font-family: var(--font-text); font-size: 17px; outline: none;\n    letter-spacing: -0.374px; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(41,151,255,0.25); }\n  .form-input--focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(41,151,255,0.25); }\n  .form-input--error { border-color: #ff453a; box-shadow: 0 0 0 3px rgba(255,69,58,0.25); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: #1c1c1e; color: var(--black);\n    border: 1px solid #333336; padding: 10px 14px; border-radius: 8px;\n    font-family: var(--font-text); font-size: 17px; resize: vertical; outline: none;\n    letter-spacing: -0.374px;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-48); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--apple-blue); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; color: var(--gray-48); }\n  .radius-context { font-size: 10px; color: var(--gray-48); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: #1c1c1e; border-radius: 8px; padding: 24px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; margin-bottom: 4px; }\n  .elevation-desc { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--gray-48); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: #1d1d1f; font-size: 12px; color: var(--gray-48); letter-spacing: -0.12px; border-top: 1px solid #333336; }\n  .footer a { color: var(--link-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section-dark { padding: 48px 20px; }\n    .section-gray { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Shop Now\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Apple\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-blue\" href=\"#\">Learn more\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hero backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f5f5f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f5f5f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Alternate sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1d1d1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1d1d1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #333336\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text on dark, button text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0071e3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Apple Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0071e3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0066cc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0066cc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Inline text links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2997ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Bright Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2997ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links on dark bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.8)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black 80%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.8)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.48)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black 48%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.48)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fafafc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Filter BG\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fafafc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Search\u002Ffilter buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ededf2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ededf2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Dark Surfaces\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#272729\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#272729\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark section cards\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#28282a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#28282a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark elevated cards\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2a2a2d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2a2a2d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Highest dark elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#242426\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#242426\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deepest dark tone\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:56px; font-weight:600; line-height:1.07; letter-spacing:-0.28px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 56px \u002F 600 \u002F 1.07 \u002F -0.28px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.28px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 40px \u002F 600 \u002F 1.10 \u002F normal \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.14; letter-spacing:0.196px;\">Tile Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tile Heading -- 28px \u002F 400 \u002F 1.14 \u002F 0.196px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.19; letter-spacing:0.231px;\">Card Title Bold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Bold -- 21px \u002F 700 \u002F 1.19 \u002F 0.231px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.19; letter-spacing:0.231px;\">Card Title Regular\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Regular -- 21px \u002F 400 \u002F 1.19 \u002F 0.231px \u002F SF Pro Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:17px; font-weight:400; line-height:1.47; letter-spacing:-0.374px;\">Body -- The all-new design brings incredible capability. Powerful features let you do more than ever.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 17px \u002F 400 \u002F 1.47 \u002F -0.374px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:17px; font-weight:600; line-height:1.24; letter-spacing:-0.374px;\">Body Emphasis -- Featured highlights\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Emphasis -- 17px \u002F 600 \u002F 1.24 \u002F -0.374px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:-0.224px;\">Link \u002F Caption -- Learn more about the latest features\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link \u002F Caption -- 14px \u002F 400 \u002F 1.43 \u002F -0.224px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:12px; font-weight:400; line-height:1.33; letter-spacing:-0.12px;\">Micro -- Legal text, footnotes, and fine print\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro -- 12px \u002F 400 \u002F 1.33 \u002F -0.12px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-text); font-size:10px; font-weight:400; line-height:1.47; letter-spacing:-0.08px;\">Nano -- smallest size, regulatory labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nano -- 10px \u002F 400 \u002F 1.47 \u002F -0.08px \u002F SF Pro Text\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Buy\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark-fill\" href=\"#\">Shop iPhone\u003C\u002Fa>\u003Cdiv class=\"button-label\">Light Fill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-filter\" href=\"#\">Search\u003C\u002Fa>\u003Cdiv class=\"button-label\">Filter\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-media\">▶\u003C\u002Fbutton>\u003Cdiv class=\"button-label\">Media\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--link-blue); padding:4px 16px; border-radius:980px; border:1px solid var(--link-blue); font-size:14px; font-weight:400; letter-spacing:-0.224px;\">Learn more >\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Link Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-dark\">\n\u003Csection class=\"section-inner\" id=\"cards-dark\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards (Dark)\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Cards on Dark Background\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Ch3>iPhone\u003C\u002Fh3>\n      \u003Cp>Designed to be extraordinary. Featuring the most advanced chip, an incredible camera system, and all-day battery life.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Ch3>MacBook Neo\u003C\u002Fh3>\n      \u003Cp>Supercharged for pros. The most powerful MacBook ever with the M-series chip delivers unprecedented performance.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Ch3>iPad Air\u003C\u002Fh3>\n      \u003Cp>Powerful and colorful. With the latest chip, stunning Liquid Retina display, and Apple Pencil support.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section-gray\">\n\u003Cdiv class=\"section-inner\" id=\"cards-light\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards (Light)\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Cards on Gray Background\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-light\">\n      \u003Ch3>AirPods Max\u003C\u002Fh3>\n      \u003Cp>High-fidelity audio with active noise cancellation, spatial audio, and computational audio for immersive listening.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-light\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Ch3>Apple Watch\u003C\u002Fh3>\n      \u003Cp>The ultimate device for a healthy life. Advanced health sensors, fitness metrics, and seamless connectivity.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-light\">\n      \u003Ch3>Apple TV+\u003C\u002Fh3>\n      \u003Cp>Original shows and movies from the world's greatest storytellers. Stream on all your favorite devices.\u003C\u002Fp>\n      \u003Ca class=\"card-link\" href=\"#\">Learn more >\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Apple ID\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"name@example.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"password\" value=\"mypassword123\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid@\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Feedback\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about your experience...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:17px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">17\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:11px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">11px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Search\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Features\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:980px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">980px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Media\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border:1px solid #333336;\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, solid bg\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.8); backdrop-filter:blur(20px);\">\u003Cdiv class=\"elevation-label\">Nav Glass\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Translucent + blur\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.5) 3px 5px 30px 0px;\">\u003Cdiv class=\"elevation-label\">Card Shadow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">3px 5px 30px 0.5\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px #2997ff;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid Bright Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark-surface-3);\">\u003Cdiv class=\"elevation-label\">Dark Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#2a2a2d\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fapple.com\u002F\">apple.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Apple Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fapple\u002FDESIGN.md) extracted from the public [Apple](https:\u002F\u002Fapple.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fapple\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Apple Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fapple\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Apple Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fapple\u002Fpreview-screenshot.png)\n",{"slug":28,"name":29,"category":30,"designMd":31,"previewHtml":32,"previewDarkHtml":33,"readme":34},"bmw","Bmw","Car Brands","# Design System Inspiration of BMW\n\n## 1. Visual Theme & Atmosphere\n\nBMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.\n\nThe typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.\n\nWhat makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.\n\n**Key Characteristics:**\n- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority\n- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements\n- Zero border-radius detected — angular, sharp-cornered, industrial geometry\n- Dark hero photography + white content sections — showroom lighting rhythm\n- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility\n- Weight 900 for navigation emphasis — extreme contrast with 300 display\n- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering\n- Full-bleed automotive photography as primary visual content\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds\n- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent\n- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states\n\n### Neutral Scale\n- **Near Black** (`#262626`): Primary text on light surfaces, dark link text\n- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata\n- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements\n\n### Interactive States\n- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation\n- Text links use underline: none on hover — clean interaction\n\n### Shadows\n- Minimal shadow system — depth through photography and dark\u002Flight section contrast\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`\n- **Body \u002F UI**: `BMWTypeNextLatin`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |\n| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |\n| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |\n| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |\n| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |\n| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |\n\n### Principles\n- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.\n- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.\n- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.\n- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.\n\n## 4. Component Stylings\n\n### Buttons\n- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary\n- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)\n- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)\n- No border-radius — sharp rectangular buttons\n\n### Cards & Containers\n- No border-radius — all containers are sharp-cornered rectangles\n- White backgrounds on light sections\n- Dark backgrounds for hero\u002Ffeature sections\n- No visible borders on most elements\n\n### Navigation\n- BMWTypeNextLatin 18px weight 900 for primary nav links\n- White text on dark header\n- BMW logo 54x54px\n- Hover: remains white, text-decoration none\n- \"Home\" text link in header\n\n### Image Treatment\n- Full-bleed automotive photography\n- Dark cinematic lighting\n- Edge-to-edge hero images\n- Car photography as primary visual content\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px\n\n### Grid & Container\n- Full-width hero photography\n- Centered content sections\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.\n- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.\n\n### Border Radius Scale\n- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |\n| Flat (Level 1) | White surface, no shadow | Content sections |\n| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |\n\n**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use BMWTypeNextLatin Light (300) uppercase for all display headings\n- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable\n- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively\n- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional\n- Use full-bleed automotive photography for hero sections\n- Keep line-heights tight (1.15–1.30) throughout\n- Use `--site-context-*` CSS variables for theming\n\n### Don't\n- Don't round corners — zero radius is the BMW identity\n- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only\n- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes\n- Don't add decorative elements — the photography and typography carry everything\n- Don't use relaxed line-heights — BMW text is always compressed\n- Don't lighten the dark hero sections — the contrast with white IS the design\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C375px | Minimum supported |\n| Mobile | 375–480px | Single column |\n| Mobile Large | 480–640px | Slight adjustments |\n| Tablet Small | 640–768px | 2-column begins |\n| Tablet | 768–920px | Standard tablet |\n| Desktop Small | 920–1024px | Desktop layout begins |\n| Desktop | 1024–1280px | Standard desktop |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | 1440–1600px | Maximum layout |\n\n### Collapsing Strategy\n- Hero: 60px → scales down, maintains uppercase\n- Navigation: horizontal → hamburger\n- Photography: full-bleed maintained at all sizes\n- Content sections: stack vertically\n- Footer: multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#262626`)\n- Secondary text: Meta Gray (`#757575`)\n- Accent: BMW Blue (`#1c69d4`)\n- Focus: BMW Focus Blue (`#0653b6`)\n- Muted: Silver (`#bbbbbb`)\n\n### Example Component Prompts\n- \"Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere.\"\n- \"Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout.\"\n- \"Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface.\"\n- \"Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15.\"\n\n### Iteration Guide\n1. Zero border-radius — every corner is sharp, no exceptions\n2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)\n3. BMW Blue for interactive only — never as background or decoration\n4. Photography carries emotion — the UI is pure precision\n5. Tight line-heights everywhere — 1.15 to 1.30 is the range\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: BMW (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;700;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #ffffff; --black: #262626; --bmw-blue: #1c69d4; --focus-blue: #0653b6;\n    --meta: #757575; --silver: #bbbbbb; --dark: #1a1a1a;\n    --font: 'Inter', Helvetica, Arial, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }\n  .nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.8; }\n  .nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }\n\n  .hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }\n  .hero-inner { max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }\n  .hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }\n  .section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { overflow:hidden; border:1px solid #e0e0e0; }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }\n  .color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }\n  .card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }\n  .card p { font-size:16px; color:var(--meta); line-height:1.30; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }\n  .form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }\n  .form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }\n  .form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }\n  .form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }\n  .spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }\n  .radius-label { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }\n  .footer a { color:var(--bmw-blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Explore\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Cdiv class=\"hero-inner\">\n  \u003Ch1>Design System\u003Cbr>Inspired by BMW\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Explore Models\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Find Your BMW\u003C\u002Fa>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c69d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">BMW Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c69d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Highlight accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0653b6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0653b6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e0e0e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Theme White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#262626\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#757575\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Meta Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#757575\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#bbbbbb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#bbbbbb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;\">DISPLAY HERO\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 60px \u002F 300 \u002F 1.30 \u002F uppercase \u002F BMWTypeNextLatin Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.30;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 32px \u002F 400 \u002F 1.30 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:900; line-height:1.30;\">Nav Emphasis — SHEER DRIVING PLEASURE\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav — 18px \u002F 900 \u002F 1.30 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.15;\">Body — The ultimate driving machine. Precision engineering meets luxury design.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.15 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.20;\">Button Bold — EXPLORE NOW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 16px \u002F 700 \u002F 1.20 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">BMW Blue\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" style=\"color:var(--black); border-color:var(--black);\" href=\"#\">Outlined\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;\">Dark Surface\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:var(--meta); margin-top:16px;\">All buttons use 0px border-radius — sharp corners are non-negotiable.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>BMW iX\u003C\u002Fh3>\u003Cp>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>BMW M Series\u003C\u002Fh3>\u003Cp>Performance without compromise. Track-ready engineering for the road.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--dark); color:var(--white); border:none;\">\u003Ch3 style=\"color:var(--white);\">Dark Variant\u003C\u002Fh3>\u003Cp style=\"color:var(--silver);\">Cards on dark surfaces. No border, no radius — pure geometry.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Model\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"BMW 3 Series\">\u003Cdiv class=\"form-state-label\">Default (sharp corners)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Location\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Munich\">\u003Cdiv class=\"form-state-label\">Focus (BMW Focus Blue)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">VIN\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Your configuration...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:60px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">60\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:var(--meta); margin-top:12px;\">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — default\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark); color:var(--white); border:none;\">\u003Cdiv class=\"elevation-label\">Photography\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark hero sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">BMW Focus Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwww.bmw.com\u002F\">bmw.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: BMW (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;700;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #1a1a1a; --black: #e0e0e0; --bmw-blue: #1c69d4; --focus-blue: #0653b6;\n    --meta: #999999; --silver: #666666; --dark: #1a1a1a;\n    --font: 'Inter', Helvetica, Arial, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.15; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--dark); }\n  .nav-brand { font-size:14px; font-weight:400; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:16px; font-weight:900; color:var(--white); text-decoration:none; line-height:1.30; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.8; }\n  .nav-cta { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:10px 20px; font-size:16px; font-weight:700; text-decoration:none; border-radius:0; }\n\n  .hero { padding:80px 32px; background:var(--dark); text-align:left; color:var(--white); }\n  .hero-inner { max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase; margin-bottom:16px; }\n  .hero p { font-size:16px; font-weight:400; line-height:1.30; color:var(--silver); max-width:550px; margin-bottom:32px; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-blue { display:inline-block; background:var(--bmw-blue); color:var(--white); padding:12px 24px; font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none; border:none; cursor:pointer; border-radius:0; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--white); padding:12px 24px; border:1px solid var(--white); font-family:var(--font); font-size:16px; font-weight:400; text-decoration:none; cursor:pointer; border-radius:0; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:900; color:var(--meta); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }\n  .section-title { font-size:32px; font-weight:400; line-height:1.30; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid #e0e0e0; margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { overflow:hidden; border:1px solid #e0e0e0; }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--meta); font-family:monospace; }\n  .color-swatch-role { font-size:10px; color:var(--meta); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:700; color:var(--meta); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f0f0f0; }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:11px; color:var(--meta); margin-top:6px; font-family:monospace; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:700; color:var(--meta); margin-top:8px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid #e0e0e0; padding:24px; }\n  .card h3 { font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.30; }\n  .card p { font-size:16px; color:var(--meta); line-height:1.30; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; outline:none; border-radius:0; }\n  .form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }\n  .form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(6,83,182,0.2); }\n  .form-input--error { border-color:#c00; box-shadow:0 0 0 2px rgba(204,0,0,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; border-radius:0; }\n  .form-state-label { font-size:10px; color:var(--meta); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--bmw-blue); margin-bottom:6px; height:28px; }\n  .spacing-value { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--dark); margin-bottom:6px; }\n  .radius-label { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border:1px solid #e0e0e0; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:10px; color:var(--meta); font-family:monospace; }\n\n  .footer { padding:40px 32px; text-align:center; background:var(--dark); color:var(--silver); font-size:13px; }\n  .footer a { color:var(--bmw-blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:48px 20px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Explore\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#1c69d4;color:#ffffff;font-size:11px;font-weight:700;padding:4px 10px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Cdiv class=\"hero-inner\">\n  \u003Ch1>Design System\u003Cbr>Inspired by BMW\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized with sharp precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Explore Models\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Find Your BMW\u003C\u002Fa>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c69d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">BMW Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c69d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Highlight accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0653b6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0653b6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e0e0e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Theme White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#262626\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#757575\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Meta Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#757575\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#bbbbbb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#bbbbbb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:300; line-height:1.30; text-transform:uppercase;\">DISPLAY HERO\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 60px \u002F 300 \u002F 1.30 \u002F uppercase \u002F BMWTypeNextLatin Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.30;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 32px \u002F 400 \u002F 1.30 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:900; line-height:1.30;\">Nav Emphasis — SHEER DRIVING PLEASURE\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav — 18px \u002F 900 \u002F 1.30 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.15;\">Body — The ultimate driving machine. Precision engineering meets luxury design.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.15 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.20;\">Button Bold — EXPLORE NOW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 16px \u002F 700 \u002F 1.20 \u002F BMWTypeNextLatin\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">BMW Blue\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" style=\"color:var(--black); border-color:var(--black);\" href=\"#\">Outlined\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--dark); color:var(--white); padding:12px 24px; font-size:16px; font-weight:400;\">Dark Surface\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:var(--meta); margin-top:16px;\">All buttons use 0px border-radius — sharp corners are non-negotiable.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>BMW iX\u003C\u002Fh3>\u003Cp>The future of sustainable mobility. All-electric, all BMW. Sharp corners, minimal borders.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>BMW M Series\u003C\u002Fh3>\u003Cp>Performance without compromise. Track-ready engineering for the road.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--dark); color:var(--white); border:none;\">\u003Ch3 style=\"color:var(--white);\">Dark Variant\u003C\u002Fh3>\u003Cp style=\"color:var(--silver);\">Cards on dark surfaces. No border, no radius — pure geometry.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Model\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"BMW 3 Series\">\u003Cdiv class=\"form-state-label\">Default (sharp corners)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Location\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Munich\">\u003Cdiv class=\"form-state-label\">Focus (BMW Focus Blue)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">VIN\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Your configuration...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:60px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">60\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:var(--meta); margin-top:12px;\">BMW uses 0px border-radius exclusively. Every element is a sharp rectangle.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — default\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark); color:var(--white); border:none;\">\u003Cdiv class=\"elevation-label\">Photography\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark hero sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">BMW Focus Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwww.bmw.com\u002F\">bmw.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Bmw Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fbmw\u002FDESIGN.md) extracted from the public [BMW](https:\u002F\u002Fbmw.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fbmw\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Bmw design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Bmw Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fbmw\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Bmw Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fbmw\u002Fpreview-screenshot.png)\n",{"slug":36,"name":37,"category":15,"designMd":38,"previewHtml":39,"previewDarkHtml":40,"readme":41},"cal","Cal","# Design System Inspiration of Cal.com\n\n## 1. Visual Theme & Atmosphere\n\nCal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.\n\nCal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing \"rock-solid\" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.\n\nThe elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (`0px 0px 0px 1px`), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.\n\n**Key Characteristics:**\n- Purely grayscale brand palette — no brand colors, boldness through monochrome\n- Cal Sans custom geometric display font with extremely tight default letter-spacing\n- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights\n- Cal Sans for headings, Inter for body — clean typographic division\n- Wide border-radius scale from 2px to 9999px (pill) — versatile rounding\n- White canvas with near-black (#242424) text — maximum contrast, zero decoration\n- Product screenshots as primary visual content — the scheduling UI sells itself\n- Built on Framer platform\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Charcoal** (`#242424`): Primary heading and button text — Cal.com's signature near-black, warmer than pure black\n- **Midnight** (`#111111`): Deepest text\u002Foverlay color — used at 50% opacity for subtle overlays\n- **White** (`#ffffff`): Primary background and surface — the dominant canvas\n\n### Secondary & Accent\n- **Link Blue** (`#0099ff`): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks\n- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction\n- **Default Link** (`#0000ee`): Browser-default link color on some elements — unmodified, signaling openness\n\n### Surface & Background\n- **Pure White** (`#ffffff`): Primary page background and card surfaces\n- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation — barely visible tint\n- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels\n\n### Neutrals & Text\n- **Charcoal** (`#242424`): Headlines, buttons, primary UI text\n- **Midnight** (`#111111`): Deep black for high-contrast links and nav text\n- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content\n- **Pure Black** (`#000000`): Certain link text elements\n- **Border Gray** (approx `rgba(34, 42, 53, 0.08–0.10)`): Shadow-based borders using ring shadows instead of CSS borders\n\n### Semantic & Accent\n- Cal.com is deliberately colorless for brand elements — \"a grayscale brand to emphasise on boldness and professionalism\"\n- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome\n- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral\n\n### Gradient System\n- No gradients on the marketing site — the design is fully flat and monochrome\n- Depth is achieved entirely through shadows, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `Cal Sans` — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)\n- **Body**: `Inter` — \"rock-solid\" standard body font. Fallback: `Inter Placeholder`\n- **UI Light**: `Cal Sans UI Variable Light` — light-weight variant (300) for softer UI text with -0.2px letter-spacing\n- **UI Medium**: `Cal Sans UI Medium` — medium-weight variant (500) for emphasized captions\n- **Mono**: `Roboto Mono` — for code blocks and technical content\n- **Tertiary**: `Matter Regular` \u002F `Matter SemiBold` \u002F `Matter Medium` — additional body fonts for specific contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |\n| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |\n| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |\n| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |\n| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |\n| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |\n| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |\n| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |\n| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |\n| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |\n| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |\n| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |\n| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |\n| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |\n| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |\n\n### Principles\n- **Cal Sans at large, Inter at small**: Cal Sans is exclusively for headings and display — never for body text. The system enforces this division strictly\n- **Tight by default, space when small**: Cal Sans letters are \"intentionally spaced to be extremely close\" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming\n- **Weight 300 body variant**: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines\n- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight\n- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white\n- **White\u002FGhost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation\n- **Pill**: 9999px radius for rounded pill-shaped actions and badges\n- **Compact**: 4px padding, small text — utility actions within product UI\n- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` — a subtle inner-top highlight creating a 3D pressed effect\n\n### Cards & Containers\n- **Shadow Card**: White background, multi-layered shadow — `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border\n- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation\n- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections\n- **Hover**: Likely subtle shadow deepening or scale transform\n\n### Inputs & Forms\n- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border\n- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)\n- **Text input**: 8px radius, standard border treatment\n- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms\n\n### Navigation\n- **Top nav**: White\u002Ftransparent background, Cal Sans links at near-black\n- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis\n- **CTA button**: Dark Primary in the nav — high contrast call-to-action\n- **Mobile**: Collapses to hamburger with simplified navigation\n- **Sticky**: Fixed on scroll\n\n### Image Treatment\n- **Product screenshots**: Large scheduling UI screenshots — the product is the primary visual\n- **Trust logos**: Grayscale company logos in a horizontal trust bar\n- **Aspect ratios**: Wide landscape for product UI screenshots\n- **No decorative imagery**: No illustrations, photos, or abstract graphics — pure product + typography\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px\n- **Section padding**: 80px–96px vertical between major sections (generous)\n- **Card padding**: 12px–24px internal\n- **Component gaps**: 4px–8px between related elements\n- **Notable jump**: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier\n\n### Grid & Container\n- **Max width**: ~1200px content container, centered\n- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids\n- **Feature showcase**: Product screenshots flanked by description text\n- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated\n\n### Whitespace Philosophy\n- **Lavish section spacing**: 80px–96px between sections creates a breathable, premium feel\n- **Product-first content**: Screenshots dominate the visual space — minimal surrounding decoration\n- **Centered headlines**: Cal Sans headings centered with generous margins above and below\n\n### Border Radius Scale\n- **2px**: Subtle rounding on inline elements\n- **4px**: Small UI components\n- **6px–7px**: Buttons, small cards, images\n- **8px**: Standard interactive elements — buttons, inputs, images\n- **12px**: Medium containers — links, larger cards, images\n- **16px**: Large section containers\n- **29px**: Special rounded elements\n- **100px**: Large rounding — nearly circular on small elements\n- **1000px**: Very large rounding\n- **9999px**: Full pill shape — badges, links\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow | Page canvas, basic text containers |\n| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed\u002Frecessed elements, input wells |\n| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | Cards, containers — the workhorse shadow |\n| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | Alt card elevation without ring border |\n| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` or `rgb(255,255,255) 0px 2px 0px inset` | Button inner highlight — 3D pressed effect |\n| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |\n\n### Shadow Philosophy\nCal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:\n- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout\n- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth\n- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding\n- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel\n- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together\n\n### Decorative Depth\n- No gradients or glow effects\n- All depth comes from the sophisticated shadow compositing system\n- The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing\n- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it\n- Maintain the grayscale palette — boldness comes from contrast, not color\n- Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow\n- Keep backgrounds pure white — the monochrome philosophy requires a clean canvas\n- Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality\n- Let product screenshots be the visual content — no illustrations, no decorative graphics\n- Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel\n\n### Don't\n- Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading\n- Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only\n- Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach\n- Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px\n- Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges\n- Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only\n- Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character\n- Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, hero text ~36px, stacked features, hamburger nav |\n| Tablet Small | 640px–768px | 2-column begins for some elements |\n| Tablet | 768px–810px | Layout adjustments, fuller grid |\n| Tablet Large | 810px–1024px | Multi-column feature grids |\n| Desktop | 1024px–1199px | Full layout, expanded navigation |\n| Large Desktop | >1199px | Max-width container, centered content |\n\n### Touch Targets\n- Buttons: 8px radius with comfortable padding (10px+ vertical)\n- Nav links: Dark text with adequate spacing\n- Mobile CTAs: Full-width dark buttons for easy thumb access\n- Pill badges: 9999px radius creates large, tappable targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger on mobile\n- **Hero**: 64px Cal Sans display → ~36px on mobile\n- **Feature grids**: Multi-column → 2-column → single stacked column\n- **Product screenshots**: Scale within containers, maintaining aspect ratios\n- **Section spacing**: Reduces from 80px–96px to ~48px on mobile\n\n### Image Behavior\n- Product screenshots scale responsively\n- Trust logos reflow to multi-row grid on mobile\n- No art direction changes — same compositions at all sizes\n- Images use 7px–12px border-radius for consistent rounded corners\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Charcoal (`#242424`)\n- Deep Text: Midnight (`#111111`)\n- Secondary Text: Mid Gray (`#898989`)\n- Background: Pure White (`#ffffff`)\n- Link: Link Blue (`#0099ff`)\n- CTA Button: Charcoal (`#242424`) bg, white text\n- Shadow Border: `rgba(34, 42, 53, 0.08)` ring\n\n### Example Component Prompts\n- \"Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)\"\n- \"Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius\"\n- \"Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning\"\n- \"Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background\"\n- \"Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them\n2. Check that the palette is purely grayscale — if you see brand colors, remove them\n3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders\n4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space\n5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Cal.com\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --charcoal: #242424;\n    --midnight: #111111;\n    --mid-gray: #898989;\n    --white: #ffffff;\n    --link-blue: #0099ff;\n    --focus-blue: #3b82f6;\n    --shadow-ring: rgba(34, 42, 53, 0.08);\n    --shadow-soft: rgba(34, 42, 53, 0.05);\n    --shadow-contact: rgba(19, 19, 22, 0.7);\n    --font-display: 'Cal Sans', system-ui, sans-serif;\n    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;\n    --font-mono: 'Roboto Mono', ui-monospace, monospace;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-body);\n    background: var(--white);\n    color: var(--charcoal);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: rgba(255,255,255,0.95);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;\n  }\n  .nav-brand {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--midnight);\n    text-decoration: none;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 28px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--charcoal);\n    text-decoration: none;\n    transition: color 0.15s;\n  }\n  .nav-links a:hover { color: var(--midnight); }\n  .nav-cta {\n    background: var(--charcoal);\n    color: var(--white);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.7; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 96px 40px 80px;\n    text-align: center;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 600;\n    line-height: 1.10;\n    letter-spacing: 0px;\n    color: var(--charcoal);\n    max-width: 700px;\n    margin: 0 auto 20px;\n  }\n  .hero .subtitle {\n    font-size: 16px;\n    font-weight: 300;\n    line-height: 1.50;\n    color: var(--mid-gray);\n    max-width: 480px;\n    margin: 0 auto 36px;\n    letter-spacing: -0.2px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .btn-dark {\n    background: var(--charcoal);\n    color: var(--white);\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n    box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset;\n  }\n  .btn-dark:hover { opacity: 0.7; }\n  .btn-white {\n    background: var(--white);\n    color: var(--charcoal);\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n    transition: box-shadow 0.15s;\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;\n  }\n  .btn-white:hover { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 6px 12px 0px; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 600;\n    line-height: 1.10;\n    color: var(--charcoal);\n    margin-bottom: 8px;\n  }\n  .section-subtitle {\n    font-size: 16px;\n    font-weight: 300;\n    line-height: 1.50;\n    color: var(--mid-gray);\n    margin-bottom: 48px;\n    letter-spacing: -0.2px;\n  }\n\n  \u002F* COLORS *\u002F\n  .color-category { margin-bottom: 36px; }\n  .color-category h3 {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--charcoal);\n    margin-bottom: 16px;\n    letter-spacing: 0.2px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;\n  }\n  .swatch-color { height: 80px; width: 100%; }\n  .swatch-info { padding: 10px 12px; background: var(--white); }\n  .swatch-name { font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }\n  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-bottom: 4px; }\n  .swatch-role { font-size: 11px; color: var(--mid-gray); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 20px 0;\n    border-bottom: 1px solid rgba(34,42,53,0.08);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text { color: var(--charcoal); margin-bottom: 6px; }\n  .type-sample .type-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mid-gray);\n    font-family: var(--font-mono);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }\n  .btn-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); }\n  .btn-pill {\n    background: var(--charcoal);\n    color: var(--white);\n    padding: 10px 24px;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }\n  .card { border-radius: 12px; padding: 28px; background: var(--white); }\n  .card-shadow {\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;\n  }\n  .card-shadow-alt {\n    box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px;\n  }\n  .card-inset {\n    box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset;\n    background: #fafafa;\n  }\n  .card-hover { transition: transform 0.15s, box-shadow 0.15s; }\n  .card-hover:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-contact) 0px 2px 8px -4px, var(--shadow-ring) 0px 0px 0px 1px, rgba(34,42,53,0.08) 0px 8px 16px 0px;\n  }\n  .card h4 {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--charcoal);\n    margin-bottom: 8px;\n    letter-spacing: 0.2px;\n  }\n  .card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--mid-gray); letter-spacing: -0.2px; }\n  .card .card-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-top: 14px; }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group label { font-size: 14px; font-weight: 600; color: var(--charcoal); }\n  .form-group input, .form-group textarea {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 400;\n    padding: 10px 14px;\n    border-radius: 8px;\n    border: none;\n    background: var(--white);\n    color: var(--charcoal);\n    outline: none;\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;\n    transition: box-shadow 0.15s;\n  }\n  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--mid-gray); }\n  .form-group input:focus, .form-group textarea:focus {\n    box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-soft) 0px 4px 8px 0px;\n  }\n  .form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }\n  .form-group textarea { resize: vertical; min-height: 80px; }\n  .form-hint { font-size: 11px; color: var(--mid-gray); font-family: var(--font-mono); }\n  .form-error-text { font-size: 11px; color: #dc2626; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }\n  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n  .spacing-box { background: var(--charcoal); border-radius: 4px; height: 40px; }\n  .spacing-label { font-size: 10px; font-weight: 600; color: var(--mid-gray); font-family: var(--font-mono); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: #f5f5f5;\n    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px;\n  }\n  .radius-label { font-size: 12px; font-weight: 600; color: var(--charcoal); font-family: var(--font-mono); }\n  .radius-context { font-size: 10px; color: var(--mid-gray); text-align: center; max-width: 80px; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-section { background: #f5f5f5; border-radius: 16px; padding: 48px; }\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 12px; padding: 24px; min-height: 120px; }\n  .elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }\n  .elevation-card p { font-size: 12px; color: var(--mid-gray); line-height: 1.5; }\n  .elev-flat { box-shadow: none; }\n  .elev-inset { box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset; }\n  .elev-ring-soft { box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px; }\n  .elev-soft { box-shadow: var(--shadow-soft) 0px 4px 8px 0px; }\n  .elev-highlight { box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset; background: var(--charcoal); color: var(--white); }\n  .elev-highlight h4 { color: var(--white); }\n  .elev-highlight p { color: rgba(255,255,255,0.6); }\n\n  footer {\n    text-align: center;\n    padding: 48px 40px;\n    font-size: 13px;\n    color: var(--mid-gray);\n    border-top: 1px solid rgba(34,42,53,0.08);\n  }\n\n  @media (max-width: 768px) {\n    nav { padding: 12px 16px; }\n    .nav-links { display: none; }\n    .hero { padding: 64px 16px 48px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 48px 16px; }\n    .section-title { font-size: 32px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 20px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Cal.com\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-dark\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-white\">View DESIGN.md\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">A grayscale brand — boldness through monochrome, not color.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#242424;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#242424\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Headings, buttons, primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#111111;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Midnight\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#111111\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Deep text, overlays\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#ffffff; border-bottom:1px solid #eee;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Background, surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Neutrals\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#898989;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#898989\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text, descriptions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#000000;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">High-contrast link text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:rgba(34,42,53,0.08);border-bottom:1px solid #eee;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Shadow Ring\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">rgba(34,42,53,0.08)\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Ring-shadow borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Accent (Minimal)\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#0099ff;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#0099ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">In-text links only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#3b82f6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b82f6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Focus ring (accessibility)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Cal Sans for display, Inter for body — a clean typographic division.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Display Hero — Cal Sans 64px \u002F 600 \u002F 1.10\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Heading — Cal Sans 48px \u002F 600 \u002F 1.10\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;\">Feature Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Feature Heading — Cal Sans 24px \u002F 600 \u002F 1.30\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading — Cal Sans 20px \u002F 600 \u002F 1.20 \u002F +0.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.10;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Card Title — Cal Sans 16px \u002F 600 \u002F 1.10\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;\">Body Light — Elegant light-weight intro text for descriptions and subtitles\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Light — Inter 18px \u002F 300 \u002F 1.30 \u002F -0.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;\">Body Standard — Standard reading text for longer content passages with comfortable line-height.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Standard — Inter 16px \u002F 300 \u002F 1.50 \u002F -0.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;\">UI Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">UI Label — Inter 16px \u002F 600 \u002F 1.00\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;\">Caption Inter\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption — Inter 14px \u002F 500 \u002F 1.14\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1.00;\">Micro text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro — Inter 12px \u002F 500 \u002F 1.00\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;\">Code — Roboto Mono\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Code — Roboto Mono 14px \u002F 600 \u002F 1.00\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark CTAs with inset highlights, shadow-bordered white buttons, and pill shapes.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dark\">Dark Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#242424 \u002F white \u002F 8px \u002F inset highlight\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-white\">White Shadow\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#fff \u002F ring shadow \u002F 8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-pill\">Pill Button\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#242424 \u002F 9999px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Multi-layered shadow elevation with ring borders instead of CSS borders.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-shadow card-hover\">\n      \u003Ch4>Shadow Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Ring shadow + contact shadow + diffused shadow. The workhorse card pattern. Hover to see lift.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">ring + contact + soft \u002F 12px radius\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-shadow-alt\">\n      \u003Ch4>Alt Shadow Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Contact shadow + soft shadow without the ring border. Lighter elevation.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">contact + soft only \u002F 12px radius\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-inset\">\n      \u003Ch4>Inset Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Inset shadow creates a recessed, pressed-in appearance for input wells and secondary containers.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">inset 0px 1px 1.9px rgba(0,0,0,0.16)\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Shadow-bordered inputs with blue focus rings.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Default Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Enter your name\">\n      \u003Cspan class=\"form-hint\">shadow-ring border \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Focus State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Focused\" style=\"box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.05) 0px 4px 8px 0px;\">\n      \u003Cspan class=\"form-hint\">focus: blue ring + shadows\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"error\" value=\"bad input\">\n      \u003Cspan class=\"form-error-text\">Invalid input\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Textarea\u003C\u002Flabel>\n      \u003Ctextarea placeholder=\"Type a message...\">\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-hint\">Same shadow styling\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base with a jump from 28px to 80px for section-level tiers.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">1\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">2\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:3px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">3\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">20\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:28px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">28\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:80px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">80\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:96px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">96\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Wide scale from sharp 2px to full pill 9999px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Inline\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Small UI\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Buttons, inputs\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">12px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Cards, links\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">16px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Sections\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:80px; height:40px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Pill\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Multi-layered shadow compositing: ring borders + diffused shadows + inset highlights.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\u003Ch4>Level 0 — Flat\u003C\u002Fh4>\u003Cp>No shadow. Page canvas and basic containers.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-inset\">\u003Ch4>Level 1 — Inset\u003C\u002Fh4>\u003Cp>Inset shadow. Pressed\u002Frecessed elements, input wells.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-ring-soft\">\u003Ch4>Level 2 — Ring + Soft\u003C\u002Fh4>\u003Cp>Ring border + contact shadow + diffused shadow. The workhorse elevation.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-soft\">\u003Ch4>Level 3 — Soft Only\u003C\u002Fh4>\u003Cp>Subtle ambient shadow without ring border. Gentle floating.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-highlight\">\u003Ch4>Level 4 — Inset Highlight\u003C\u002Fh4>\u003Cp>White inset on dark bg. Button 3D bevel effect.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>Generated from DESIGN.md — Cal.com Design System Catalog\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Cal.com — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --charcoal: #242424;\n    --midnight: #111111;\n    --mid-gray: #898989;\n    --white: #ffffff;\n    --link-blue: #0099ff;\n    --focus-blue: #3b82f6;\n    --font-display: 'Cal Sans', system-ui, sans-serif;\n    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;\n    --font-mono: 'Roboto Mono', ui-monospace, monospace;\n\n    --dk-bg: #0a0a0a;\n    --dk-surface: #141414;\n    --dk-surface-elevated: #1c1c1c;\n    --dk-border: #2a2a2a;\n    --dk-border-light: #333333;\n    --dk-text: #e8e8e8;\n    --dk-text-secondary: #898989;\n    --dk-text-muted: #555555;\n    --dk-shadow-ring: rgba(255,255,255,0.06);\n    --dk-shadow-soft: rgba(0,0,0,0.3);\n    --dk-shadow-contact: rgba(0,0,0,0.8);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-body);\n    background: var(--dk-bg);\n    color: var(--dk-text);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .dark-badge {\n    position: fixed;\n    top: 14px;\n    right: 14px;\n    z-index: 200;\n    background: var(--white);\n    color: var(--charcoal);\n    padding: 5px 12px;\n    border-radius: 8px;\n    font-size: 11px;\n    font-weight: 600;\n  }\n\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: rgba(10,10,10,0.92);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px;\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--dk-text); text-decoration: none; }\n  .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--dk-text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--dk-text); }\n  .nav-cta {\n    background: var(--white);\n    color: var(--charcoal);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  .hero { padding: 96px 40px 80px; text-align: center; }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 600;\n    line-height: 1.10;\n    color: var(--dk-text);\n    max-width: 700px;\n    margin: 0 auto 20px;\n  }\n  .hero .subtitle {\n    font-size: 16px;\n    font-weight: 300;\n    line-height: 1.50;\n    color: var(--dk-text-secondary);\n    max-width: 480px;\n    margin: 0 auto 36px;\n    letter-spacing: -0.2px;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-light {\n    background: var(--white);\n    color: var(--charcoal);\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .btn-light:hover { opacity: 0.85; }\n  .btn-outline {\n    background: transparent;\n    color: var(--dk-text);\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;\n    transition: box-shadow 0.15s;\n  }\n  .btn-outline:hover { box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 1px; }\n\n  .section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 600;\n    line-height: 1.10;\n    color: var(--dk-text);\n    margin-bottom: 8px;\n  }\n  .section-subtitle {\n    font-size: 16px;\n    font-weight: 300;\n    line-height: 1.50;\n    color: var(--dk-text-secondary);\n    margin-bottom: 48px;\n    letter-spacing: -0.2px;\n  }\n\n  .color-category { margin-bottom: 36px; }\n  .color-category h3 {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--dk-text);\n    margin-bottom: 16px;\n    letter-spacing: 0.2px;\n  }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }\n  .swatch-color { height: 80px; width: 100%; }\n  .swatch-info { padding: 10px 12px; background: var(--dk-surface); }\n  .swatch-name { font-size: 13px; font-weight: 600; color: var(--dk-text); margin-bottom: 2px; }\n  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }\n  .swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }\n\n  .type-sample { padding: 20px 0; border-bottom: 1px solid var(--dk-border); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text { color: var(--dk-text); margin-bottom: 6px; }\n  .type-sample .type-label { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }\n\n  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }\n  .btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }\n  .btn-dk-surface {\n    background: var(--dk-surface-elevated);\n    color: var(--dk-text);\n    padding: 12px 24px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;\n  }\n  .btn-pill-light {\n    background: var(--white);\n    color: var(--charcoal);\n    padding: 10px 24px;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-weight: 600;\n    font-family: var(--font-body);\n    border: none;\n    cursor: pointer;\n  }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }\n  .card { border-radius: 12px; padding: 28px; }\n  .card-dk { background: var(--dk-surface); box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }\n  .card-dk-elevated { background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }\n  .card-dk-inset { background: var(--dk-bg); box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }\n  .card-hover { transition: transform 0.15s; }\n  .card-hover:hover { transform: translateY(-2px); }\n  .card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dk-text); margin-bottom: 8px; letter-spacing: 0.2px; }\n  .card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--dk-text-secondary); letter-spacing: -0.2px; }\n  .card .card-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-top: 14px; }\n\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text); }\n  .form-group input, .form-group textarea {\n    font-family: var(--font-body);\n    font-size: 14px;\n    padding: 10px 14px;\n    border-radius: 8px;\n    border: none;\n    background: var(--dk-surface);\n    color: var(--dk-text);\n    outline: none;\n    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;\n    transition: box-shadow 0.15s;\n  }\n  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }\n  .form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.4), var(--dk-shadow-ring) 0px 0px 0px 1px; }\n  .form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }\n  .form-group textarea { resize: vertical; min-height: 80px; }\n  .form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--font-mono); }\n  .form-error-text { font-size: 11px; color: #ef4444; }\n\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }\n  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n  .spacing-box { background: var(--dk-text); border-radius: 4px; height: 40px; opacity: 0.5; }\n  .spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--font-mono); }\n\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }\n  .radius-label { font-size: 12px; font-weight: 600; color: var(--dk-text); font-family: var(--font-mono); }\n  .radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; max-width: 80px; }\n\n  .elevation-section { background: var(--dk-surface); border-radius: 16px; padding: 48px; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--dk-surface-elevated); border-radius: 12px; padding: 24px; min-height: 120px; }\n  .elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--dk-text); margin-bottom: 6px; }\n  .elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }\n  .elev-flat { box-shadow: none; }\n  .elev-inset { box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }\n  .elev-ring-soft { box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px, var(--dk-shadow-soft) 0px 4px 8px 0px; }\n  .elev-soft { box-shadow: var(--dk-shadow-soft) 0px 4px 8px 0px; }\n  .elev-highlight { box-shadow: rgba(255,255,255,0.08) 0px 2px 0px 0px inset; background: var(--white); color: var(--charcoal); }\n  .elev-highlight h4 { color: var(--charcoal); }\n  .elev-highlight p { color: var(--mid-gray); }\n\n  footer {\n    text-align: center;\n    padding: 48px 40px;\n    font-size: 13px;\n    color: var(--dk-text-muted);\n    border-top: 1px solid var(--dk-border);\n  }\n\n  @media (max-width: 768px) {\n    nav { padding: 12px 16px; }\n    .nav-links { display: none; }\n    .hero { padding: 64px 16px 48px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 48px 16px; }\n    .section-title { font-size: 32px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 20px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n    .dark-badge { top: 10px; right: 10px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Cal.com\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-light\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-outline\">View DESIGN.md\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">A grayscale brand on dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#242424;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#242424\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Headings, buttons, primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#111111;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Midnight\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#111111\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Deep text, overlays\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#ffffff;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Background, surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Neutrals\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#898989;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#898989\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#000000;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">High-contrast text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:rgba(255,255,255,0.06);\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Shadow Ring (Dark)\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.06)\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark mode ring shadows\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Accent (Minimal)\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#0099ff;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#0099ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">In-text links only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#3b82f6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b82f6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Cal Sans for display, Inter for body.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Cal Sans 64px \u002F 600 \u002F 1.10\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Cal Sans 48px \u002F 600 \u002F 1.10\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;\">Feature Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Cal Sans 24px \u002F 600 \u002F 1.30\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.20; letter-spacing:0.2px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Cal Sans 20px \u002F 600 \u002F 1.20 \u002F +0.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.30; letter-spacing:-0.2px;\">Body Light — Elegant intro text for descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Inter 18px \u002F 300 \u002F 1.30 \u002F -0.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:16px; font-weight:300; line-height:1.50; letter-spacing:-0.2px;\">Body Standard — Reading text with comfortable line-height for long passages.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Inter 16px \u002F 300 \u002F 1.50 \u002F -0.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;\">UI Label\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Inter 16px \u002F 600 \u002F 1.00\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;\">Caption\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Inter 14px \u002F 500 \u002F 1.14\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-text\" style=\"font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;\">Code — Roboto Mono\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Roboto Mono 14px \u002F 600 \u002F 1.00\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Inverted for dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-light\">Light Primary\u003C\u002Fbutton>\u003Cspan class=\"btn-label\">#fff \u002F #242424 \u002F 8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-dk-surface\">Surface\u003C\u002Fbutton>\u003Cspan class=\"btn-label\">#1c1c1c \u002F ring shadow \u002F 8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-outline\">Outline\u003C\u002Fbutton>\u003Cspan class=\"btn-label\">transparent \u002F ring \u002F 8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-pill-light\">Pill\u003C\u002Fbutton>\u003Cspan class=\"btn-label\">#fff \u002F 9999px\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark surface cards with shadow elevation.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-dk card-hover\">\u003Ch4>Shadow Card\u003C\u002Fh4>\u003Cp class=\"card-desc\">Dark surface with ring + contact + diffused shadow compositing. Hover to lift.\u003C\u002Fp>\u003Cp class=\"card-label\">ring + contact + soft shadows\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dk-elevated\">\u003Ch4>Elevated Card\u003C\u002Fh4>\u003Cp class=\"card-desc\">Lighter dark surface with ring shadow border for secondary content.\u003C\u002Fp>\u003Cp class=\"card-label\">ring shadow only\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dk-inset\">\u003Ch4>Inset Card\u003C\u002Fh4>\u003Cp class=\"card-desc\">Deepest background with inset shadow for recessed content wells.\u003C\u002Fp>\u003Cp class=\"card-label\">inset shadow\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark surface inputs with ring shadows and blue focus.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\u003Clabel>Default Input\u003C\u002Flabel>\u003Cinput type=\"text\" placeholder=\"Enter your name\">\u003Cspan class=\"form-hint\">ring shadow border \u002F 8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel>Focus State\u003C\u002Flabel>\u003Cinput type=\"text\" placeholder=\"Focused\" style=\"box-shadow: 0 0 0 2px rgba(59,130,246,0.4), rgba(255,255,255,0.06) 0px 0px 0px 1px;\">\u003Cspan class=\"form-hint\">blue focus ring\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel>Error State\u003C\u002Flabel>\u003Cinput type=\"text\" class=\"error\" value=\"bad\">\u003Cspan class=\"form-error-text\">Invalid input\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel>Textarea\u003C\u002Flabel>\u003Ctextarea placeholder=\"Message...\">\u003C\u002Ftextarea>\u003Cspan class=\"form-hint\">Same styling\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base with section-level jump to 80px–96px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">1\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">2\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">20\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:28px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">28\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:80px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">80\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:96px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">96\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">2px to pill 9999px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Inline\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Small\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Buttons\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">12px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">16px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Sections\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:80px; height:40px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Pill\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Shadow compositing on dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\u003Ch4>Level 0 — Flat\u003C\u002Fh4>\u003Cp>No shadow. Default canvas.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-inset\">\u003Ch4>Level 1 — Inset\u003C\u002Fh4>\u003Cp>Recessed\u002Fpressed appearance.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-ring-soft\">\u003Ch4>Level 2 — Ring + Soft\u003C\u002Fh4>\u003Cp>Ring + contact + diffused. Workhorse.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-soft\">\u003Ch4>Level 3 — Soft\u003C\u002Fh4>\u003Cp>Ambient shadow only.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-highlight\">\u003Ch4>Level 4 — Highlight\u003C\u002Fh4>\u003Cp>White surface with inset bevel.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>Generated from DESIGN.md — Cal.com Design System Catalog (Dark Mode)\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Cal Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcal\u002FDESIGN.md) extracted from the public [Cal](https:\u002F\u002Fcal.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcal\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cal design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cal Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcal\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Cal Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcal\u002Fpreview-screenshot.png)\n",{"slug":43,"name":44,"category":45,"designMd":46,"previewHtml":47,"previewDarkHtml":48,"readme":49},"claude","Claude","AI & Machine Learning","# Design System Inspiration of Claude (Anthropic)\n\n## 1. Visual Theme & Atmosphere\n\nClaude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.\n\nThe signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says \"thoughtful companion\" rather than \"powerful tool.\" The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.\n\nWhat makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.\n\n**Key Characteristics:**\n- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens\n- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code\n- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech\n- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone\n- Organic, editorial illustrations replacing typical tech iconography\n- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders\n- Magazine-like pacing with generous section spacing and serif-driven hierarchy\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest \"black\" in any major tech brand.\n- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.\n- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.\n\n### Secondary & Accent\n- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.\n- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.\n\n### Surface & Background\n- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.\n- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.\n- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.\n- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.\n- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.\n- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.\n\n### Neutrals & Text\n- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.\n- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.\n- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.\n- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.\n- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.\n\n### Semantic & Accent\n- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.\n- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.\n- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the warm tone.\n- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover\u002Ffocus states.\n- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.\n- **Ring Deep** (`#c2c0b6`): Deeper ring for active\u002Fpressed states.\n\n### Gradient System\n- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light\u002Fdark section alternation. The warm palette itself creates a \"gradient\" effect as the eye moves through cream → sand → stone → charcoal → black sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Headline**: `Anthropic Serif`, with fallback: `Georgia`\n- **Body \u002F UI**: `Anthropic Sans`, with fallback: `Arial`\n- **Code**: `Anthropic Mono`, with fallback: `Arial`\n\n*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui\u002FInter as the sans substitute.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |\n| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |\n| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |\n| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |\n| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |\n| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |\n| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |\n| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |\n| Body \u002F Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |\n| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |\n| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |\n| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |\n| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |\n| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |\n| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |\n\n### Principles\n- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.\n- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent \"voice\" across all headline sizes, as if the same author wrote every heading.\n- **Relaxed body line-height**: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.\n- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.\n- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Warm Sand (Secondary)**\n- Background: Warm Sand (`#e8e6dc`)\n- Text: Charcoal Warm (`#4d4c48`)\n- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)\n- The workhorse button — warm, unassuming, clearly interactive\n\n**White Surface**\n- Background: Pure White (`#ffffff`)\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 8px 16px 8px 12px\n- Radius: generously rounded (12px)\n- Hover: shifts to secondary background color\n- Clean, elevated button for light surfaces\n\n**Dark Charcoal**\n- Background: Dark Surface (`#30302e`)\n- Text: Ivory (`#faf9f5`)\n- Padding: 0px 12px 0px 8px\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)\n- The inverted variant for dark-on-light emphasis\n\n**Brand Terracotta**\n- Background: Terracotta Brand (`#c96442`)\n- Text: Ivory (`#faf9f5`)\n- Radius: 8–12px\n- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)\n- The primary CTA — the only button with chromatic color\n\n**Dark Primary**\n- Background: Anthropic Near Black (`#141413`)\n- Text: Warm Silver (`#b0aea5`)\n- Padding: 9.6px 16.8px\n- Radius: generously rounded (12px)\n- Border: thin solid Dark Surface (`1px solid #30302e`)\n- Used on dark theme surfaces\n\n### Cards & Containers\n- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark\n- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark\n- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media\n- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content\n- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states\n- Section borders: `1px 0px 0px` (top-only) for list item separators\n\n### Inputs & Forms\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 1.6px 12px (very compact vertical)\n- Border: standard warm borders\n- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment\n- Radius: generously rounded (12px)\n\n### Navigation\n- Sticky top nav with warm background\n- Logo: Claude wordmark in Anthropic Near Black\n- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)\n- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)\n- CTA: Terracotta Brand button or White Surface button\n- Hover: text shifts to foreground-primary, no decoration\n\n### Image Treatment\n- Product screenshots showing the Claude chat interface\n- Generous border-radius on media (16–32px)\n- Embedded video players with rounded corners\n- Dark UI screenshots provide contrast against warm light canvas\n- Organic, hand-drawn illustrations for conceptual sections\n\n### Distinctive Components\n\n**Model Comparison Cards**\n- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid\n- Each model gets a bordered card with name, description, and capability badges\n- Border Warm (`#e8e6dc`) separation between items\n\n**Organic Illustrations**\n- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green\n- Abstract, conceptual rather than literal product diagrams\n- The primary visual personality — no other AI company uses this style\n\n**Dark\u002FLight Section Alternation**\n- The page alternates between Parchment light and Near Black dark sections\n- Creates a reading rhythm like chapters in a book\n- Each section feels like a distinct environment\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px\n- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (estimated 80–120px between major sections)\n\n### Grid & Container\n- Max container width: approximately 1200px, centered\n- Hero: centered with editorial layout\n- Feature sections: single-column or 2–3 column card grids\n- Model comparison: clean 3-column grid\n- Full-width dark sections breaking the container for emphasis\n\n### Whitespace Philosophy\n- **Editorial pacing**: Each section breathes like a magazine spread — generous top\u002Fbottom margins create natural reading pauses.\n- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.\n- **Content island approach**: Sections alternate between light and dark environments, creating distinct \"rooms\" for each message.\n\n### Border Radius Scale\n- Sharp (4px): Minimal inline elements\n- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements\n- Comfortably rounded (8–8.5px): Standard buttons, cards, containers\n- Generously rounded (12px): Primary buttons, input fields, nav elements\n- Very rounded (16px): Featured containers, video players, tab lists\n- Highly rounded (24px): Tag-like elements, highlighted containers\n- Maximum rounded (32px): Hero containers, embedded media, large cards\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Parchment background, inline text |\n| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |\n| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |\n| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |\n| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active\u002Fpressed button states |\n\n**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.\n\n### Decorative Depth\n- **Light\u002FDark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections — entire sections shift elevation by changing the ambient light level.\n- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream tone IS the Claude personality\n- Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional\n- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments\n- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone\n- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows\n- Maintain the editorial serif\u002Fsans hierarchy — serif for content headlines, sans for UI\n- Use generous body line-height (1.60) for a literary reading experience\n- Alternate between light and dark sections to create chapter-like page rhythm\n- Apply generous border-radius (12–32px) for a soft, approachable feel\n\n### Don't\n- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned\n- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs\n- Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted\n- Don't use sharp corners (\u003C 6px radius) on buttons or cards — softness is core to the identity\n- Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts\n- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer\n- Don't use geometric\u002Ftech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling\n- Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality\n- Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code\n- Don't mix in sans-serif for headlines — the serif\u002Fsans split is the typographic identity\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | \u003C479px | Minimum layout, stacked everything, compact typography |\n| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |\n| Large Mobile | 640–767px | Slightly wider content area |\n| Tablet | 768–991px | 2-column grids begin, condensed nav |\n| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |\n\n### Touch Targets\n- Buttons use generous padding (8–16px vertical minimum)\n- Navigation links adequately spaced for thumb navigation\n- Card surfaces serve as large touch targets\n- Minimum recommended: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to hamburger on mobile\n- **Feature sections**: Multi-column → stacked single column\n- **Hero text**: 64px → 36px → ~25px progressive scaling\n- **Model cards**: 3-column → stacked vertical\n- **Section padding**: Reduces proportionally but maintains editorial rhythm\n- **Illustrations**: Scale proportionally, maintain aspect ratios\n\n### Image Behavior\n- Product screenshots scale proportionally within rounded containers\n- Illustrations maintain quality at all sizes\n- Video embeds maintain 16:9 aspect ratio with rounded corners\n- No art direction changes between breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand CTA: \"Terracotta Brand (#c96442)\"\n- Page Background: \"Parchment (#f5f4ed)\"\n- Card Surface: \"Ivory (#faf9f5)\"\n- Primary Text: \"Anthropic Near Black (#141413)\"\n- Secondary Text: \"Olive Gray (#5e5d59)\"\n- Tertiary Text: \"Stone Gray (#87867f)\"\n- Borders (light): \"Border Cream (#f0eee6)\"\n- Dark Surface: \"Dark Surface (#30302e)\"\n\n### Example Component Prompts\n- \"Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius.\"\n- \"Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px).\"\n- \"Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e).\"\n- \"Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px.\"\n- \"Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference specific color names — \"use Olive Gray (#5e5d59)\" not \"make it gray\"\n3. Always specify warm-toned variants — no cool grays\n4. Describe serif vs sans usage explicitly — \"Anthropic Serif for the heading, Anthropic Sans for the label\"\n5. For shadows, use \"ring shadow (0px 0px 0px 1px)\" or \"whisper shadow\" — never generic \"drop shadow\"\n6. Specify the warm background — \"on Parchment (#f5f4ed)\" or \"on Near Black (#141413)\"\n7. Keep illustrations organic and conceptual — describe \"hand-drawn-feeling\" style\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Claude \u002F Anthropic (Light)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-near-black: #141413;\n    --color-terracotta: #c96442;\n    --color-coral: #d97757;\n    \u002F* Secondary & Accent *\u002F\n    --color-error: #b53333;\n    --color-focus-blue: #3898ec;\n    \u002F* Surface & Background *\u002F\n    --color-parchment: #f5f4ed;\n    --color-ivory: #faf9f5;\n    --color-white: #ffffff;\n    --color-warm-sand: #e8e6dc;\n    --color-dark-surface: #30302e;\n    --color-deep-dark: #141413;\n    \u002F* Neutrals & Text *\u002F\n    --color-charcoal-warm: #4d4c48;\n    --color-olive-gray: #5e5d59;\n    --color-stone-gray: #87867f;\n    --color-dark-warm: #3d3d3a;\n    --color-warm-silver: #b0aea5;\n    \u002F* Borders & Rings *\u002F\n    --color-border-cream: #f0eee6;\n    --color-border-warm: #e8e6dc;\n    --color-border-dark: #30302e;\n    --color-ring-warm: #d1cfc5;\n    --color-ring-deep: #c2c0b6;\n    \u002F* Fonts *\u002F\n    --font-serif: Georgia, 'Times New Roman', Times, serif;\n    --font-sans: Arial, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #f5f4ed;\n    --bg-card: #faf9f5;\n    --bg-nav: rgba(245,244,237,0.92);\n    --text-primary: #141413;\n    --text-secondary: #5e5d59;\n    --text-tertiary: #87867f;\n    --border-color: #f0eee6;\n    --border-subtle: #f0eee6;\n    --section-label-color: #c96442;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    line-height: 1.60;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-serif);\n    font-size: 20px;\n    font-weight: 500;\n    color: var(--text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-terracotta);\n    border-radius: 8px;\n    color: var(--color-ivory);\n    font-family: var(--font-serif);\n    font-size: 16px;\n    font-weight: 500;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 15px;\n    font-weight: 400;\n    font-family: var(--font-sans);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-terracotta);\n    color: var(--color-ivory);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 12px;\n    font-size: 15px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(201,100,66,0.06) 0%, rgba(217,119,87,0.03) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-serif);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    position: relative;\n    color: var(--text-primary);\n  }\n  .hero h1 span { color: var(--color-terracotta); }\n  .hero p {\n    color: var(--text-secondary);\n    font-family: var(--font-sans);\n    font-size: 20px;\n    line-height: 1.60;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-brand {\n    background: var(--color-terracotta);\n    color: var(--color-ivory);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 12px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\n  }\n  .btn-warm-sand {\n    background: var(--color-warm-sand);\n    color: var(--color-charcoal-warm);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-sans);\n    font-size: 14px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 2.5px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-serif);\n    font-size: 36px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-serif);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-tertiary);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n  .btn-white {\n    background: var(--color-white);\n    color: var(--color-near-black);\n    padding: 8px 16px;\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-dark {\n    background: var(--color-dark-surface);\n    color: var(--color-ivory);\n    padding: 9.6px 16.8px;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-whisper {\n    border: 1px solid var(--border-color);\n    box-shadow: rgba(0,0,0,0.05) 0px 4px 24px;\n  }\n  .card-ring {\n    border: none;\n    box-shadow: 0px 0px 0px 1px var(--color-ring-warm);\n  }\n  .card h3 {\n    font-family: var(--font-serif);\n    font-size: 25px;\n    font-weight: 500;\n    line-height: 1.20;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.60; }\n  .card-label {\n    font-family: var(--font-sans);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-terracotta);\n    margin-bottom: 16px;\n    font-weight: 500;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(201,100,66,0.10);\n    border: 1px solid rgba(201,100,66,0.25);\n    border-radius: 4px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--color-border-warm);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-tertiary);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-tertiary);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--color-border-cream); }\n  .elevation-ring { border: none; box-shadow: 0px 0px 0px 1px var(--color-ring-warm); }\n  .elevation-whisper { border: 1px solid var(--color-border-cream); box-shadow: rgba(0,0,0,0.05) 0px 4px 24px; }\n  .elevation-inset { border: none; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15); }\n  .elevation-name {\n    font-family: var(--font-serif);\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 8px;\n  }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-terracotta);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"logo-mark\">C\u003C\u002Fspan> Claude\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Try Claude\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Claude\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-brand\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-warm-sand\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #141413; border-bottom: 1px solid #30302e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Anthropic Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#141413\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, dark-theme surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c96442;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Terracotta Brand\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c96442\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color, primary CTA buttons\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d97757;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Coral Accent\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d97757\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Text accents, links on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b53333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Error Crimson\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b53333\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Error states, warm red\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3898ec;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3898ec\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Input focus rings (only cool color)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f5f4ed; border-bottom: 1px solid #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Parchment\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f5f4ed\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #faf9f5; border-bottom: 1px solid #f0eee6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ivory\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faf9f5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card surfaces, elevated containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #f0eee6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button surfaces, max contrast\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Sand\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e8e6dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, interactive surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #30302e; border-bottom: 1px solid #4d4c48;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#30302e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark-theme containers, nav borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4d4c48;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4d4c48\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #5e5d59;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Olive Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#5e5d59\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #87867f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#87867f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, footnotes, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3d3d3a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3d3d3a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark text links, emphasized secondary\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b0aea5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b0aea5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic & Borders\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f0eee6; border-bottom: 1px solid #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f0eee6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard light-theme border\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e8e6dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Prominent borders, section dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d1cfc5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d1cfc5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button hover\u002Ffocus ring shadow\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c2c0b6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Deep\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c2c0b6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed ring states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 64px; font-weight: 500; line-height: 1.10;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 500 \u002F 1.10 \u002F normal — Anthropic Serif (Georgia fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 52px; font-weight: 500; line-height: 1.20;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 52px \u002F 500 \u002F 1.20 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1.30;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 36px \u002F 500 \u002F 1.30 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.10;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 32px \u002F 500 \u002F 1.10 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.20;\">Sub-heading Small\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Small — 25px \u002F 500 \u002F 1.20 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.60; color: var(--text-secondary);\">Body serif text for editorial passages. The generous 1.60 line-height creates a literary reading experience closer to a book than a dashboard, with warm tones throughout.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Serif — 17px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.60;\">Body Large Sans\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 20px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Sans (Arial fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.60;\">Standard body text for UI copy, navigation, and button labels. Anthropic Sans handles all functional text with quiet efficiency.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Standard — 16px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.43 \u002F normal — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.60; letter-spacing: 0.12px; color: var(--text-tertiary);\">LABEL TEXT\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Label — 12px \u002F 500 \u002F 1.60 \u002F 0.12px — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.60; letter-spacing: -0.32px;\">const response = await claude.messages.create()\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code — 15px \u002F 400 \u002F 1.60 \u002F -0.32px — Anthropic Mono (SFMono fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #e8e6dc; color: #4d4c48; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;\">Warm Sand\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Warm Sand (Secondary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #ffffff; color: #141413; padding: 8px 16px 8px 12px; border: 1px solid #f0eee6; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;\">White Surface\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Surface\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #30302e; color: #faf9f5; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;\">Dark Charcoal\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Charcoal\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #c96442; color: #faf9f5; padding: 10px 20px; border: none; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\">Brand CTA\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Terracotta Brand\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #141413; color: #b0aea5; padding: 9.6px 16.8px; border: 1px solid #30302e; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;\">Dark Primary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Primary\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Cream Contained\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid Border Cream and 8px radius. The default container for features and content sections on Ivory surface.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-whisper\">\n      \u003Cdiv class=\"card-label\">Whisper Shadow\u003C\u002Fdiv>\n      \u003Ch3>Soft Elevated Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with whisper-soft shadow at 0.05 opacity and 24px blur. Suggests floating rather than casting. For featured product screenshots.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-ring\">\n      \u003Cdiv class=\"card-label\">Ring Shadow\u003C\u002Fdiv>\n      \u003Ch3>Warm Ring Halo\u003C\u002Fh3>\n      \u003Cp>Interactive card using Claude's signature ring shadow system. The 0px 0px 0px 1px pattern creates a border-like halo that is softer than a true border.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-family: var(--font-sans);\">Base unit: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 12px; height: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">3px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">30px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortably rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generously rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Very rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Highly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Maximum rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Parchment background and inline text.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid Border Cream. Standard cards and sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-ring\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0px 0px 0px 1px ring shadow using warm grays. Interactive cards, buttons, hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-whisper\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.05) 0px 4px 24px. Elevated feature cards, product screenshots.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-inset\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">inset 0px 0px 0px 1px at 15% opacity. Active\u002Fpressed button states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Claude \u002F Anthropic (Dark)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-near-black: #141413;\n    --color-terracotta: #c96442;\n    --color-coral: #d97757;\n    \u002F* Secondary & Accent *\u002F\n    --color-error: #b53333;\n    --color-focus-blue: #3898ec;\n    \u002F* Surface & Background *\u002F\n    --color-parchment: #f5f4ed;\n    --color-ivory: #faf9f5;\n    --color-white: #ffffff;\n    --color-warm-sand: #e8e6dc;\n    --color-dark-surface: #30302e;\n    --color-deep-dark: #141413;\n    \u002F* Neutrals & Text *\u002F\n    --color-charcoal-warm: #4d4c48;\n    --color-olive-gray: #5e5d59;\n    --color-stone-gray: #87867f;\n    --color-dark-warm: #3d3d3a;\n    --color-warm-silver: #b0aea5;\n    \u002F* Borders & Rings *\u002F\n    --color-border-cream: #f0eee6;\n    --color-border-warm: #e8e6dc;\n    --color-border-dark: #30302e;\n    --color-ring-warm: #d1cfc5;\n    --color-ring-deep: #c2c0b6;\n    \u002F* Fonts *\u002F\n    --font-serif: Georgia, 'Times New Roman', Times, serif;\n    --font-sans: Arial, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;\n    \u002F* Dark mode tokens *\u002F\n    --bg-page: #141413;\n    --bg-card: #30302e;\n    --bg-nav: rgba(20,20,19,0.92);\n    --text-primary: #faf9f5;\n    --text-secondary: #87867f;\n    --text-tertiary: #b0aea5;\n    --border-color: #30302e;\n    --border-subtle: #30302e;\n    --section-label-color: #d97757;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    line-height: 1.60;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-serif);\n    font-size: 20px;\n    font-weight: 500;\n    color: var(--text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-terracotta);\n    border-radius: 8px;\n    color: var(--color-ivory);\n    font-family: var(--font-serif);\n    font-size: 16px;\n    font-weight: 500;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 15px;\n    font-weight: 400;\n    font-family: var(--font-sans);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-terracotta);\n    color: var(--color-ivory);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 12px;\n    font-size: 15px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(201,100,66,0.08) 0%, rgba(217,119,87,0.04) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-serif);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    position: relative;\n    color: var(--text-primary);\n  }\n  .hero h1 span { color: var(--color-coral); }\n  .hero p {\n    color: var(--text-secondary);\n    font-family: var(--font-sans);\n    font-size: 20px;\n    line-height: 1.60;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-brand {\n    background: var(--color-terracotta);\n    color: var(--color-ivory);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 12px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\n  }\n  .btn-dark-primary {\n    background: var(--color-deep-dark);\n    color: var(--color-warm-silver);\n    padding: 12px 24px;\n    border: 1px solid var(--color-dark-surface);\n    border-radius: 12px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-sans);\n    font-size: 14px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 2.5px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-serif);\n    font-size: 36px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-serif);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-secondary);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-whisper {\n    border: 1px solid var(--border-color);\n    box-shadow: rgba(0,0,0,0.20) 0px 4px 24px;\n  }\n  .card-ring {\n    border: none;\n    box-shadow: 0px 0px 0px 1px #4d4c48;\n  }\n  .card h3 {\n    font-family: var(--font-serif);\n    font-size: 25px;\n    font-weight: 500;\n    line-height: 1.20;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.60; }\n  .card-label {\n    font-family: var(--font-sans);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-coral);\n    margin-bottom: 16px;\n    font-weight: 500;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(217,119,87,0.12);\n    border: 1px solid rgba(217,119,87,0.30);\n    border-radius: 4px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--color-charcoal-warm);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-secondary);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-secondary);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--color-dark-surface); }\n  .elevation-ring { border: none; box-shadow: 0px 0px 0px 1px #4d4c48; }\n  .elevation-whisper { border: 1px solid var(--color-dark-surface); box-shadow: rgba(0,0,0,0.20) 0px 4px 24px; }\n  .elevation-inset { border: none; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.10); }\n  .elevation-name {\n    font-family: var(--font-serif);\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-coral);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"logo-mark\">C\u003C\u002Fspan> Claude\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Try Claude\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Claude\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-brand\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-dark-primary\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #141413; border-bottom: 1px solid #30302e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Anthropic Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#141413\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, dark-theme surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c96442;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Terracotta Brand\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c96442\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color, primary CTA buttons\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d97757;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Coral Accent\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d97757\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Text accents, links on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b53333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Error Crimson\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b53333\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Error states, warm red\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3898ec;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3898ec\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Input focus rings (only cool color)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f5f4ed; border-bottom: 1px solid #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Parchment\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f5f4ed\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background (light mode)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #faf9f5; border-bottom: 1px solid #f0eee6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ivory\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faf9f5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card surfaces, elevated containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #f0eee6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button surfaces, max contrast\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Sand\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e8e6dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, interactive surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #30302e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#30302e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark-theme containers, card backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4d4c48;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4d4c48\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #5e5d59;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Olive Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#5e5d59\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text (light mode)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #87867f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#87867f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text (dark), tertiary (light)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3d3d3a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3d3d3a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark text links, emphasized secondary\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b0aea5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b0aea5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic & Borders\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f0eee6; border-bottom: 1px solid #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f0eee6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard light-theme border\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e8e6dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e8e6dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Prominent borders, section dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d1cfc5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Warm\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d1cfc5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button hover\u002Ffocus ring shadow\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c2c0b6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Deep\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c2c0b6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed ring states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 64px; font-weight: 500; line-height: 1.10;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 500 \u002F 1.10 \u002F normal — Anthropic Serif (Georgia fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 52px; font-weight: 500; line-height: 1.20;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 52px \u002F 500 \u002F 1.20 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 36px; font-weight: 500; line-height: 1.30;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 36px \u002F 500 \u002F 1.30 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.10;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 32px \u002F 500 \u002F 1.10 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.20;\">Sub-heading Small\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Small — 25px \u002F 500 \u002F 1.20 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.60; color: var(--text-secondary);\">Body serif text for editorial passages. The generous 1.60 line-height creates a literary reading experience closer to a book than a dashboard, with warm tones throughout.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Serif — 17px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.60;\">Body Large Sans\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 20px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Sans (Arial fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.60;\">Standard body text for UI copy, navigation, and button labels. Anthropic Sans handles all functional text with quiet efficiency.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Standard — 16px \u002F 400 \u002F 1.60 \u002F normal — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.43 \u002F normal — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: Arial, system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.60; letter-spacing: 0.12px; color: var(--text-tertiary);\">LABEL TEXT\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Label — 12px \u002F 500 \u002F 1.60 \u002F 0.12px — Anthropic Sans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.60; letter-spacing: -0.32px;\">const response = await claude.messages.create()\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code — 15px \u002F 400 \u002F 1.60 \u002F -0.32px — Anthropic Mono (SFMono fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #e8e6dc; color: #4d4c48; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;\">Warm Sand\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Warm Sand (Secondary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #ffffff; color: #141413; padding: 8px 16px 8px 12px; border: 1px solid #f0eee6; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;\">White Surface\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Surface\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #30302e; color: #faf9f5; padding: 10px 12px 10px 8px; border: none; border-radius: 8px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #30302e 0px 0px 0px 0px, #30302e 0px 0px 0px 1px;\">Dark Charcoal\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Charcoal\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #c96442; color: #faf9f5; padding: 10px 20px; border: none; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer; box-shadow: #c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px;\">Brand CTA\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Terracotta Brand\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: #141413; color: #b0aea5; padding: 9.6px 16.8px; border: 1px solid #30302e; border-radius: 12px; font-size: 16px; font-family: Arial, system-ui, sans-serif; font-weight: 500; cursor: pointer;\">Dark Primary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Primary\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Dark Surface Contained\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid Dark Surface border and 12px radius. The default container on the dark Near Black canvas.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-whisper\">\n      \u003Cdiv class=\"card-label\">Whisper Shadow\u003C\u002Fdiv>\n      \u003Ch3>Soft Elevated Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with deeper shadow on dark surfaces. The 0.20 opacity and 24px blur create subtle depth against the dark canvas.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-ring\">\n      \u003Cdiv class=\"card-label\">Ring Shadow\u003C\u002Fdiv>\n      \u003Ch3>Warm Ring Halo\u003C\u002Fh3>\n      \u003Cp>Interactive card using the signature ring shadow. On dark surfaces the ring uses Charcoal Warm for a subtle warm boundary.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-family: var(--font-sans);\">Base unit: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 12px; height: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">3px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">30px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortably rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generously rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Very rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Highly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Maximum rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Near Black background and inline text.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid Dark Surface. Standard cards and sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-ring\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0px 0px 0px 1px ring shadow using Charcoal Warm. Interactive cards, buttons, hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-whisper\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.20) 0px 4px 24px. Deeper shadow on dark canvas for elevated cards.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-inset\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">inset 0px 0px 0px 1px at 10% white opacity. Active\u002Fpressed button states on dark.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# Claude Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclaude\u002FDESIGN.md) extracted from the public [Claude](https:\u002F\u002Fclaude.ai\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclaude\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Claude Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclaude\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Claude Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclaude\u002Fpreview-screenshot.png)\n",{"slug":51,"name":52,"category":15,"designMd":53,"previewHtml":54,"previewDarkHtml":55,"readme":56},"clay","Clay","# Design System Inspiration of Clay\n\n## 1. Visual Theme & Atmosphere\n\nClay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.\n\nThe typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.\n\nWhat makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.\n\n**Key Characteristics:**\n- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical\n- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit\n- Roobert font with 5 OpenType stylistic sets — quirky geometric character\n- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow\n- Space Mono for code and technical labels\n- Generous border radius: 24px cards, 40px sections, 1584px pills\n- Mixed border styles: solid + dashed in the same interface\n- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`\n- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text\n- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas\n\n### Swatch Palette — Named Colors\n\n**Matcha (Green)**\n- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent\n- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green\n- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections\n\n**Slushie (Cyan)**\n- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent\n- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal\n\n**Lemon (Gold)**\n- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold\n- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold\n- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber\n- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber\n\n**Ube (Purple)**\n- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender\n- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple\n- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple\n\n**Pomegranate (Pink\u002FRed)**\n- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink\n\n**Blueberry (Navy Blue)**\n- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy\n\n### Neutral Scale (Warm)\n- **Warm Silver** (`#9f9b93`): Secondary\u002Fmuted text, footer links\n- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links\n- **Dark Charcoal** (`#333333`): Link text on light backgrounds\n\n### Surface & Border\n- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines\n- **Oat Light** (`#eee9df`): Secondary lighter border\n- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections\n- **Dark Border** (`#525a69`): Border on dark sections\n- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)\n\n### Badges\n- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface\n- **Badge Blue Text** (`#3859f9`): Vivid blue badge text\n- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator\n\n### Shadows\n- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature\n- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Roobert`, fallback: `Arial`\n- **Monospace**: `Space Mono`\n- **OpenType Features**: `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on all Roobert text (display uses all 5; body\u002FUI uses `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |\n| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |\n| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |\n| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |\n| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |\n| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |\n| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |\n| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |\n| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |\n| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |\n| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |\n| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |\n| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |\n| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |\n| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |\n\n### Principles\n- **Five stylistic sets as identity**: The combination of `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.\n- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.\n- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.\n- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Transparent with Hover Animation)**\n- Background: transparent (`rgba(239, 241, 243, 0)`)\n- Text: `#000000`\n- Padding: 6.4px 12.8px\n- Border: none (or `1px solid #717989` for outlined variant)\n- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n**White Solid**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 6.4px\n- Hover: oat-200 swatch color, animated rotation + shadow\n- Use: Primary CTA on colored sections\n\n**Ghost Outlined**\n- Background: transparent\n- Text: `#000000`\n- Padding: 8px\n- Border: `1px solid #717989`\n- Radius: 4px\n- Hover: dragonfruit swatch color, white text, animated rotation\n\n### Cards & Containers\n- Background: `#ffffff` on cream canvas\n- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`\n- Radius: 12px (standard cards), 24px (feature cards\u002Fimages), 40px (section containers\u002Ffooter)\n- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`\n- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)\n\n### Inputs & Forms\n- Text: `#000000`\n- Border: `1px solid #717989`\n- Radius: 4px\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n### Navigation\n- Sticky top nav on cream background\n- Roobert 15px weight 500 for nav links\n- Clay logo left-aligned\n- CTA buttons right-aligned with pill radius\n- Border bottom: `1px solid #dad4c8`\n- Mobile: hamburger collapse at 767px\n\n### Image Treatment\n- Product screenshots in white cards with oat borders\n- Colorful illustrated sections with swatch background colors\n- 8px–24px radius on images\n- Full-width colorful section backgrounds\n\n### Distinctive Components\n\n**Swatch Color Sections**\n- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)\n- White text on dark swatches, black text on light swatches\n- Each section tells a distinct product story through its color\n\n**Playful Hover Buttons**\n- Rotate -8deg + translate upward on hover\n- Hard offset shadow (`-7px 7px`) instead of soft blur\n- Background transitions to contrasting swatch color\n- Creates a physical, toy-like interaction quality\n\n**Dashed Border Elements**\n- Dashed borders (`1px dashed #dad4c8`) alongside solid borders\n- Used for secondary containers and decorative elements\n- Adds a hand-drawn, craft-like quality\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px\n\n### Grid & Container\n- Max content width centered\n- Feature sections alternate between white cards and colorful swatch backgrounds\n- Card grids: 2–3 columns on desktop\n- Full-width colorful sections break the grid\n- Footer with generous 40px radius container\n\n### Whitespace Philosophy\n- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.\n- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own \"room.\"\n- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.\n\n### Border Radius Scale\n- Sharp (4px): Ghost buttons, inputs\n- Standard (8px): Small cards, images, links\n- Badge (11px): Tag badges\n- Card (12px): Standard cards, buttons\n- Feature (24px): Feature cards, images, panels\n- Section (40px): Large sections, footer, containers\n- Pill (1584px): CTAs, pill-shaped buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream canvas | Page background |\n| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |\n| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |\n| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |\n\n**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a \"pressed into clay\" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.\n\n### Decorative Depth\n- Full-width swatch-colored sections create dramatic depth through color contrast\n- Dashed borders add visual texture alongside solid borders\n- Product illustrations with warm, organic art style\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity\n- Apply all 5 OpenType stylistic sets on Roobert headings: `\"ss01\", \"ss03\", \"ss10\", \"ss11\", \"ss12\"`\n- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds\n- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`\n- Use warm oat borders (`#dad4c8`) — not neutral gray\n- Mix solid and dashed borders for visual variety\n- Use generous radius: 24px for cards, 40px for sections\n- Use weight 600 exclusively for headings, 500 for UI, 400 for body\n\n### Don't\n- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable\n- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones\n- Don't mix more than 2 swatch colors in the same section\n- Don't skip the OpenType stylistic sets — they define Roobert's character\n- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction\n- Don't use small border radius (\u003C12px) on feature cards — the generous rounding is structural\n- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset\n- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C479px | Single column, tight padding |\n| Mobile | 479–767px | Standard mobile, stacked layout |\n| Tablet | 768–991px | 2-column grids, condensed nav |\n| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |\n\n### Touch Targets\n- Buttons: minimum 6.4px + 12.8px padding for adequate touch area\n- Nav links: 15px font with generous spacing\n- Mobile: full-width buttons for easy tapping\n\n### Collapsing Strategy\n- Hero: 80px → 60px → smaller display text\n- Navigation: horizontal → hamburger at 767px\n- Feature sections: multi-column → stacked\n- Colorful sections: maintain full-width but compress padding\n- Card grids: 3-column → 2-column → single column\n\n### Image Behavior\n- Product screenshots scale proportionally\n- Colorful section illustrations adapt to viewport width\n- Rounded corners maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Warm Cream (`#faf9f7`)\n- Text: Clay Black (`#000000`)\n- Secondary text: Warm Silver (`#9f9b93`)\n- Border: Oat Border (`#dad4c8`)\n- Green accent: Matcha 600 (`#078a52`)\n- Cyan accent: Slushie 500 (`#3bd3fd`)\n- Gold accent: Lemon 500 (`#fbbd41`)\n- Purple accent: Ube 800 (`#43089f`)\n- Pink accent: Pomegranate 400 (`#fc7981`)\n\n### Example Component Prompts\n- \"Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989).\"\n- \"Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius.\"\n- \"Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px.\"\n- \"Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px.\"\n- \"Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'.\"\n\n### Iteration Guide\n1. Start with warm cream (#faf9f7) — never cool white\n2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube\n3. Oat borders (#dad4c8) everywhere — dashed variants for decoration\n4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert\n5. Hover animations are the signature — rotation + hard shadow, not subtle fades\n6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate\n7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Clay (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cream: #faf9f7;\n    --black: #000000;\n    --white: #ffffff;\n    --oat: #dad4c8;\n    --oat-light: #eee9df;\n    --silver: #9f9b93;\n    --charcoal: #55534e;\n    --matcha-300: #84e7a5;\n    --matcha-600: #078a52;\n    --matcha-800: #02492a;\n    --slushie-500: #3bd3fd;\n    --slushie-800: #0089ad;\n    --lemon-400: #f8cc65;\n    --lemon-500: #fbbd41;\n    --ube-300: #c1b0ff;\n    --ube-800: #43089f;\n    --pomegranate-400: #fc7981;\n    --blueberry-800: #01418d;\n    --badge-bg: #f0f8ff;\n    --badge-text: #3859f9;\n    --focus: rgb(20,110,245);\n    --font-sans: 'DM Sans', Arial, sans-serif;\n    --font-mono: 'Space Mono', monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(250,249,247,0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--oat);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); }\n  .nav-cta {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: all 0.3s;\n  }\n  .nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }\n\n  .hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }\n  .hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }\n  .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }\n  .btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }\n  .btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }\n  .btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }\n  .btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }\n  .btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }\n  .btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }\n\n  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }\n  .section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }\n\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }\n  .color-swatch-block { height: 68px; width: 100%; }\n  .color-swatch-info { padding: 10px; }\n  .color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }\n\n  .type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }\n\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }\n  .card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }\n  .card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }\n  .card-colored { border-radius: 24px; padding: 24px; color: var(--white); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }\n  .card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }\n\n  .form-group { margin-bottom: 16px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }\n  .form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }\n  .form-input:focus { outline: 2px solid var(--focus); }\n  .form-input--focus { outline: 2px solid var(--focus); }\n  .form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }\n  .form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }\n  .form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }\n\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n  .radius-context { font-size: 9px; color: var(--charcoal); }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n\n  .footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }\n  .footer a { color: var(--matcha-600); text-decoration: underline; }\n\n  @media (max-width: 767px) {\n    .hero h1 { font-size: 44px; letter-spacing: -1.32px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Clay\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-solid\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Clay Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#faf9f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#faf9f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Swatch Palette\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#84e7a5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#84e7a5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#078a52\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#078a52\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Mid green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#02492a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#02492a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep green sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3bd3fd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slushie 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3bd3fd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Bright cyan\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fbbd41\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lemon 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fbbd41\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary gold\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c1b0ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ube 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c1b0ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Soft lavender\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#43089f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ube 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#43089f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep purple\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fc7981\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pomegranate 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fc7981\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Coral pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#01418d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blueberry 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#01418d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep navy\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9f9b93\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9f9b93\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#55534e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#55534e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dad4c8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dad4c8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eee9df\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eee9df\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 80px \u002F 600 \u002F 1.00 \u002F -3.2px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;\">Display Secondary\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Secondary — 60px \u002F 600 \u002F 1.00 \u002F -2.4px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 44px \u002F 600 \u002F 1.10 \u002F -1.32px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 600 \u002F 1.10 \u002F -0.64px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 20px \u002F 600 \u002F 1.40 \u002F -0.4px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;\">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.60 \u002F -0.36px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;\">Button — Start your free trial\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 16px \u002F 500 \u002F 1.50 \u002F -0.16px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50;\">Caption — Updated 3 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.50 \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;\">Uppercase Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label — 12px \u002F 600 \u002F uppercase \u002F 1.08px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);\">clay.people.enrich({ email: 'user@company.com' })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code — 14px \u002F 400 \u002F Space Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-solid\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Solid\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Card\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">View Docs\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">NEW FEATURE\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:13px; color:var(--silver); margin-top:16px;\">Hover over buttons to see the playful rotateZ + hard shadow animation.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(7,138,82,0.1); color:var(--matcha-600);\">Data Enrichment\u003C\u002Fdiv>\n      \u003Ch3>Turn data into action\u003C\u002Fh3>\n      \u003Cp style=\"color:var(--charcoal);\">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-dashed\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(67,8,159,0.1); color:var(--ube-800);\">Dashed Border\u003C\u002Fdiv>\n      \u003Ch3>Flexible integrations\u003C\u002Fh3>\n      \u003Cp style=\"color:var(--charcoal);\">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-colored\" style=\"background:var(--matcha-800);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(132,231,165,0.2); color:var(--matcha-300);\">Colored Section\u003C\u002Fdiv>\n      \u003Ch3>Growth on autopilot\u003C\u002Fh3>\n      \u003Cp style=\"color:rgba(255,255,255,0.8);\">Full-width colored section using the Matcha 800 swatch background.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Company Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Acme Corp\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@clay.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (pomegranate ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add enrichment notes...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Feature cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Cream canvas\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Clay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Multi-layer + inset\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);\">\u003Cdiv class=\"elevation-label\">Level 2: Hover Hard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Hard offset shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"outline: 2px solid rgb(20,110,245);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fclay.com\u002F\">clay.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Clay (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cream: #1a1815;\n    --black: #f0ede8;\n    --white: #242220;\n    --oat: #3d3a35;\n    --oat-light: #2e2b27;\n    --silver: #7a766e;\n    --charcoal: #a09c94;\n    --matcha-300: #84e7a5;\n    --matcha-600: #078a52;\n    --matcha-800: #02492a;\n    --slushie-500: #3bd3fd;\n    --slushie-800: #0089ad;\n    --lemon-400: #f8cc65;\n    --lemon-500: #fbbd41;\n    --ube-300: #c1b0ff;\n    --ube-800: #43089f;\n    --pomegranate-400: #fc7981;\n    --blueberry-800: #01418d;\n    --badge-bg: #f0f8ff;\n    --badge-text: #3859f9;\n    --focus: rgb(20,110,245);\n    --font-sans: 'DM Sans', Arial, sans-serif;\n    --font-mono: 'Space Mono', monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(26,24,21,0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--oat);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); }\n  .nav-cta {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 8px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: all 0.3s;\n  }\n  .nav-cta:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgb(0,0,0) -3px 3px; }\n\n  .hero { padding: 80px 32px 64px; max-width: 1000px; margin: 0 auto; }\n  .hero h1 { font-size: 72px; font-weight: 600; line-height: 1.00; letter-spacing: -3.2px; margin-bottom: 16px; }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--silver); max-width: 560px; margin-bottom: 32px; }\n  .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }\n  .btn-solid { display: inline-block; background: var(--black); color: var(--white); padding: 10px 20px; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }\n  .btn-solid:hover { transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }\n  .btn-outline { display: inline-block; background: transparent; color: var(--black); padding: 10px 20px; border-radius: 4px; border: 1px solid #717989; font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }\n  .btn-outline:hover { background: var(--ube-800); color: white; transform: translateY(-3px) rotateZ(-4deg); box-shadow: rgb(0,0,0) -5px 5px; }\n  .btn-white { display: inline-block; background: var(--white); color: var(--black); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--oat); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s; }\n  .btn-white:hover { transform: translateY(-2px) rotateZ(-2deg); box-shadow: rgba(0,0,0,0.1) -3px 3px; }\n\n  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.08px; color: var(--silver); margin-bottom: 8px; }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--oat); margin: 0; }\n  .section-divider-dashed { border: none; border-top: 1px dashed var(--oat); margin: 0; }\n\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--oat); background: var(--white); }\n  .color-swatch-block { height: 68px; width: 100%; }\n  .color-swatch-info { padding: 10px; }\n  .color-swatch-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 10px; color: var(--charcoal); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }\n\n  .type-sample { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--oat-light); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--silver); margin-top: 6px; }\n\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 11px; font-weight: 500; color: var(--silver); margin-top: 8px; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }\n  .card { background: var(--white); border: 1px solid var(--oat); border-radius: 24px; padding: 24px; box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; }\n  .card-dashed { background: var(--white); border: 1px dashed var(--oat); border-radius: 24px; padding: 24px; }\n  .card-colored { border-radius: 24px; padding: 24px; color: var(--white); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }\n  .card p, .card-dashed p, .card-colored p { font-size: 14px; line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 9.6px; font-weight: 600; padding: 2px 6px; border-radius: 11px; margin-bottom: 12px; }\n\n  .form-group { margin-bottom: 16px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }\n  .form-input { width: 100%; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; outline: none; }\n  .form-input:focus { outline: 2px solid var(--focus); }\n  .form-input--focus { outline: 2px solid var(--focus); }\n  .form-input--error { border-color: var(--pomegranate-400); outline: 2px solid var(--pomegranate-400); }\n  .form-textarea { width: 100%; min-height: 80px; background: var(--white); color: var(--black); border: 1px solid #717989; padding: 8px 12px; border-radius: 4px; font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none; }\n  .form-state-label { font-size: 10px; color: var(--silver); margin-top: 4px; }\n\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--matcha-600); border-radius: 4px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 60px; height: 60px; background: var(--lemon-500); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n  .radius-context { font-size: 9px; color: var(--charcoal); }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { background: var(--white); border-radius: 24px; padding: 20px; text-align: center; border: 1px solid var(--oat); }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--silver); }\n\n  .footer { padding: 40px 32px; text-align: center; background: var(--white); border-top: 1px solid var(--oat); border-radius: 40px 40px 0 0; font-size: 13px; color: var(--silver); }\n  .footer a { color: var(--matcha-600); text-decoration: underline; }\n\n  @media (max-width: 767px) {\n    .hero h1 { font-size: 44px; letter-spacing: -1.32px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#fbbd41;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:11px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Clay\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-solid\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Clay Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#faf9f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#faf9f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Swatch Palette\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#84e7a5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#84e7a5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#078a52\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#078a52\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Mid green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#02492a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Matcha 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#02492a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep green sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3bd3fd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slushie 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3bd3fd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Bright cyan\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fbbd41\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lemon 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fbbd41\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary gold\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c1b0ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ube 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c1b0ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Soft lavender\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#43089f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ube 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#43089f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep purple\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fc7981\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pomegranate 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fc7981\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Coral pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#01418d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blueberry 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#01418d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deep navy\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9f9b93\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9f9b93\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#55534e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#55534e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dad4c8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dad4c8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eee9df\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eee9df\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:600; line-height:1.00; letter-spacing:-3.2px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 80px \u002F 600 \u002F 1.00 \u002F -3.2px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:52px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;\">Display Secondary\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Secondary — 60px \u002F 600 \u002F 1.00 \u002F -2.4px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:44px; font-weight:600; line-height:1.10; letter-spacing:-1.32px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 44px \u002F 600 \u002F 1.10 \u002F -1.32px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:600; line-height:1.10; letter-spacing:-0.64px;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 600 \u002F 1.10 \u002F -0.64px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.4px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 20px \u002F 600 \u002F 1.40 \u002F -0.4px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.36px;\">Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.60 \u002F -0.36px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50; letter-spacing:-0.16px;\">Button — Start your free trial\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 16px \u002F 500 \u002F 1.50 \u002F -0.16px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50;\">Caption — Updated 3 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.50 \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; line-height:1.20; text-transform:uppercase; letter-spacing:1.08px;\">Uppercase Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label — 12px \u002F 600 \u002F uppercase \u002F 1.08px \u002F Roobert\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--matcha-600);\">clay.people.enrich({ email: 'user@company.com' })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code — 14px \u002F 400 \u002F Space Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-solid\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Solid\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Card\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">View Docs\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">NEW FEATURE\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:13px; color:var(--silver); margin-top:16px;\">Hover over buttons to see the playful rotateZ + hard shadow animation.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(7,138,82,0.1); color:var(--matcha-600);\">Data Enrichment\u003C\u002Fdiv>\n      \u003Ch3>Turn data into action\u003C\u002Fh3>\n      \u003Cp style=\"color:var(--charcoal);\">Enrich any record with 100+ data providers. Build automated workflows with Clay tables.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-dashed\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(67,8,159,0.1); color:var(--ube-800);\">Dashed Border\u003C\u002Fdiv>\n      \u003Ch3>Flexible integrations\u003C\u002Fh3>\n      \u003Cp style=\"color:var(--charcoal);\">Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-colored\" style=\"background:var(--matcha-800);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(132,231,165,0.2); color:var(--matcha-300);\">Colored Section\u003C\u002Fdiv>\n      \u003Ch3>Growth on autopilot\u003C\u002Fh3>\n      \u003Cp style=\"color:rgba(255,255,255,0.8);\">Full-width colored section using the Matcha 800 swatch background.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Company Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Acme Corp\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@clay.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (pomegranate ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add enrichment notes...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Feature cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider-dashed\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Cream canvas\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Clay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Multi-layer + inset\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(0,0,0) -7px 7px; transform: rotateZ(-2deg);\">\u003Cdiv class=\"elevation-label\">Level 2: Hover Hard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Hard offset shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"outline: 2px solid rgb(20,110,245);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fclay.com\u002F\">clay.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Clay Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclay\u002FDESIGN.md) extracted from the public [Clay](https:\u002F\u002Fclay.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclay\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Clay Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclay\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Clay Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclay\u002Fpreview-screenshot.png)\n",{"slug":58,"name":59,"category":60,"designMd":61,"previewHtml":62,"previewDarkHtml":63,"readme":64},"clickhouse","Clickhouse","Infrastructure & Cloud","# Design System Inspiration of ClickHouse\n\n## 1. Visual Theme & Atmosphere\n\nClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams \"speed\" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.\n\nThe typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This \"database for AI\" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.\n\nWhat makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.\n\n**Key Characteristics:**\n- Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast\n- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px\n- Dark charcoal card system with #414141 borders at 80% opacity\n- Forest green (#166534) secondary CTA buttons\n- Performance stats as oversized display numbers\n- Uppercase labels with wide letter-spacing (1.4px) for navigation structure\n- Active\u002Fpressed state shifts text to pale yellow (#f4f692)\n- All links hover to neon yellow-green — unified interactive signal\n- Inset shadows on select elements creating \"pressed into the surface\" depth\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.\n- **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for \"Get Started\" and primary action buttons that need distinction from the neon.\n- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.\n\n### Secondary & Accent\n- **Pale Yellow** (`#f4f692`): Active\u002Fpressed state text color — a softer, more muted version of Neon Volt for state feedback.\n- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.\n- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.\n\n### Surface & Background\n- **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.\n- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.\n- **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.\n- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.\n- **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.\n\n### Neutrals & Text\n- **Pure White** (`#ffffff`): Primary text on dark surfaces.\n- **Silver** (`#a0a0a0`): Secondary body text and muted content.\n- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.\n- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).\n\n### Gradient System\n- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The \"gradient\" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)\n- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`\n- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |\n| Display \u002F Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |\n| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |\n| Sub-heading | Inter \u002F Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |\n| Feature Title | Inter \u002F Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |\n| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |\n| Body \u002F Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |\n| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |\n| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |\n| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |\n| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |\n| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |\n\n### Principles\n- **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.\n- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.\n- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.\n- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between \"data\u002Fperformance\" (Inter) and \"product\u002Ffeature\" (Basier) contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Neon Primary**\n- Background: Neon Volt (`#faff69`)\n- Text: Near Black (`#151515`)\n- Padding: 0px 16px\n- Radius: sharp (4px)\n- Border: `1px solid #faff69`\n- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays\n- Active: text shifts to Pale Yellow (`#f4f692`)\n- The eye-catching CTA — neon on black\n\n**Dark Solid**\n- Background: Near Black (`#141414`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px 16px\n- Radius: 4px or 8px\n- Border: `1px solid #141414`\n- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity\n- Active: text to Pale Yellow\n- The standard action button\n\n**Forest Green**\n- Background: Forest Green (`#166534`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px 16px\n- Border: `1px solid #141414`\n- Hover: same dark shift\n- Active: Pale Yellow text\n- The \"Get Started\" \u002F primary conversion button\n\n**Ghost \u002F Outlined**\n- Background: transparent\n- Text: Pure White (`#ffffff`)\n- Padding: 0px 32px\n- Radius: 4px\n- Border: `1px solid #4f5100` (olive-tinted)\n- Hover: dark bg shift\n- Active: Pale Yellow text\n- Secondary actions with neon-tinted border\n\n**Pill Toggle**\n- Background: transparent\n- Radius: pill (9999px)\n- Used for toggle\u002Fswitch elements\n\n### Cards & Containers\n- Background: transparent or Near Black\n- Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment\n- Radius: 4px (small elements) or 8px (cards, containers)\n- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)\n- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)\n- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the \"pressed\" effect\n- Neon-highlighted cards: selected\u002Factive cards get neon yellow-green border or accent\n\n### Navigation\n- Dark nav on black background\n- Logo: ClickHouse wordmark + icon in yellow\u002Fneon\n- Links: white text, hover to Neon Volt (#faff69)\n- CTA: Neon Volt button or Forest Green button\n- Uppercase labels for categories\n\n### Distinctive Components\n\n**Performance Stats**\n- Oversized numbers (72px+, weight 700–900)\n- Brief descriptions beneath\n- High-contrast neon accents on key metrics\n- The primary visual proof of performance claims\n\n**Neon-Highlighted Card**\n- Standard dark card with neon yellow-green border highlight\n- Creates \"selected\" or \"featured\" treatment\n- The accent border makes the card pop against the dark canvas\n\n**Code Blocks**\n- Dark surface with Inconsolata at weight 600\n- Neon and white syntax highlighting\n- Terminal-like aesthetic\n\n**Trust Bar**\n- Company logos on dark background\n- Monochrome\u002Fwhite logo treatment\n- Horizontal layout\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px\n- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)\n- Section vertical spacing: generous (48–64px)\n\n### Grid & Container\n- Max container width: up to 2200px (extra-wide) with responsive scaling\n- Hero: full-width dark with massive typography\n- Feature sections: multi-column card grids with dark borders\n- Stats: horizontal metric bar\n- Full-dark page — no light sections\n\n### Whitespace Philosophy\n- **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.\n- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.\n- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.\n\n### Border Radius Scale\n- Sharp (4px): Buttons, badges, small elements, code blocks\n- Comfortable (8px): Cards, containers, dividers\n- Pill (9999px): Toggle buttons, status indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Black background, text blocks |\n| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |\n| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |\n| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |\n| Pressed\u002FInset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active\u002Fpressed elements — \"sunk into the surface\" |\n| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured\u002Fselected cards, maximum emphasis |\n\n**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a \"pressed into the surface\" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black\n- Use Inter at weight 900 for hero display text — the extreme weight IS the personality\n- Keep everything on pure black (#000000) — never use dark gray as the page background\n- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment\n- Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy\n- Show performance stats as oversized display numbers — it's the core visual argument\n- Use uppercase with wide letter-spacing (1.4px) for section labels\n- Apply Pale Yellow (#f4f692) for active\u002Fpressed text states\n- Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback\n\n### Don't\n- Don't introduce additional colors — the palette is strictly black, neon, green, and gray\n- Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)\n- Don't reduce display weight below 700 — heavy weight is core to the personality\n- Don't use light\u002Fwhite backgrounds anywhere — the entire experience is dark\n- Don't round corners beyond 8px — the sharp geometry reflects database precision\n- Don't use soft\u002Fdiffused shadows on black — they're invisible. Use border-based depth instead\n- Don't skip the inset shadow on active states — the \"pressed\" effect is distinctive\n- Don't use warm neutrals — all grays are perfectly neutral\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, stacked cards |\n| Small Tablet | 640–768px | Minor adjustments |\n| Tablet | 768–1024px | 2-column grids |\n| Desktop | 1024–1280px | Standard layout |\n| Large Desktop | 1280–1536px | Expanded content |\n| Ultra-wide | 1536–2200px | Maximum container width |\n\n### Touch Targets\n- Buttons with 12px 16px padding minimum\n- Card surfaces as touch targets\n- Adequate nav link spacing\n\n### Collapsing Strategy\n- **Hero text**: 96px → 72px → 48px → 36px\n- **Feature grids**: Multi-column → 2 → 1 column\n- **Stats**: Horizontal → stacked\n- **Navigation**: Full → hamburger\n\n### Image Behavior\n- Product screenshots maintain aspect ratio\n- Code blocks use horizontal scroll on narrow screens\n- All images on dark backgrounds\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Accent: \"Neon Volt (#faff69)\"\n- Page Background: \"Pure Black (#000000)\"\n- CTA Green: \"Forest Green (#166534)\"\n- Card Border: \"Charcoal (rgba(65,65,65,0.8))\"\n- Primary Text: \"Pure White (#ffffff)\"\n- Secondary Text: \"Silver (#a0a0a0)\"\n- Active State: \"Pale Yellow (#f4f692)\"\n- Button Surface: \"Near Black (#141414)\"\n\n### Example Component Prompts\n- \"Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border).\"\n- \"Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border.\"\n- \"Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background.\"\n- \"Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity.\"\n- \"Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background.\"\n\n### Iteration Guide\n1. Keep everything on pure black — no dark gray alternatives\n2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds\n3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body\n4. Active states use Pale Yellow (#f4f692) — not just opacity changes\n5. All links hover to Neon Volt — consistent interactive feedback\n6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: ClickHouse (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* ClickHouse brand tokens *\u002F\n    --color-neon-volt: #faff69;\n    --color-forest-green: #166534;\n    --color-dark-forest: #14572f;\n    --color-pale-yellow: #f4f692;\n    --color-border-olive: #4f5100;\n    --color-olive-dark: #161600;\n    --color-pure-black: #000000;\n    --color-near-black: #141414;\n    --color-charcoal: #414141;\n    --color-deep-charcoal: #343434;\n    --color-hover-gray: #3a3a3a;\n    --color-pure-white: #ffffff;\n    --color-silver: #a0a0a0;\n    --color-mid-gray: #585858;\n    --color-border-gray: #e5e7eb;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    \u002F* Light mode overrides (inverted for catalog viewing) *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #f8f8f8;\n    --bg-nav: rgba(255,255,255,0.95);\n    --text-primary: #000000;\n    --text-secondary: #414141;\n    --text-muted: #a0a0a0;\n    --border-color: #e5e7eb;\n    --border-subtle: #f0f0f0;\n    --section-label-color: #166534;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-body);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .nav-brand .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-neon-volt);\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 900;\n    color: var(--color-pure-black);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.4px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-forest-green); }\n  .nav-cta {\n    background: var(--color-forest-green);\n    color: var(--color-pure-white);\n    padding: 8px 16px;\n    border: 1px solid var(--color-forest-green);\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(250,255,105,0.06) 0%, rgba(22,101,52,0.03) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-body);\n    font-size: 72px;\n    font-weight: 900;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span {\n    background: linear-gradient(135deg, var(--color-forest-green), var(--color-neon-volt));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.56;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n\n  \u002F* BUTTONS *\u002F\n  .btn-neon {\n    background: var(--color-neon-volt);\n    color: #151515;\n    padding: 12px 16px;\n    border: 1px solid var(--color-neon-volt);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-dark {\n    background: var(--color-near-black);\n    color: var(--color-pure-white);\n    padding: 12px 16px;\n    border: 1px solid var(--color-near-black);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-forest {\n    background: var(--color-forest-green);\n    color: var(--color-pure-white);\n    padding: 12px 16px;\n    border: 1px solid var(--color-near-black);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 32px;\n    border: 1px solid var(--color-border-gray);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.4px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.11;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-code);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTON DEMOS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-neon { border: 2px solid var(--color-neon-volt); }\n  .card-inset {\n    border: 1px solid var(--border-color);\n    box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;\n  }\n  .card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-forest-green);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-near-black);\n    border: 1px solid rgba(65,65,65,0.8);\n    border-radius: 4px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-code);\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: var(--color-pure-white);\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-neon-volt); }\n  .code-block .string { color: var(--color-forest-green); }\n  .code-block .comment { color: var(--color-silver); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(250,255,105,0.15);\n    border: 1px solid rgba(250,255,105,0.4);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--border-color); }\n  .elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }\n  .elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }\n  .elevation-neon { border: 2px solid var(--color-neon-volt); }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--color-forest-green);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"icon\">CH\u003C\u002Fspan> ClickHouse\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>ClickHouse\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md — Light mode (inverted)\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-neon\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary — Neon Volt Family\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #faff69;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Neon Volt\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faff69\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Signature brand accent, CTAs, accent borders, link hovers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f4f692;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pale Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f4f692\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed state text color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4f5100;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Olive\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4f5100\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Ghost button borders, muted neon sibling\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #161600; border-bottom: 1px solid #414141;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Olive Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#161600\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darkest neon-tinted color for subtle brand text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">CTA Greens\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #166534;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Forest Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#166534\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary CTA buttons, Get Started actions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #14572f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Forest\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#14572f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darker green for borders and secondary accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #414141;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, maximum contrast canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #141414; border-bottom: 1px solid #414141;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#141414\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, slightly elevated surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3a3a3a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Hover Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3a3a3a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button hover state background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Borders\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a0a0a0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a0a0a0\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text, muted content\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #414141;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#414141\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary border color at 80% opacity\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #343434;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#343434\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darker border variant for subtle division\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e5e7eb; border-bottom: 1px solid #ccc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light border variant for light contexts\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;\">Display Mega\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Mega — 96px \u002F 900 (Black) \u002F 1.00 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 72px \u002F 700 \u002F 1.00 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;\">Feature Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Heading — 36px \u002F 600 \u002F 1.30 \u002F normal — Inter (Basier in production)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;\">Sub-heading Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 24px \u002F 600-700 \u002F 1.17-1.38 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 20px \u002F 600-700 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56;\">Body large for intro paragraphs and button text. Inter provides geometric precision across the entire weight spectrum from 400 to 900.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400-700 \u002F 1.56 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50;\">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400-700 \u002F 1.50 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions and links\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400-700 \u002F 1.43 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-muted);\">UPPERCASE SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Uppercase Label — 14px \u002F 600 \u002F 1.43 \u002F 1.4px \u002F uppercase — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;\">SELECT count() FROM system.query_log\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code — 16px \u002F 600 \u002F 1.50 \u002F normal — Inconsolata\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;\">Small supporting text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — 12px \u002F 500 \u002F 1.33 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-muted);\">MICRO TAG LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Micro — 11.2px \u002F 500 \u002F 1.79 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-neon\">Neon Primary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Neon Volt CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark\">Dark Solid\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-forest\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Forest Green\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: transparent; color: var(--text-primary); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;\">Pill Toggle\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Pill Toggle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">-- ClickHouse query example\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">SELECT\u003C\u002Fspan> count() \u003Cspan class=\"keyword\">FROM\u003C\u002Fspan> system.query_log\u003Cbr>\n    \u003Cspan class=\"keyword\">WHERE\u003C\u002Fspan> type = \u003Cspan class=\"string\">'QueryFinish'\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Charcoal Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-neon\">\n      \u003Cdiv class=\"card-label\" style=\"color: #9a9d00;\">Neon Highlighted\u003C\u002Fdiv>\n      \u003Ch3>Neon Volt Border\u003C\u002Fh3>\n      \u003Cp>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against the dark canvas with the signature yellow-green accent.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-inset\">\n      \u003Cdiv class=\"card-label\">Inset \u002F Pressed\u003C\u002Fdiv>\n      \u003Ch3>Inset Shadow\u003C\u002Fh3>\n      \u003Cp>Card with inset shadow creating a \"pressed into the surface\" effect. Unique to ClickHouse's depth system for active or contained elements.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 18px; height: 18px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 256px; height: 256px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp — buttons, badges, code\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable — cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill — toggles, indicators\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Black background, text blocks, inline content.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid charcoal at 80% opacity. Standard cards and containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-subtle\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle shadow (1px 3px). Soft card lift on the dark canvas.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Medium shadow (10px 15px). Feature cards and hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-pressed\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Pressed \u002F Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset shadow (4px 25px inset). \"Sunk into the surface\" effect, unique to ClickHouse.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-neon\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Neon Highlight\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Neon Volt border (#faff69). Featured\u002Fselected cards, maximum emphasis.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 5\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: ClickHouse (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* ClickHouse brand tokens *\u002F\n    --color-neon-volt: #faff69;\n    --color-forest-green: #166534;\n    --color-dark-forest: #14572f;\n    --color-pale-yellow: #f4f692;\n    --color-border-olive: #4f5100;\n    --color-olive-dark: #161600;\n    --color-pure-black: #000000;\n    --color-near-black: #141414;\n    --color-charcoal: #414141;\n    --color-deep-charcoal: #343434;\n    --color-hover-gray: #3a3a3a;\n    --color-pure-white: #ffffff;\n    --color-silver: #a0a0a0;\n    --color-mid-gray: #585858;\n    --color-border-gray: #e5e7eb;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    \u002F* Dark mode — ClickHouse native *\u002F\n    --bg-page: #000000;\n    --bg-card: transparent;\n    --bg-nav: rgba(0,0,0,0.92);\n    --text-primary: #ffffff;\n    --text-secondary: #a0a0a0;\n    --text-muted: #585858;\n    --border-color: rgba(65,65,65,0.8);\n    --border-subtle: rgba(65,65,65,0.4);\n    --section-label-color: #faff69;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-body);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-neon-volt);\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 900;\n    color: var(--color-pure-black);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.4px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-neon-volt); }\n  .nav-cta {\n    background: var(--color-forest-green);\n    color: var(--color-pure-white);\n    padding: 8px 16px;\n    border: 1px solid var(--color-near-black);\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 800px;\n    height: 800px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, rgba(250,255,105,0.02) 30%, transparent 60%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-body);\n    font-size: 96px;\n    font-weight: 900;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span { color: var(--color-neon-volt); }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.56;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n\n  \u002F* BUTTONS *\u002F\n  .btn-neon {\n    background: var(--color-neon-volt);\n    color: #151515;\n    padding: 0px 16px;\n    border: 1px solid var(--color-neon-volt);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n    line-height: 44px;\n  }\n  .btn-neon:hover { background: rgb(29,29,29); color: var(--color-pure-white); }\n  .btn-neon:active { color: var(--color-pale-yellow); }\n  .btn-dark {\n    background: var(--color-near-black);\n    color: var(--color-pure-white);\n    padding: 12px 16px;\n    border: 1px solid var(--color-near-black);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-dark:hover { background: var(--color-hover-gray); color: rgba(255,255,255,0.8); }\n  .btn-dark:active { color: var(--color-pale-yellow); }\n  .btn-forest {\n    background: var(--color-forest-green);\n    color: var(--color-pure-white);\n    padding: 12px 16px;\n    border: 1px solid var(--color-near-black);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-forest:hover { background: var(--color-hover-gray); }\n  .btn-forest:active { color: var(--color-pale-yellow); }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-pure-white);\n    padding: 0px 32px;\n    border: 1px solid var(--color-border-olive);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n    line-height: 44px;\n  }\n  .btn-ghost:hover { background: rgb(29,29,29); }\n  .btn-ghost:active { color: var(--color-pale-yellow); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.4px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.11;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--color-near-black);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; color: var(--text-primary); }\n  .type-sample-label {\n    font-family: var(--font-code);\n    font-size: 12px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* BUTTON DEMOS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-secondary);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-neon { border: 2px solid var(--color-neon-volt); }\n  .card-inset {\n    border: 1px solid var(--border-color);\n    box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;\n  }\n  .card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; color: var(--text-primary); }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-neon-volt);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-near-black);\n    border: 1px solid var(--border-color);\n    border-radius: 4px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-code);\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: var(--color-pure-white);\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-neon-volt); }\n  .code-block .string { color: #4ade80; }\n  .code-block .comment { color: var(--color-silver); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(250,255,105,0.08);\n    border: 1px solid rgba(250,255,105,0.25);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: transparent;\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--text-secondary);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-secondary);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: transparent;\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--border-color); }\n  .elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }\n  .elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }\n  .elevation-neon { border: 2px solid var(--color-neon-volt); }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-code);\n    font-size: 11px;\n    color: var(--color-neon-volt);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* PERFORMANCE STATS (ClickHouse distinctive) *\u002F\n  .stats-bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 48px;\n    justify-content: center;\n    margin-top: 32px;\n  }\n  .stat-item { text-align: center; }\n  .stat-number {\n    font-family: var(--font-body);\n    font-size: 72px;\n    font-weight: 700;\n    line-height: 1.0;\n    color: var(--text-primary);\n  }\n  .stat-number .accent { color: var(--color-neon-volt); }\n  .stat-desc {\n    font-size: 14px;\n    color: var(--text-secondary);\n    margin-top: 8px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .stats-bar { flex-direction: column; gap: 32px; }\n    .stat-number { font-size: 48px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"icon\">CH\u003C\u002Fspan> ClickHouse\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>ClickHouse\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md — Dark mode (native)\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-neon\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Performance Stats Bar (ClickHouse distinctive) -->\n  \u003Cdiv class=\"stats-bar\">\n    \u003Cdiv class=\"stat-item\">\n      \u003Cdiv class=\"stat-number\">1000\u003Cspan class=\"accent\">x\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cdiv class=\"stat-desc\">Faster than traditional databases\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"stat-item\">\n      \u003Cdiv class=\"stat-number\">\u003Cspan class=\"accent\">100\u003C\u002Fspan>+\u003C\u002Fdiv>\n      \u003Cdiv class=\"stat-desc\">Data formats supported\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"stat-item\">\n      \u003Cdiv class=\"stat-number\">0\u003Cspan class=\"accent\">.\u003C\u002Fspan>1s\u003C\u002Fdiv>\n      \u003Cdiv class=\"stat-desc\">Average query response\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary — Neon Volt Family\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #faff69;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Neon Volt\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faff69\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Signature brand accent, CTAs, accent borders, link hovers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f4f692;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pale Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f4f692\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed state text color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4f5100;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Olive\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4f5100\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Ghost button borders, muted neon sibling\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #161600; border-bottom: 1px solid rgba(65,65,65,0.8);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Olive Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#161600\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darkest neon-tinted color for subtle brand text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">CTA Greens\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #166534;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Forest Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#166534\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary CTA buttons, Get Started actions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #14572f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Forest\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#14572f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darker green for borders and secondary accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border: 1px solid rgba(65,65,65,0.8); border-bottom: none;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, maximum contrast canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #141414; border-bottom: 1px solid rgba(65,65,65,0.8);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#141414\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, slightly elevated surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3a3a3a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Hover Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3a3a3a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button hover state background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Borders\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a0a0a0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a0a0a0\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text, muted content\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #414141;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#414141\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary border color at 80% opacity\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #343434;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#343434\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Darker border variant for subtle division\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #585858;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#585858\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle gray overlay for depth effects (at 28%)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;\">Display Mega\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Mega — 96px \u002F 900 (Black) \u002F 1.00 \u002F normal — Inter — EXTREMELY heavy\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 72px \u002F 700 \u002F 1.00 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;\">Feature Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Heading — 36px \u002F 600 \u002F 1.30 \u002F normal — Inter (Basier in production)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;\">Sub-heading Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 24px \u002F 600-700 \u002F 1.17-1.38 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 20px \u002F 600-700 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56; color: var(--text-secondary);\">Body large for intro paragraphs and button text. Inter provides geometric precision across the full weight spectrum from 400 to 900.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400-700 \u002F 1.56 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary);\">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400-700 \u002F 1.50 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions and links\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400-700 \u002F 1.43 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--color-neon-volt);\">UPPERCASE SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Uppercase Label — 14px \u002F 600 \u002F 1.43 \u002F 1.4px \u002F uppercase — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;\">SELECT count() FROM system.query_log\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code — 16px \u002F 600 \u002F 1.50 \u002F normal — Inconsolata\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;\">Small supporting text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — 12px \u002F 500 \u002F 1.33 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-secondary);\">MICRO TAG LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Micro — 11.2px \u002F 500 \u002F 1.79 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-neon\">Neon Primary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Neon Volt CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark\">Dark Solid\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-forest\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Forest Green\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton style=\"background: transparent; color: var(--color-pure-white); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;\">Pill Toggle\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Pill Toggle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">-- ClickHouse query example\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">SELECT\u003C\u002Fspan> count() \u003Cspan class=\"keyword\">FROM\u003C\u002Fspan> system.query_log\u003Cbr>\n    \u003Cspan class=\"keyword\">WHERE\u003C\u002Fspan> type = \u003Cspan class=\"string\">'QueryFinish'\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Charcoal Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content on the dark canvas.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-neon\">\n      \u003Cdiv class=\"card-label\">Neon Highlighted\u003C\u002Fdiv>\n      \u003Ch3>Neon Volt Border\u003C\u002Fh3>\n      \u003Cp>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against pure black with the signature acid yellow-green accent.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-inset\">\n      \u003Cdiv class=\"card-label\">Inset \u002F Pressed\u003C\u002Fdiv>\n      \u003Ch3>Inset Shadow\u003C\u002Fh3>\n      \u003Cp>Card with inset shadow creating a \"pressed into the surface\" effect. Unique to ClickHouse's depth system for active or contained elements.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 18px; height: 18px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 256px; height: 256px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp — buttons, badges, code\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable — cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill — toggles, indicators\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Pure black background, text blocks, inline content.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid rgba(65,65,65,0.8). Standard cards and containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-subtle\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle shadow (1px 3px). Barely visible on black canvas.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Medium shadow (10px 15px). Feature cards and hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-pressed\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Pressed \u002F Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset shadow (4px 25px inset). \"Sunk into the surface\" — distinctive ClickHouse depth.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-neon\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Neon Highlight\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Neon Volt border (#faff69). Featured\u002Fselected cards, maximum emphasis.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 5\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# ClickHouse Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclickhouse\u002FDESIGN.md) extracted from the public [ClickHouse](https:\u002F\u002Fclickhouse.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fclickhouse\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![ClickHouse Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclickhouse\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![ClickHouse Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fclickhouse\u002Fpreview-screenshot.png)\n",{"slug":66,"name":67,"category":45,"designMd":68,"previewHtml":69,"previewDarkHtml":70,"readme":71},"cohere","Cohere","# Design System Inspiration of Cohere\n\n## 1. Visual Theme & Atmosphere\n\nCohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.\n\nThe design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif\u002Fsans pairing creates a \"confident authority meets engineering clarity\" personality that perfectly reflects an enterprise AI platform.\n\nColor is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.\n\n**Key Characteristics:**\n- Bright white canvas with cool gray containment borders\n- 22px signature border-radius — the distinctive \"Cohere card\" roundness\n- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)\n- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent\n- Deep purple\u002Fviolet hero sections providing dramatic contrast\n- Ghost\u002Ftransparent buttons that shift to blue on hover\n- Enterprise photography showing diverse real-world applications\n- CohereMono for code and technical labels with uppercase transforms\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.\n- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.\n- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.\n\n### Secondary & Accent\n- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.\n- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.\n- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page background and card surface.\n- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.\n- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.\n\n### Neutrals & Text\n- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.\n- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.\n- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.\n\n### Gradient System\n- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.\n- **Dark Footer Gradient**: The page transitions through deep purple\u002Fcharcoal to the black footer, creating a \"dusk\" effect.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`\n- **Body \u002F UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`\n- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`\n- **Icons**: `CohereIconDefault` (custom icon font)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |\n| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |\n| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |\n| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |\n| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |\n| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |\n| Body \u002F Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |\n| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |\n| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |\n| Uppercase Label | Unica77 \u002F CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |\n| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |\n| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |\n\n### Principles\n- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.\n- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.\n- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.\n- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost \u002F Transparent**\n- Background: transparent (`rgba(255, 255, 255, 0)`)\n- Text: Cohere Black (`#000000`)\n- No border visible\n- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8\n- Focus: solid 2px outline in Interaction Blue\n- The primary button style — invisible until interacted with\n\n**Dark Solid**\n- Background: dark\u002Fblack\n- Text: Pure White\n- For CTA on light surfaces\n- Pill-shaped or standard radius\n\n**Outlined**\n- Border-based containment\n- Used in secondary actions\n\n### Cards & Containers\n- Background: Pure White (`#ffffff`)\n- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized\n- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements\n- Shadow: minimal — Cohere relies on background color and borders rather than shadows\n- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers\n- Dialog: 8px radius for modal\u002Fdialog boxes\n\n### Inputs & Forms\n- Text: white on dark input, black on light\n- Focus border: Focus Purple (`#9b60aa`) with `1px solid`\n- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication\n- Focus outline: Interaction Blue solid 2px\n\n### Navigation\n- Clean horizontal nav on white or dark background\n- Logo: Cohere wordmark (custom SVG)\n- Links: Dark text at 16px Unica77\n- CTA: Dark solid button\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Enterprise photography with diverse subjects and environments\n- Purple-tinted hero photography for dramatic sections\n- Product UI screenshots on dark surfaces\n- Images with 22px radius matching card system\n- Full-bleed purple gradient sections\n\n### Distinctive Components\n\n**22px Card System**\n- The 22px border-radius is Cohere's visual signature\n- All primary cards, images, and containers use this radius\n- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px\n\n**Enterprise Trust Bar**\n- Company logos displayed in a horizontal strip\n- Demonstrates enterprise adoption\n- Clean, monochrome logo treatment\n\n**Purple Hero Bands**\n- Full-width deep purple sections housing product showcases\n- Create dramatic visual breaks in the white page flow\n- Product screenshots float within the purple environment\n\n**Uppercase Code Tags**\n- CohereMono in uppercase with letter-spacing\n- Used as section markers and categorization labels\n- Creates a technical, structured information hierarchy\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px\n- Button padding varies by variant\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (56–60px between sections)\n\n### Grid & Container\n- Max container width: up to 2560px (very wide) with responsive scaling\n- Hero: centered with dramatic typography\n- Feature sections: multi-column card grids\n- Enterprise sections: full-width purple bands\n- 26 breakpoints detected — extremely granular responsive system\n\n### Whitespace Philosophy\n- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.\n- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.\n- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.\n\n### Border Radius Scale\n- Sharp (4px): Navigation elements, small tags, pagination\n- Comfortable (8px): Dialog boxes, secondary containers, small cards\n- Generous (16px): Featured containers, medium cards\n- Large (20px): Large feature cards\n- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius\n- Pill (9999px): Buttons, tags, status indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |\n| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |\n\n**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow), **border containment** (cool gray borders), and the dramatic **light-to-dark section alternation**. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use 22px border-radius on all primary cards and containers — it's the visual signature\n- Use CohereText for display headings (72px, 60px) with negative letter-spacing\n- Use Unica77 for all body and UI text at weight 400\n- Keep the palette black-and-white with cool gray borders\n- Use Interaction Blue (#1863dc) only for hover\u002Ffocus interactive states\n- Use deep purple sections for dramatic visual breaks and product showcases\n- Apply uppercase + letter-spacing on CohereMono for section labels\n- Maintain enterprise-appropriate photography with diverse subjects\n\n### Don't\n- Don't use border-radius other than 22px on primary cards — the signature radius matters\n- Don't introduce warm colors — the palette is strictly cool-toned\n- Don't use heavy shadows — depth comes from color contrast and borders\n- Don't use bold (700+) weight on body text — 400–500 is the range\n- Don't skip the serif\u002Fsans hierarchy — CohereText for headlines, Unica77 for body\n- Don't use purple as a surface color for cards — purple is reserved for full-width sections\n- Don't reduce section spacing below 40px — enterprise layouts need breathing room\n- Don't use decoration on buttons by default — ghost\u002Ftransparent is the base state\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | \u003C425px | Compact layout, minimal spacing |\n| Mobile | 425–640px | Single column, stacked cards |\n| Large Mobile | 640–768px | Minor spacing adjustments |\n| Tablet | 768–1024px | 2-column grids begin |\n| Desktop | 1024–1440px | Full multi-column layout |\n| Large Desktop | 1440–2560px | Maximum container width |\n\n*26 breakpoints detected — one of the most granularly responsive sites in the dataset.*\n\n### Touch Targets\n- Buttons adequately sized for touch interaction\n- Navigation links with comfortable spacing\n- Card surfaces as touch targets\n\n### Collapsing Strategy\n- **Navigation**: Full nav collapses to hamburger\n- **Feature grids**: Multi-column → 2-column → single column\n- **Hero text**: 72px → 48px → 32px progressive scaling\n- **Purple sections**: Maintain full-width, content stacks\n- **Card grids**: 3 → 2 → 1 column\n\n### Image Behavior\n- Photography scales proportionally within 22px-radius containers\n- Product screenshots maintain aspect ratio\n- Purple sections scale background proportionally\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Cohere Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Secondary Text: \"Near Black (#212121)\"\n- Hover Accent: \"Interaction Blue (#1863dc)\"\n- Muted Text: \"Muted Slate (#93939f)\"\n- Card Borders: \"Lightest Gray (#f2f2f2)\"\n- Section Borders: \"Border Cool (#d9d9dd)\"\n\n### Example Component Prompts\n- \"Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4.\"\n- \"Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f).\"\n- \"Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.\"\n- \"Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius.\"\n- \"Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Always use 22px radius for primary cards — \"the Cohere card roundness\"\n3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels\n4. Interactive elements use Interaction Blue (#1863dc) on hover only\n5. Keep surfaces white with cool gray borders — no warm tones\n6. Purple is for full-width sections, never card backgrounds\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Cohere (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-black: #000000;\n    --color-near-black: #212121;\n    --color-deep-dark: #17171c;\n    \u002F* Accent *\u002F\n    --color-interaction-blue: #1863dc;\n    --color-ring-blue: rgba(76, 110, 230, 0.5);\n    --color-focus-purple: #9b60aa;\n    \u002F* Surface *\u002F\n    --color-white: #ffffff;\n    --color-snow: #fafafa;\n    --color-lightest-gray: #f2f2f2;\n    \u002F* Neutrals *\u002F\n    --color-muted-slate: #93939f;\n    --color-border-cool: #d9d9dd;\n    --color-border-light: #e5e7eb;\n    \u002F* Fonts *\u002F\n    --font-display: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;\n    --font-body: Inter, Arial, ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'Space Mono', Arial, ui-sans-serif, system-ui, monospace;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-nav: rgba(255, 255, 255, 0.95);\n    --text-primary: #000000;\n    --text-secondary: #212121;\n    --text-muted: #93939f;\n    --border-color: #d9d9dd;\n    --border-subtle: #f2f2f2;\n    --section-label-color: #93939f;\n    --accent: #1863dc;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    font-weight: 400;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 400;\n    letter-spacing: -0.4px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--text-primary);\n  }\n  .nav-brand svg { width: 28px; height: 28px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    font-family: var(--font-body);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 72px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.44px;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero h1 span { color: var(--accent); }\n  .hero p {\n    color: var(--text-muted);\n    font-family: var(--font-body);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.4;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n  .btn-ghost-primary {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: none;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: color 0.2s, opacity 0.2s;\n  }\n  .btn-ghost-primary:hover { color: var(--accent); opacity: 0.8; }\n  .btn-dark-solid {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-dark-solid:hover { opacity: 0.85; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 48px;\n    font-weight: 400;\n    line-height: 1.2;\n    letter-spacing: -0.48px;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* PURPLE BAND *\u002F\n  .purple-band {\n    background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 50%, #17171c 100%);\n    padding: 80px 40px;\n    text-align: center;\n  }\n  .purple-band h2 {\n    font-family: var(--font-display);\n    font-size: 60px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.2px;\n    color: #ffffff;\n    margin-bottom: 16px;\n  }\n  .purple-band p {\n    color: rgba(255,255,255,0.7);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.4;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-body);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 22px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px 16px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n  }\n  .btn-ghost-cohere {\n    background: transparent;\n    color: var(--color-black);\n    padding: 12px 24px;\n    border: none;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: color 0.2s, opacity 0.2s;\n  }\n  .btn-ghost-cohere:hover { color: var(--accent); opacity: 0.8; }\n  .btn-dark-cohere {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 22px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n  .btn-dark-pill {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-outlined {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 22px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: border-color 0.2s, color 0.2s;\n  }\n  .btn-outlined:hover { border-color: var(--accent); color: var(--accent); }\n  .btn-ghost-focus:focus {\n    outline: 2px solid var(--accent);\n    outline-offset: 2px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    padding: 28px;\n  }\n  .card-signature {\n    border-radius: 22px;\n    border: 1px solid var(--color-lightest-gray);\n  }\n  .card-dialog {\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n  }\n  .card-generous {\n    border-radius: 16px;\n    border: 1px solid var(--color-lightest-gray);\n  }\n  .card h3 {\n    font-family: var(--font-body);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.3;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-muted); font-size: 16px; line-height: 1.5; font-weight: 400; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(24, 99, 220, 0.08);\n    border: 1px solid rgba(24, 99, 220, 0.2);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--color-snow);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 22px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered-light { border: 1px solid var(--color-lightest-gray); }\n  .elevation-bordered-cool { border: 1px solid var(--border-color); }\n  .elevation-purple-band {\n    background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 100%);\n    color: #ffffff;\n  }\n  .elevation-purple-band .elevation-name,\n  .elevation-purple-band .elevation-desc { color: #ffffff; }\n  .elevation-purple-band .elevation-level { color: rgba(255,255,255,0.6); }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 42px; letter-spacing: -0.84px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 32px; letter-spacing: -0.32px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .purple-band h2 { font-size: 36px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Ccircle cx=\"14\" cy=\"14\" r=\"13\" stroke=\"currentColor\" stroke-width=\"2\"\u002F>\n      \u003Cpath d=\"M8 14 C8 10, 12 8, 14 8 C16 8, 20 10, 20 14 C20 18, 16 20, 14 20 C12 20, 8 18, 8 14Z\" fill=\"currentColor\" opacity=\"0.15\"\u002F>\n      \u003Ccircle cx=\"14\" cy=\"14\" r=\"4\" fill=\"currentColor\"\u002F>\n    \u003C\u002Fsvg>\n    cohere\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Cohere\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-dark-solid\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost-primary\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cohere Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headline text, maximum emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #212121; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#212121\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard body link color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #17171c; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#17171c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Navigation and dark-section text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1863dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Interaction Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1863dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hover, focus states, active links\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(76,110,230,0.5);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4c6ee6 @ 50%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Keyboard focus indicators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #9b60aa;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Focus Purple\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#9b60aa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Input focus border color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, card surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Snow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle elevated surfaces, light sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f2f2f2; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Lightest Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, softest containment\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #93939f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#93939f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Footer links, tertiary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d9d9dd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Cool\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d9d9dd\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Section borders, list separators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lighter border variant (gray-200)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- PURPLE HERO BAND -->\n\u003Cdiv class=\"purple-band\">\n  \u003Ch2>Enterprise AI Platform\u003C\u002Fh2>\n  \u003Cp>Deep purple hero sections create dramatic visual breaks in the white page flow\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -1.44px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — CohereText — 72px \u002F 400 \u002F 1.00 \u002F -1.44px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;\">Display Secondary\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Secondary — CohereText — 60px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.48px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — Unica77 — 48px \u002F 400 \u002F 1.20 \u002F -0.48px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — Unica77 — 32px \u002F 400 \u002F 1.20 \u002F -0.32px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.3;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — Unica77 — 24px \u002F 400 \u002F 1.30 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.4;\">Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — Unica77 — 18px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;\">Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — Unica77 — 16px \u002F 400 \u002F 1.50 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.71;\">Button Medium Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Button Medium — Unica77 — 14px \u002F 500 \u002F 1.71 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-muted);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — Unica77 — 14px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.28px; color: var(--text-muted);\">UPPERCASE SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Uppercase Label — CohereMono — 14px \u002F 400 \u002F 1.40 \u002F 0.28px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted);\">Smallest text for footer links and fine print\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — Unica77 — 12px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 8px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16px; color: var(--text-muted);\">CODE MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Micro — CohereMono — 8px \u002F 400 \u002F 1.40 \u002F 0.16px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-cohere\">Ghost Button\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Transparent\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-cohere\">Dark Solid\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Solid (22px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-pill\">Pill CTA\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Pill (9999px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-outlined\">Outlined\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outlined (22px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cp style=\"color: var(--text-muted); margin-top: 32px; font-size: 14px;\">\n    Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.\n  \u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-signature\">\n      \u003Cdiv class=\"card-label\">STANDARD CARD\u003C\u002Fdiv>\n      \u003Ch3>Signature 22px Radius\u003C\u002Fh3>\n      \u003Cp>The distinctive Cohere card with 22px border-radius and 1px solid #f2f2f2 border. Creates cloud-like, organic softness on the white canvas.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dialog\">\n      \u003Cdiv class=\"card-label\">DIALOG CARD\u003C\u002Fdiv>\n      \u003Ch3>Dialog 8px Radius\u003C\u002Fh3>\n      \u003Cp>Modal and dialog containers use a tighter 8px radius with #d9d9dd border. Functional, secondary containment for transient UI.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-generous\">\n      \u003Cdiv class=\"card-label\">GENEROUS CARD\u003C\u002Fdiv>\n      \u003Ch3>Featured 16px Radius\u003C\u002Fh3>\n      \u003Cp>Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle #f2f2f2 border.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">Base unit: 8px. Scale from 2px to 60px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 18px; height: 18px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 30px; height: 30px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 36px; height: 36px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 60px; height: 60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 66px; height: 66px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">22px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 84px; height: 84px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 168px; height: 168px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">56px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 180px; height: 180px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">60px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp — nav, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable — dialogs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generous — featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large — feature cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 22px; border-color: var(--accent); border-width: 2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">22px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Signature — THE radius\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill — buttons, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered-light\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered (Light)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #f2f2f2. Standard cards, subtle containment.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — Lightest Gray\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered-cool\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered (Cool)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #d9d9dd. Emphasized cards, list separators.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — Border Cool\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-purple-band\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Purple Band\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-width dark purple background. Hero sections, showcases.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2 — Dramatic\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cp style=\"color: var(--text-muted); margin-top: 32px; font-size: 14px; line-height: 1.6;\">\n    Cohere is nearly shadow-free. Depth is communicated through background color contrast (white cards on purple bands), border containment (cool gray borders), and dramatic light-to-dark section alternation.\n  \u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Cohere (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-black: #000000;\n    --color-near-black: #212121;\n    --color-deep-dark: #17171c;\n    \u002F* Accent *\u002F\n    --color-interaction-blue: #1863dc;\n    --color-ring-blue: rgba(76, 110, 230, 0.5);\n    --color-focus-purple: #9b60aa;\n    \u002F* Surface *\u002F\n    --color-white: #ffffff;\n    --color-snow: #fafafa;\n    --color-lightest-gray: #f2f2f2;\n    \u002F* Neutrals *\u002F\n    --color-muted-slate: #93939f;\n    --color-border-cool: #d9d9dd;\n    --color-border-light: #e5e7eb;\n    \u002F* Fonts *\u002F\n    --font-display: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;\n    --font-body: Inter, Arial, ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'Space Mono', Arial, ui-sans-serif, system-ui, monospace;\n    \u002F* Dark mode tokens *\u002F\n    --bg-page: #17171c;\n    --bg-card: #212121;\n    --bg-nav: rgba(23, 23, 28, 0.95);\n    --text-primary: #fafafa;\n    --text-secondary: #d9d9dd;\n    --text-muted: #93939f;\n    --border-color: #333333;\n    --border-subtle: #2a2a2f;\n    --section-label-color: #93939f;\n    --accent: #1863dc;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    font-weight: 400;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 400;\n    letter-spacing: -0.4px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--text-primary);\n  }\n  .nav-brand svg { width: 28px; height: 28px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    font-family: var(--font-body);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 72px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.44px;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero h1 span { color: var(--accent); }\n  .hero p {\n    color: var(--text-muted);\n    font-family: var(--font-body);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.4;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n  .btn-ghost-primary {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: none;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: color 0.2s, opacity 0.2s;\n  }\n  .btn-ghost-primary:hover { color: var(--accent); opacity: 0.8; }\n  .btn-light-solid {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-light-solid:hover { opacity: 0.85; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 48px;\n    font-weight: 400;\n    line-height: 1.2;\n    letter-spacing: -0.48px;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* PURPLE BAND *\u002F\n  .purple-band {\n    background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 50%, #0d0a1a 100%);\n    padding: 80px 40px;\n    text-align: center;\n  }\n  .purple-band h2 {\n    font-family: var(--font-display);\n    font-size: 60px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.2px;\n    color: #ffffff;\n    margin-bottom: 16px;\n  }\n  .purple-band p {\n    color: rgba(255,255,255,0.7);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.4;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-body);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 22px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px 16px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n  }\n  .btn-ghost-cohere {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: none;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: color 0.2s, opacity 0.2s;\n  }\n  .btn-ghost-cohere:hover { color: var(--accent); opacity: 0.8; }\n  .btn-light-cohere {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 22px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n  .btn-light-pill {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-outlined {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 22px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    transition: border-color 0.2s, color 0.2s;\n  }\n  .btn-outlined:hover { border-color: var(--accent); color: var(--accent); }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    padding: 28px;\n  }\n  .card-signature {\n    border-radius: 22px;\n    border: 1px solid var(--border-color);\n  }\n  .card-dialog {\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n  }\n  .card-generous {\n    border-radius: 16px;\n    border: 1px solid var(--border-color);\n  }\n  .card h3 {\n    font-family: var(--font-body);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.3;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-muted); font-size: 16px; line-height: 1.5; font-weight: 400; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(24, 99, 220, 0.15);\n    border: 1px solid rgba(24, 99, 220, 0.3);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 22px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered-light { border: 1px solid var(--border-subtle); }\n  .elevation-bordered-cool { border: 1px solid var(--border-color); }\n  .elevation-purple-band {\n    background: linear-gradient(135deg, #2d1b4e 0%, #1a1040 100%);\n    color: #ffffff;\n  }\n  .elevation-purple-band .elevation-name,\n  .elevation-purple-band .elevation-desc { color: #ffffff; }\n  .elevation-purple-band .elevation-level { color: rgba(255,255,255,0.6); }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.28px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 42px; letter-spacing: -0.84px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 32px; letter-spacing: -0.32px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .purple-band h2 { font-size: 36px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Ccircle cx=\"14\" cy=\"14\" r=\"13\" stroke=\"currentColor\" stroke-width=\"2\"\u002F>\n      \u003Cpath d=\"M8 14 C8 10, 12 8, 14 8 C16 8, 20 10, 20 14 C20 18, 16 20, 14 20 C12 20, 8 18, 8 14Z\" fill=\"currentColor\" opacity=\"0.15\"\u002F>\n      \u003Ccircle cx=\"14\" cy=\"14\" r=\"4\" fill=\"currentColor\"\u002F>\n    \u003C\u002Fsvg>\n    cohere\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Cohere\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-light-solid\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost-primary\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cohere Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headline text, maximum emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #212121; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#212121\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard body link color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #17171c; border-bottom: 1px solid #333;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#17171c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Navigation and dark-section text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1863dc;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Interaction Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1863dc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hover, focus states, active links\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(76,110,230,0.5);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ring Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4c6ee6 @ 50%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Keyboard focus indicators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #9b60aa;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Focus Purple\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#9b60aa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Input focus border color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, card surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Snow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle elevated surfaces, light sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f2f2f2; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Lightest Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, softest containment\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #93939f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#93939f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Footer links, tertiary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d9d9dd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Cool\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d9d9dd\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Section borders, list separators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e5e7eb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lighter border variant (gray-200)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- PURPLE HERO BAND -->\n\u003Cdiv class=\"purple-band\">\n  \u003Ch2>Enterprise AI Platform\u003C\u002Fh2>\n  \u003Cp>Deep purple hero sections create dramatic visual breaks in the dark page flow\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -1.44px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — CohereText — 72px \u002F 400 \u002F 1.00 \u002F -1.44px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;\">Display Secondary\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Secondary — CohereText — 60px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.48px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — Unica77 — 48px \u002F 400 \u002F 1.20 \u002F -0.48px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — Unica77 — 32px \u002F 400 \u002F 1.20 \u002F -0.32px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.3;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — Unica77 — 24px \u002F 400 \u002F 1.30 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.4;\">Body Large text for intro paragraphs. Unica77 provides geometric Swiss precision for all functional UI text at the body-large tier.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — Unica77 — 18px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;\">Standard body text for paragraphs, navigation links, and button labels. Unica77 at its most common size, weight 400.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — Unica77 — 16px \u002F 400 \u002F 1.50 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.71;\">Button Medium Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Button Medium — Unica77 — 14px \u002F 500 \u002F 1.71 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-muted);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — Unica77 — 14px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.28px; color: var(--text-muted);\">UPPERCASE SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Uppercase Label — CohereMono — 14px \u002F 400 \u002F 1.40 \u002F 0.28px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted);\">Smallest text for footer links and fine print\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — Unica77 — 12px \u002F 400 \u002F 1.40 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 8px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16px; color: var(--text-muted);\">CODE MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Micro — CohereMono — 8px \u002F 400 \u002F 1.40 \u002F 0.16px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-cohere\">Ghost Button\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Transparent\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-light-cohere\">Light Solid\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Light Solid (22px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-light-pill\">Pill CTA\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Light Pill (9999px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-outlined\">Outlined\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outlined (22px)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cp style=\"color: var(--text-muted); margin-top: 32px; font-size: 14px;\">\n    Ghost buttons are the primary style — invisible until interacted with. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.\n  \u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-signature\">\n      \u003Cdiv class=\"card-label\">STANDARD CARD\u003C\u002Fdiv>\n      \u003Ch3>Signature 22px Radius\u003C\u002Fh3>\n      \u003Cp>The distinctive Cohere card with 22px border-radius and #333 border on dark surfaces. Creates cloud-like, organic softness on the dark canvas.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dialog\">\n      \u003Cdiv class=\"card-label\">DIALOG CARD\u003C\u002Fdiv>\n      \u003Ch3>Dialog 8px Radius\u003C\u002Fh3>\n      \u003Cp>Modal and dialog containers use a tighter 8px radius with #333 border. Functional, secondary containment for transient UI.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-generous\">\n      \u003Cdiv class=\"card-label\">GENEROUS CARD\u003C\u002Fdiv>\n      \u003Ch3>Featured 16px Radius\u003C\u002Fh3>\n      \u003Cp>Medium-sized containers for featured content. Uses 16px radius as a middle step in the radius scale with subtle border.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">Base unit: 8px. Scale from 2px to 60px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 18px; height: 18px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 30px; height: 30px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 36px; height: 36px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 60px; height: 60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 66px; height: 66px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">22px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 84px; height: 84px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 168px; height: 168px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">56px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 180px; height: 180px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">60px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp — nav, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable — dialogs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generous — featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large — feature cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 22px; border-color: var(--accent); border-width: 2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">22px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Signature — THE radius\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill — buttons, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered-light\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered (Subtle)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #2a2a2f. Subtle dark containment lines.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — Subtle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered-cool\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered (Standard)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #333. Standard dark-mode card borders.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — Standard\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-purple-band\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Purple Band\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-width dark purple background. Hero sections, showcases.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2 — Dramatic\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cp style=\"color: var(--text-muted); margin-top: 32px; font-size: 14px; line-height: 1.6;\">\n    Cohere is nearly shadow-free. Depth is communicated through background color contrast (elevated cards on dark canvas), border containment, and dramatic light-to-dark section alternation.\n  \u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Cohere Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcohere\u002FDESIGN.md) extracted from the public [Cohere](https:\u002F\u002Fcohere.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcohere\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cohere Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcohere\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Cohere Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcohere\u002Fpreview-screenshot.png)\n",{"slug":73,"name":74,"category":75,"designMd":76,"previewHtml":77,"previewDarkHtml":78,"readme":79},"coinbase","Coinbase","Fintech & Crypto","# Design System Inspiration of Coinbase\n\n## 1. Visual Theme & Atmosphere\n\nCoinbase'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.\n\nThe 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.\n\n**Key Characteristics:**\n- Coinbase Blue (`#0052ff`) as singular brand accent\n- Four-font proprietary family: Display, Sans, Text, Icons\n- 56px radius pill buttons with blue hover transition\n- Near-black (`#0a0b0d`) dark sections + white light sections\n- 1.00 line-height on display headings — ultra-tight\n- Cool gray secondary surface (`#eef0f3`) with blue tint\n- `text-transform: lowercase` on some button labels — unusual\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders\n- **Pure White** (`#ffffff`): Primary light surface\n- **Near Black** (`#0a0b0d`): Text, dark section backgrounds\n- **Cool Gray Surface** (`#eef0f3`): Secondary button background\n\n### Interactive\n- **Hover Blue** (`#578bfa`): Button hover background\n- **Link Blue** (`#0667d0`): Secondary link color\n- **Muted Blue** (`#5b616e`): Border color at 20% opacity\n\n### Surface\n- **Dark Card** (`#282b31`): Dark button\u002Fcard backgrounds\n- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `CoinbaseDisplay` — hero headlines\n- **UI \u002F Sans**: `CoinbaseSans` — buttons, headings, nav\n- **Body**: `CoinbaseText` — reading text\n- **Icons**: `CoinbaseIcons` — icon font\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |\n| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |\n| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |\n| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |\n| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |\n| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |\n| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |\n| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |\n| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |\n| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |\n| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |\n| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |\n| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Pill (56px radius)**\n- Background: `#eef0f3` or `#282b31`\n- Radius: 56px\n- Border: `1px solid` matching background\n- Hover: `#578bfa` (light blue)\n- Focus: `2px solid black` outline\n\n**Full Pill (100000px radius)**\n- Used for maximum pill shape\n\n**Blue Bordered**\n- Border: `1px solid #0052ff`\n- Background: transparent\n\n### Cards & Containers\n- Radius: 8px–40px range\n- Borders: `1px solid rgba(91,97,110,0.2)`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base: 8px\n- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px\n\n### Border Radius Scale\n- Small (4px–8px): Article links, small cards\n- Standard (12px–16px): Cards, menus\n- Large (24px–32px): Feature containers\n- XL (40px): Large buttons\u002Fcontainers\n- Pill (56px): Primary CTAs\n- Full (100000px): Maximum pill\n\n## 6. Depth & Elevation\n\nMinimal shadow system — depth from color contrast between dark\u002Flight sections.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Coinbase Blue (#0052ff) for primary interactive elements\n- Apply 56px radius for all CTA buttons\n- Use CoinbaseDisplay for hero headings only\n- Alternate dark (#0a0b0d) and white sections\n\n### Don't\n- Don't use the blue decoratively — it's functional only\n- Don't use sharp corners on CTAs — 56px minimum\n\n## 8. Responsive Behavior\n\nBreakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Coinbase Blue (`#0052ff`)\n- Background: White (`#ffffff`)\n- Dark surface: `#0a0b0d`\n- Secondary surface: `#eef0f3`\n- Hover: `#578bfa`\n- Text: `#0a0b0d`\n\n### Example Component Prompts\n- \"Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa.\"\n- \"Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff).\"\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Coinbase (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#fff; --black:#0a0b0d; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#eef0f3; --dark:#282b31; --muted:#5b616e; --font:'Inter',system-ui,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n  .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); }\n  .nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }\n  .nav-links a:hover { color:var(--black); }\n  .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; }\n\n  .hero { padding:80px 24px; text-align:center; }\n  .hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .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; }\n  .btn-blue:hover { background:var(--hover-blue); }\n  .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; }\n  .btn-gray:hover { background:var(--hover-blue); color:var(--black); }\n  .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; }\n  .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; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:48px 24px; background:var(--black); color:var(--white); }\n  .section-dark .inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--gray-surface); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--muted); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }\n  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--muted); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .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; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }\n  .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; }\n  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }\n  .footer a { color:var(--blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Coinbase\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with crypto-grade precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Get Started\u003C\u002Fa>\u003Ca class=\"btn-gray\" href=\"#\">Learn More\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0052ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Coinbase Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0052ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary brand\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#578bfa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Hover Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#578bfa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eef0f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eef0f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0a0b0d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0a0b0d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#282b31\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Card\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#282b31\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b616e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b616e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:400; line-height:1.00;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseDisplay — 80px \u002F 400 \u002F 1.00\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:400; line-height:1.11;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 36px \u002F 400 \u002F 1.11\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.33;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 18px \u002F 600 \u002F 1.33\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv 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.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseText — 18px \u002F 400 \u002F 1.56\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 16px \u002F 600 \u002F 1.20 \u002F +0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign Up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-gray\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Gray Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Details\u003C\u002Fa>\u003Cdiv class=\"button-label\">Blue Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\u003Cdiv class=\"inner\" id=\"cards\">\u003Cdiv class=\"section-label\" style=\"color:rgba(255,255,255,0.5);\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Bitcoin (BTC)\u003C\u002Fh3>\u003Cp>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Ethereum (ETH)\u003C\u002Fh3>\u003Cp>Smart contracts and dApps. The second-largest crypto by market cap.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>USDC\u003C\u002Fh3>\u003Cp>A dollar-backed stablecoin. The digital dollar for the global crypto economy.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@email.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"0.5 BTC\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:56px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">56px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fcoinbase.com\u002F\">coinbase.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Coinbase (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#0a0b0d; --black:#eef0f3; --blue:#0052ff; --hover-blue:#578bfa; --gray-surface:#1a1c20; --dark:#282b31; --muted:#8a8f99; --font:'Inter',system-ui,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n  .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; }\n  .nav-brand { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }\n  .nav-links a:hover { color:var(--black); }\n  .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; }\n\n  .hero { padding:80px 24px; text-align:center; }\n  .hero h1 { font-size:64px; font-weight:400; line-height:1.00; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:18px; color:var(--muted); max-width:500px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .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; }\n  .btn-blue:hover { background:var(--hover-blue); }\n  .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; }\n  .btn-gray:hover { background:var(--hover-blue); color:var(--black); }\n  .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; }\n  .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; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:48px 24px; background:var(--black); color:var(--white); }\n  .section-dark .inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:400; line-height:1.11; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--gray-surface); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--gray-surface); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--muted); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--muted); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #1a1c20; }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--muted); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid rgba(91,97,110,0.2); border-radius:16px; padding:20px; }\n  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--muted); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .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; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }\n  .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; }\n  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--gray-surface); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--gray-surface); border-radius:16px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--muted); font-size:12px; }\n  .footer a { color:var(--blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv 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\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Coinbase\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with crypto-grade precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Get Started\u003C\u002Fa>\u003Ca class=\"btn-gray\" href=\"#\">Learn More\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0052ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Coinbase Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0052ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary brand\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#578bfa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Hover Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#578bfa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eef0f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eef0f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0a0b0d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0a0b0d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#282b31\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Card\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#282b31\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b616e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b616e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:400; line-height:1.00;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseDisplay — 80px \u002F 400 \u002F 1.00\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:400; line-height:1.11;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 36px \u002F 400 \u002F 1.11\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.33;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 18px \u002F 600 \u002F 1.33\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv 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.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseText — 18px \u002F 400 \u002F 1.56\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.20; letter-spacing:0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CoinbaseSans — 16px \u002F 600 \u002F 1.20 \u002F +0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign Up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-gray\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Gray Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Details\u003C\u002Fa>\u003Cdiv class=\"button-label\">Blue Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\u003Cdiv class=\"inner\" id=\"cards\">\u003Cdiv class=\"section-label\" style=\"color:rgba(255,255,255,0.5);\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Bitcoin (BTC)\u003C\u002Fh3>\u003Cp>The original cryptocurrency. Buy, sell, and send Bitcoin from your Coinbase account.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Ethereum (ETH)\u003C\u002Fh3>\u003Cp>Smart contracts and dApps. The second-largest crypto by market cap.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>USDC\u003C\u002Fh3>\u003Cp>A dollar-backed stablecoin. The digital dollar for the global crypto economy.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@email.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"0.5 BTC\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:56px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">56px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fcoinbase.com\u002F\">coinbase.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Coinbase Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcoinbase\u002FDESIGN.md) extracted from the public [Coinbase](https:\u002F\u002Fcoinbase.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcoinbase\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Coinbase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Coinbase Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcoinbase\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Coinbase Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcoinbase\u002Fpreview-screenshot.png)\n",{"slug":81,"name":82,"category":60,"designMd":83,"previewHtml":84,"previewDarkHtml":85,"readme":86},"composio","Composio","# Design System Inspiration of Composio\n\n## 1. Visual Theme & Atmosphere\n\nComposio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black canvas (`#0f0f0f`) where content floats within barely-visible containment borders, creating the feeling of a high-tech control panel rather than a traditional marketing page. It's a site that whispers authority to developers who live in dark terminals.\n\nThe visual language leans heavily into the aesthetic of code editors and terminal windows. JetBrains Mono appears alongside the geometric precision of abcDiatype, reinforcing the message that this is a tool built *by* developers *for* developers. Decorative elements are restrained but impactful — subtle cyan-blue gradient glows emanate from cards and sections like bioluminescent organisms in deep water, while hard-offset shadows (`4px 4px`) on select elements add a raw, brutalist edge that prevents the design from feeling sterile.\n\nWhat makes Composio distinctive is its tension between extreme minimalism and strategic bursts of luminous color. The site never shouts — headings use tight line-heights (0.87) that compress text into dense, authoritative blocks. Color is rationed like a rare resource: white text for primary content, semi-transparent white (`rgba(255,255,255,0.5-0.6)`) for secondary, and brand blue (`#0007cd`) or electric cyan (`#00ffff`) reserved exclusively for interactive moments and accent glows.\n\n**Key Characteristics:**\n- Pitch-black canvas with near-invisible white-border containment (4-12% opacity)\n- Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace (JetBrains Mono) for technical credibility\n- Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful text blocks\n- Bioluminescent accent strategy — cyan and blue glows that feel like they're emitting light from within\n- Hard-offset brutalist shadows (`4px 4px`) on select interactive elements\n- Monochrome hierarchy with color used only at the highest-signal moments\n- Developer-terminal aesthetic that bridges marketing and documentation\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Composio Cobalt** (`#0007cd`): The core brand color — a deep, saturated blue used sparingly for high-priority interactive elements and brand moments. It anchors the identity with quiet intensity.\n\n### Secondary & Accent\n- **Electric Cyan** (`#00ffff`): The attention-grabbing accent — used at low opacity (`rgba(0,255,255,0.12)`) for glowing button backgrounds and card highlights. At full saturation, it serves as the energetic counterpoint to the dark canvas.\n- **Signal Blue** (`#0089ff` \u002F `rgb(0,137,255)`): Used for select button borders and interactive focus states, bridging the gap between Cobalt and Cyan.\n- **Ocean Blue** (`#0096ff` \u002F `rgb(0,150,255)`): Accent border color on CTA buttons, slightly warmer than Signal Blue.\n\n### Surface & Background\n- **Void Black** (`#0f0f0f`): The primary page background — not pure black, but a hair warmer, reducing eye strain on dark displays.\n- **Pure Black** (`#000000`): Used for card interiors and deep-nested containers, creating a subtle depth distinction from the page background.\n- **Charcoal** (`#2c2c2c` \u002F `rgb(44,44,44)`): Used for secondary button borders and divider lines on dark surfaces.\n\n### Neutrals & Text\n- **Pure White** (`#ffffff`): Primary heading and high-emphasis text color on dark surfaces.\n- **Muted Smoke** (`#444444`): De-emphasized body text, metadata, and tertiary content.\n- **Ghost White** (`rgba(255,255,255,0.6)`): Secondary body text and link labels — visible but deliberately receded.\n- **Whisper White** (`rgba(255,255,255,0.5)`): Tertiary button text and placeholder content.\n- **Phantom White** (`rgba(255,255,255,0.2)`): Subtle button backgrounds and deeply receded UI chrome.\n\n### Semantic & Accent\n- **Border Mist 12** (`rgba(255,255,255,0.12)`): Highest-opacity border treatment — used for prominent card edges and content separators.\n- **Border Mist 10** (`rgba(255,255,255,0.10)`): Standard container borders on dark surfaces.\n- **Border Mist 08** (`rgba(255,255,255,0.08)`): Subtle section dividers and secondary card edges.\n- **Border Mist 06** (`rgba(255,255,255,0.06)`): Near-invisible containment borders for background groupings.\n- **Border Mist 04** (`rgba(255,255,255,0.04)`): The faintest border — used for atmospheric separation only.\n- **Light Border** (`#e0e0e0` \u002F `rgb(224,224,224)`): Reserved for light-surface contexts (rare on this site).\n\n### Gradient System\n- **Cyan Glow**: Radial gradients using `#00ffff` at very low opacity, creating bioluminescent halos behind cards and feature sections.\n- **Blue-to-Black Fade**: Linear gradients from Composio Cobalt (`#0007cd`) fading into Void Black (`#0f0f0f`), used in hero backgrounds and section transitions.\n- **White Fog**: Bottom-of-page gradient transitioning from dark to a diffused white\u002Fgray, creating an atmospheric \"horizon line\" effect near the footer.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `abcDiatype`, with fallbacks: `abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`\n- **Monospace**: `JetBrains Mono`, with fallbacks: `JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`\n- **System Monospace** (fallback): `Menlo`, `monospace` for smallest inline code\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (ultra-tight) | normal | Massive, compressed headings |\n| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (tight) | normal | Major feature section titles |\n| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (tight) | normal | Secondary section markers |\n| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (tight) | normal | Card titles, feature names |\n| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (tight) | normal | Medium-emphasis card headings |\n| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (tight) | normal | Smaller card titles, labels |\n| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (tight) | normal | Intro paragraphs |\n| Body \u002F Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | Standard body text, nav links, buttons |\n| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (relaxed) | normal | Longer-form body text |\n| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (relaxed) | normal | Descriptions, metadata |\n| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI labels, badges |\n| Tag \u002F Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (tight) | 0.3px | Uppercase overline labels |\n| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (tight) | 0.3px | Smallest sans-serif text |\n| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | Inline code, terminal output |\n| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | Code snippets, technical labels |\n| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | Small code references |\n| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | Uppercase technical labels |\n| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | Tiny uppercase code tags |\n| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | Smallest monospace text |\n\n### Principles\n- **Compression creates authority**: Heading line-heights are drastically tight (0.87-1.0), making large text feel dense and commanding rather than airy and decorative.\n- **Dual personality**: abcDiatype carries the marketing voice — geometric, precise, friendly. JetBrains Mono carries the technical voice — credible, functional, familiar to developers.\n- **Weight restraint**: Almost everything is weight 400 (regular). Weight 500 (medium) is reserved for small labels, badges, and select card titles. Weight 700 (bold) appears only in microscopic system-monospace contexts.\n- **Negative letter-spacing on code**: JetBrains Mono uses negative letter-spacing (-0.28px to -0.98px) for dense, compact code blocks that feel like a real IDE.\n- **Uppercase is earned**: The `uppercase` + `letter-spacing` treatment is reserved exclusively for tiny overline labels and technical tags — never for headings.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA (White Fill)**\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`oklch(0.145 0 0)`)\n- Padding: comfortable (8px 24px)\n- Border: none\n- Radius: subtly rounded (likely 4px based on token scale)\n- Hover: likely subtle opacity reduction or slight gray shift\n\n**Cyan Accent CTA**\n- Background: Electric Cyan at 12% opacity (`rgba(0,255,255,0.12)`)\n- Text: Near Black (`oklch(0.145 0 0)`)\n- Padding: comfortable (8px 24px)\n- Border: thin solid Ocean Blue (`1px solid rgb(0,150,255)`)\n- Radius: subtly rounded (4px)\n- Creates a \"glowing from within\" effect on dark backgrounds\n\n**Ghost \u002F Outline (Signal Blue)**\n- Background: transparent\n- Text: Near Black (`oklch(0.145 0 0)`)\n- Padding: balanced (10px)\n- Border: thin solid Signal Blue (`1px solid rgb(0,137,255)`)\n- Hover: likely fill or border color shift\n\n**Ghost \u002F Outline (Charcoal)**\n- Background: transparent\n- Text: Near Black (`oklch(0.145 0 0)`)\n- Padding: balanced (10px)\n- Border: thin solid Charcoal (`1px solid rgb(44,44,44)`)\n- For secondary\u002Ftertiary actions on dark surfaces\n\n**Phantom Button**\n- Background: Phantom White (`rgba(255,255,255,0.2)`)\n- Text: Whisper White (`rgba(255,255,255,0.5)`)\n- No visible border\n- Used for deeply de-emphasized actions\n\n### Cards & Containers\n- Background: Pure Black (`#000000`) or transparent\n- Border: white at very low opacity, ranging from Border Mist 04 (`rgba(255,255,255,0.04)`) to Border Mist 12 (`rgba(255,255,255,0.12)`) depending on prominence\n- Radius: barely rounded corners (2px for inline elements, 4px for content cards)\n- Shadow: select cards use the hard-offset brutalist shadow (`rgba(0,0,0,0.15) 4px 4px 0px 0px`) — a distinctive design choice that adds raw depth\n- Elevation shadow: deeper containers use soft diffuse shadow (`rgba(0,0,0,0.5) 0px 8px 32px`)\n- Hover behavior: likely subtle border opacity increase or faint glow effect\n\n### Inputs & Forms\n- No explicit input token data extracted — inputs likely follow the dark-surface pattern with:\n  - Background: transparent or Pure Black\n  - Border: Border Mist 10 (`rgba(255,255,255,0.10)`)\n  - Focus: border shifts to Signal Blue (`#0089ff`) or Electric Cyan\n  - Text: Pure White with Ghost White placeholder\n\n### Navigation\n- Sticky top nav bar on dark\u002Fblack background\n- Logo (white SVG): Composio wordmark on the left\n- Nav links: Pure White (`#ffffff`) at standard body size (16px, abcDiatype)\n- CTA button in the nav: White Fill Primary style\n- Mobile: collapses to hamburger menu, single-column layout\n- Subtle bottom border on nav (Border Mist 06-08)\n\n### Image Treatment\n- Dark-themed product screenshots and UI mockups dominate\n- Images sit within bordered containers matching the card system\n- Blue\u002Fcyan gradient glows behind or beneath feature images\n- No visible border-radius on images beyond container rounding (4px)\n- Full-bleed within their card containers\n\n### Distinctive Components\n\n**Stats\u002FMetrics Display**\n- Large monospace numbers (JetBrains Mono) — \"10k+\" style\n- Tight layout with subtle label text beneath\n\n**Code Blocks \u002F Terminal Previews**\n- Dark containers with JetBrains Mono\n- Syntax-highlighted content\n- Subtle bordered containers (Border Mist 10)\n\n**Integration\u002FPartner Logos Grid**\n- Grid layout of tool logos on dark surface\n- Contained within bordered card\n- Demonstrates ecosystem breadth\n\n**\"COMPOSIO\" Brand Display**\n- Oversized brand typography — likely the largest text on the page\n- Used as a section divider\u002Fbrand statement\n- Stark white on black\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 32px, 40px\n- Component padding: typically 10px (buttons) to 24px (CTA buttons horizontal)\n- Section padding: generous vertical spacing (estimated 80-120px between major sections)\n- Card internal padding: approximately 24-32px\n\n### Grid & Container\n- Max container width: approximately 1200px, centered\n- Content sections use single-column or 2-3 column grids for feature cards\n- Hero: centered single-column with maximum impact\n- Feature sections: asymmetric layouts mixing text blocks with product screenshots\n\n### Whitespace Philosophy\n- **Breathing room between sections**: Large vertical gaps create distinct \"chapters\" in the page scroll.\n- **Dense within components**: Cards and text blocks are internally compact (tight line-heights, minimal internal padding), creating focused information nodes.\n- **Contrast-driven separation**: Rather than relying solely on whitespace, Composio uses border opacity differences and subtle background shifts to delineate content zones.\n\n### Border Radius Scale\n- Nearly squared (2px): Inline code spans, small tags, pre blocks — the sharpest treatment, conveying technical precision\n- Subtly rounded (4px): Content cards, images, standard containers — the workhorse radius\n- Pill-shaped (37px): Select buttons and badges — creates a softer, more approachable feel for key CTAs\n- Full round (9999px+): Circular elements, avatar-like containers, decorative dots\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, inline text |\n| Contained (Level 1) | Border Mist 04-08, no shadow | Background groupings, subtle sections |\n| Card (Level 2) | Border Mist 10-12, no shadow | Standard content cards, code blocks |\n| Brutalist (Level 3) | Hard offset shadow (`4px 4px`, 15% black) | Select interactive cards, distinctive feature highlights |\n| Floating (Level 4) | Soft diffuse shadow (`0px 8px 32px`, 50% black) | Modals, overlays, deeply elevated content |\n\n**Shadow Philosophy**: Composio uses shadows sparingly and with deliberate contrast. The hard-offset brutalist shadow is the signature — it breaks the sleek darkness with a raw, almost retro-computing feel. The soft diffuse shadow is reserved for truly floating elements. Most depth is communicated through border opacity gradations rather than shadows.\n\n### Decorative Depth\n- **Cyan Glow Halos**: Radial gradient halos using Electric Cyan at low opacity behind feature cards and images. Creates a \"screen glow\" effect as if the UI elements are emitting light.\n- **Blue-Black Gradient Washes**: Linear gradients from Composio Cobalt to Void Black used as section backgrounds, adding subtle color temperature shifts.\n- **White Fog Horizon**: A gradient from dark to diffused white\u002Fgray at the bottom of the page, creating an atmospheric \"dawn\" effect before the footer.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Void Black (`#0f0f0f`) as the primary page background — never pure white for main surfaces\n- Keep heading line-heights ultra-tight (0.87-1.0) for compressed, authoritative text blocks\n- Use white-opacity borders (4-12%) for containment — they're more important than shadows here\n- Reserve Electric Cyan (`#00ffff`) for high-signal moments only — CTAs, glows, interactive accents\n- Pair abcDiatype with JetBrains Mono to reinforce the developer-tool identity\n- Use the hard-offset shadow (`4px 4px`) intentionally on select elements for brutalist personality\n- Keep button text dark (`oklch(0.145 0 0)`) even on the darkest backgrounds — buttons carry their own surface\n- Layer opacity-based borders to create subtle depth without shadows\n- Use uppercase + letter-spacing only for tiny overline labels (12px or smaller)\n\n### Don't\n- Don't use bright backgrounds or light surfaces as primary containers\n- Don't apply heavy shadows everywhere — depth comes from border opacity, not box-shadow\n- Don't use Composio Cobalt (`#0007cd`) as a text color — it's too dark on dark and too saturated on light\n- Don't increase heading line-heights beyond 1.2 — the compressed feel is core to the identity\n- Don't use bold (700) weight for body or heading text — 400-500 is the ceiling\n- Don't mix warm colors — the palette is strictly cool (blue, cyan, white, black)\n- Don't use border-radius larger than 4px on content cards — the precision of near-square corners is intentional\n- Don't place Electric Cyan at full opacity on large surfaces — it's an accent, used at 12% max for backgrounds\n- Don't use decorative serif or handwritten fonts — the entire identity is geometric sans + monospace\n- Don't skip the monospace font for technical content — JetBrains Mono is not decorative, it's a credibility signal\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, hamburger nav, full-width cards, reduced section padding, hero text scales down to ~28-40px |\n| Tablet | 768-1024px | 2-column grid for cards, condensed nav, slightly reduced hero text |\n| Desktop | 1024-1440px | Full multi-column layout, expanded nav with all links visible, large hero typography (64px) |\n| Large Desktop | >1440px | Max-width container centered, generous horizontal margins |\n\n### Touch Targets\n- Minimum touch target: 44x44px for all interactive elements\n- Buttons use comfortable padding (8px 24px minimum) ensuring adequate touch area\n- Nav links spaced with sufficient gap for thumb navigation\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav on desktop collapses to hamburger on mobile\n- **Feature grids**: 3-column → 2-column → single-column stacking\n- **Hero text**: 64px → 40px → 28px progressive scaling\n- **Section padding**: Reduces proportionally but maintains generous vertical rhythm\n- **Cards**: Stack vertically on mobile with full-width treatment\n- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping\n\n### Image Behavior\n- Product screenshots scale proportionally within their containers\n- Dark-themed images maintain contrast on the dark background at all sizes\n- Gradient glow effects scale with container size\n- No visible art direction changes between breakpoints — same crops, proportional scaling\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Pure White (#ffffff)\"\n- Page Background: \"Void Black (#0f0f0f)\"\n- Brand Accent: \"Composio Cobalt (#0007cd)\"\n- Glow Accent: \"Electric Cyan (#00ffff)\"\n- Heading Text: \"Pure White (#ffffff)\"\n- Body Text: \"Ghost White (rgba(255,255,255,0.6))\"\n- Card Border: \"Border Mist 10 (rgba(255,255,255,0.10))\"\n- Button Border: \"Signal Blue (#0089ff)\"\n\n### Example Component Prompts\n- \"Create a feature card with a near-black background (#000000), barely visible white border at 10% opacity, subtly rounded corners (4px), and a hard-offset shadow (4px right, 4px down, 15% black). Use Pure White for the title in abcDiatype at 24px weight 500, and Ghost White (60% opacity) for the description at 16px.\"\n- \"Design a primary CTA button with a solid white background, near-black text, comfortable padding (8px vertical, 24px horizontal), and subtly rounded corners. Place it next to a secondary button with transparent background, Signal Blue border, and matching padding.\"\n- \"Build a hero section on Void Black (#0f0f0f) with a massive heading at 64px, line-height 0.87, in abcDiatype. Center the text. Add a subtle blue-to-black gradient glow behind the content. Include a white CTA button and a cyan-accented secondary button below.\"\n- \"Create a code snippet display using JetBrains Mono at 14px with -0.28px letter-spacing on a black background. Add a Border Mist 10 border (rgba(255,255,255,0.10)) and 4px radius. Show syntax-highlighted content with white and cyan text.\"\n- \"Design a navigation bar on Void Black with the Composio wordmark in white on the left, 4-5 nav links in white abcDiatype at 16px, and a white-fill CTA button on the right. Add a Border Mist 06 bottom border.\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes from this document — \"use Ghost White (rgba(255,255,255,0.6))\" not \"make it lighter\"\n3. Use natural language descriptions — \"make the border barely visible\" = Border Mist 04-06\n4. Describe the desired \"feel\" alongside specific measurements — \"compressed and authoritative heading at 48px with line-height 1.0\"\n5. For glow effects, specify \"Electric Cyan at 12% opacity as a radial gradient behind the element\"\n6. Always specify which font — abcDiatype for marketing, JetBrains Mono for technical\u002Fcode content\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Composio\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-white: #ffffff;\n    --color-brand: #0007cd;\n    --color-black: #000000;\n    --color-void: #0f0f0f;\n    --color-charcoal: #2c2c2c;\n    --color-muted-smoke: #444444;\n    --color-cyan: #00ffff;\n    --color-signal-blue: #0089ff;\n    --color-ocean-blue: #0096ff;\n    --color-light-border: #e0e0e0;\n    --ghost-white: rgba(255,255,255,0.6);\n    --whisper-white: rgba(255,255,255,0.5);\n    --phantom-white: rgba(255,255,255,0.2);\n    --border-mist-12: rgba(255,255,255,0.12);\n    --border-mist-10: rgba(255,255,255,0.10);\n    --border-mist-08: rgba(255,255,255,0.08);\n    --border-mist-06: rgba(255,255,255,0.06);\n    --border-mist-04: rgba(255,255,255,0.04);\n    --cyan-12: rgba(0,255,255,0.12);\n    --font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--color-void);\n    color: var(--color-white);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: rgba(15,15,15,0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-mist-06);\n  }\n  .nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-white); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-void);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 600px;\n    height: 600px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(0,7,205,0.25) 0%, rgba(0,255,255,0.08) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-size: 64px;\n    font-weight: 400;\n    line-height: 0.87;\n    letter-spacing: -1px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero p {\n    color: var(--ghost-white);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary {\n    background: var(--color-white);\n    color: var(--color-void);\n    padding: 10px 28px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-cyan {\n    background: var(--cyan-12);\n    color: var(--color-white);\n    padding: 10px 28px;\n    border: 1px solid var(--color-ocean-blue);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-size: 13px;\n    font-family: var(--font-mono);\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-cyan);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-size: 40px;\n    font-weight: 400;\n    line-height: 1.0;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-mist-06);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--ghost-white);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-mist-10);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--color-black);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--muted-smoke);\n    letter-spacing: -0.24px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n  .btn-ghost-blue {\n    background: transparent;\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: 1px solid var(--color-signal-blue);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-ghost-charcoal {\n    background: transparent;\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: 1px solid var(--color-charcoal);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-phantom {\n    background: var(--phantom-white);\n    color: var(--whisper-white);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--color-black);\n    border-radius: 4px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-mist-10); }\n  .card-brutalist {\n    border: 1px solid var(--border-mist-10);\n    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);\n  }\n  .card-glow {\n    border: 1px solid var(--border-mist-10);\n    box-shadow: 0px 8px 32px rgba(0,0,0,0.5);\n    position: relative;\n  }\n  .card-glow::before {\n    content: '';\n    position: absolute;\n    inset: -1px;\n    border-radius: 4px;\n    background: radial-gradient(ellipse at center, rgba(0,255,255,0.06) 0%, transparent 70%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  .card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }\n  .card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-cyan);\n    margin-bottom: 16px;\n    position: relative;\n    z-index: 1;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    margin-bottom: 8px;\n    color: var(--ghost-white);\n  }\n  .form-input {\n    width: 100%;\n    padding: 10px 14px;\n    background: transparent;\n    border: 1px solid var(--border-mist-10);\n    border-radius: 4px;\n    color: var(--color-white);\n    font-size: 16px;\n    font-family: var(--font-sans);\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--whisper-white); }\n  .form-input-focus { border-color: var(--color-signal-blue); }\n  .form-input-error { border-color: #ff4444; }\n  .form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--cyan-12);\n    border: 1px solid rgba(0,255,255,0.3);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--color-black);\n    border: 1px solid var(--border-mist-12);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--muted-smoke);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--color-black);\n    border-radius: 4px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; }\n  .elevation-contained { border: 1px solid var(--border-mist-06); }\n  .elevation-standard { border: 1px solid var(--border-mist-10); }\n  .elevation-brutalist {\n    border: 1px solid var(--border-mist-10);\n    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);\n  }\n  .elevation-floating {\n    border: 1px solid var(--border-mist-10);\n    box-shadow: 0px 8px 32px rgba(0,0,0,0.5);\n  }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-cyan);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">Composio\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Composio\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-cyan\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0007cd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Composio Cobalt\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0007cd\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color for high-priority interactive elements\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00ffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Electric Cyan\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00ffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Attention-grabbing accent for glows and highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0089ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Signal Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0089ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders and interactive focus states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0096ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ocean Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0096ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">CTA button accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0f0f0f; border-bottom: 1px solid var(--border-mist-10);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0f0f0f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid var(--border-mist-10);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card interiors and deep-nested containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2c2c2c;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2c2c2c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary button borders and dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headings and high-emphasis text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #444444;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Smoke\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#444444\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized body text, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.6);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ghost White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.6)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text and link labels\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.5);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Whisper White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.5)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary button text and placeholders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Phantom White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.2)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle button backgrounds and receded UI\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Border System\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--color-void); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 12\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Prominent card edges, content separators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--color-void); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 10\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.10)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard container borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--color-void); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 06\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.06)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Section dividers, subtle groupings\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--color-void); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 04\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.04)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Faintest atmospheric separation\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 64px; font-weight: 400; line-height: 0.87;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 400 \u002F 0.87 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 48px; font-weight: 400; line-height: 1.0;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 400 \u002F 1.00 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 40px; font-weight: 400; line-height: 1.0;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 40px \u002F 400 \u002F 1.00 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 28px; font-weight: 400; line-height: 1.2;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 28px \u002F 400 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 24px; font-weight: 500; line-height: 1.2;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F 500 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 20px; font-weight: 500; line-height: 1.2;\">Feature Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Label — 20px \u002F 500 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 18px; font-weight: 400; line-height: 1.2;\">Body Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 16px; font-weight: 400; line-height: 1.5;\">Body \u002F Button Text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.50 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 15px; font-weight: 400; line-height: 1.63;\">Body Small — used for longer-form content blocks\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Small — 15px \u002F 400 \u002F 1.63 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);\">Caption text for descriptions and metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.63 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 13px; font-weight: 500; line-height: 1.5;\">Label Text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Label — 13px \u002F 500 \u002F 1.50 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;\">TAG \u002F OVERLINE\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Tag \u002F Overline — 12px \u002F 500 \u002F 1.00 \u002F 0.3px \u002F uppercase — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;\">const agent = composio.create({ tools: [\"github\", \"slack\"] })\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400 \u002F 1.50 \u002F -0.32px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;\">npx composio-cli init --framework langchain\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 14px \u002F 400 \u002F 1.50 \u002F -0.28px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;\">import { Composio } from \"composio-core\"\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Caption — 12px \u002F 400 \u002F 1.50 \u002F -0.28px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;\">CODE OVERLINE\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Overline — 14px \u002F 400 \u002F 1.43 \u002F 0.7px \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;\">CODE MICRO TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Micro — 11px \u002F 400 \u002F 1.33 \u002F 0.55px \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Primary \u002F White Fill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-cyan\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Cyan Accent CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-blue\">Learn More\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Signal Blue\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-charcoal\">Secondary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Charcoal\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-phantom\">Dismiss\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Phantom\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Mist 10\u003C\u002Fh3>\n      \u003Cp>Standard content card with subtle white border at 10% opacity and 4px radius. The default container for most content blocks.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-brutalist\">\n      \u003Cdiv class=\"card-label\">Brutalist Shadow\u003C\u002Fdiv>\n      \u003Ch3>Hard Offset 4px\u003C\u002Fh3>\n      \u003Cp>Distinctive hard-offset shadow (4px right, 4px down) at 15% opacity. Adds a raw, retro-computing personality to select elements.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glow\">\n      \u003Cdiv class=\"card-label\">Floating + Glow\u003C\u002Fdiv>\n      \u003Ch3>Cyan Glow Halo\u003C\u002Fh3>\n      \u003Cp>Soft diffuse shadow (8px 32px) with a radial cyan gradient halo. Used for highest-emphasis elevated content and feature highlights.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-title\">05 \u002F Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Inputs & Forms\u003C\u002Fh2>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your API key...\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-focus\" value=\"composio-api-key-xxxxx\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key\">\n        \u003Cdiv class=\"form-error-text\">Invalid API key format\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your agent's task...\">\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">06 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--ghost-white); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 1px to 40px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 56px; height: 56px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">14px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">18px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">30px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">07 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Sharp \u002F None\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 37px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">37px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Full round\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">08 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and inline text.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border Mist 04-08. Background groupings, subtle sections.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-standard\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Card\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border Mist 10-12. Standard content cards, code blocks.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-brutalist\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Brutalist\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Hard offset shadow (4px 4px, 15% black). Distinctive feature highlights.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-floating\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Floating\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Soft diffuse shadow (0px 8px 32px, 50% black). Modals, overlays.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Composio (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-white: #ffffff;\n    --color-brand: #0007cd;\n    --color-black: #000000;\n    --color-void: #0f0f0f;\n    --color-charcoal: #2c2c2c;\n    --color-muted-smoke: #444444;\n    --color-cyan: #00ffff;\n    --color-signal-blue: #0089ff;\n    --color-ocean-blue: #0096ff;\n    --color-light-border: #e0e0e0;\n    --ghost-white: rgba(255,255,255,0.6);\n    --whisper-white: rgba(255,255,255,0.5);\n    --phantom-white: rgba(255,255,255,0.2);\n    --border-mist-12: rgba(255,255,255,0.12);\n    --border-mist-10: rgba(255,255,255,0.10);\n    --border-mist-08: rgba(255,255,255,0.08);\n    --border-mist-06: rgba(255,255,255,0.06);\n    --border-mist-04: rgba(255,255,255,0.04);\n    --cyan-12: rgba(0,255,255,0.12);\n    --font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    \u002F* Dark mode overrides *\u002F\n    --page-bg: #000000;\n    --surface: #0a0a0a;\n    --card-bg: #050505;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--page-bg);\n    color: var(--color-white);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--color-white);\n    color: var(--color-black);\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    padding: 6px 14px;\n    border-radius: 4px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: rgba(0,0,0,0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-mist-04);\n  }\n  .nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-white); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-sans);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(0,7,205,0.3) 0%, rgba(0,255,255,0.1) 35%, transparent 65%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-size: 64px;\n    font-weight: 400;\n    line-height: 0.87;\n    letter-spacing: -1px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero p {\n    color: var(--ghost-white);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 28px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-cyan {\n    background: var(--cyan-12);\n    color: var(--color-white);\n    padding: 10px 28px;\n    border: 1px solid var(--color-ocean-blue);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-size: 13px;\n    font-family: var(--font-mono);\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-cyan);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-size: 40px;\n    font-weight: 400;\n    line-height: 1.0;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-mist-04);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--ghost-white);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-mist-08);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--card-bg);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--muted-smoke);\n    letter-spacing: -0.24px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n  .btn-ghost-blue {\n    background: transparent;\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: 1px solid var(--color-signal-blue);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-ghost-charcoal {\n    background: transparent;\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: 1px solid var(--color-charcoal);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n  .btn-phantom {\n    background: var(--phantom-white);\n    color: var(--whisper-white);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--card-bg);\n    border-radius: 4px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-mist-08); }\n  .card-brutalist {\n    border: 1px solid var(--border-mist-08);\n    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);\n  }\n  .card-glow {\n    border: 1px solid var(--border-mist-08);\n    box-shadow: 0px 8px 32px rgba(0,0,0,0.7);\n    position: relative;\n  }\n  .card-glow::before {\n    content: '';\n    position: absolute;\n    inset: -1px;\n    border-radius: 4px;\n    background: radial-gradient(ellipse at center, rgba(0,255,255,0.05) 0%, transparent 70%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  .card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }\n  .card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-cyan);\n    margin-bottom: 16px;\n    position: relative;\n    z-index: 1;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    margin-bottom: 8px;\n    color: var(--ghost-white);\n  }\n  .form-input {\n    width: 100%;\n    padding: 10px 14px;\n    background: transparent;\n    border: 1px solid var(--border-mist-08);\n    border-radius: 4px;\n    color: var(--color-white);\n    font-size: 16px;\n    font-family: var(--font-sans);\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--whisper-white); }\n  .form-input-focus { border-color: var(--color-signal-blue); }\n  .form-input-error { border-color: #ff4444; }\n  .form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--cyan-12);\n    border: 1px solid rgba(0,255,255,0.2);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--surface);\n    border: 1px solid var(--border-mist-10);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--muted-smoke);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--muted-smoke);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--card-bg);\n    border-radius: 4px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; }\n  .elevation-contained { border: 1px solid var(--border-mist-04); }\n  .elevation-standard { border: 1px solid var(--border-mist-08); }\n  .elevation-brutalist {\n    border: 1px solid var(--border-mist-08);\n    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);\n  }\n  .elevation-floating {\n    border: 1px solid var(--border-mist-08);\n    box-shadow: 0px 8px 32px rgba(0,0,0,0.7);\n  }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-cyan);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .dark-badge { top: auto; bottom: 16px; right: 16px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">Composio\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Composio\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md — Dark Mode\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-cyan\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0007cd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Composio Cobalt\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0007cd\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color for high-priority interactive elements\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00ffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Electric Cyan\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00ffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Attention-grabbing accent for glows and highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0089ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Signal Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0089ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders and interactive focus states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0096ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ocean Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0096ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">CTA button accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid var(--border-mist-08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark mode page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0f0f0f; border-bottom: 1px solid var(--border-mist-08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0f0f0f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2c2c2c;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2c2c2c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary button borders and dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headings and high-emphasis text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #444444;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Smoke\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#444444\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized body text, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.6);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ghost White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.6)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text and link labels\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.5);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Whisper White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.5)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary button text and placeholders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Phantom White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.2)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle button backgrounds and receded UI\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Border System\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--page-bg); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 12\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Prominent card edges, content separators\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--page-bg); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 10\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.10)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Standard container borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--page-bg); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 06\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.06)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Section dividers, subtle groupings\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: var(--page-bg); display: flex; align-items: center; justify-content: center;\">\u003Cdiv style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Mist 04\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.04)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Faintest atmospheric separation\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 64px; font-weight: 400; line-height: 0.87;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 400 \u002F 0.87 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 48px; font-weight: 400; line-height: 1.0;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 400 \u002F 1.00 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 40px; font-weight: 400; line-height: 1.0;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 40px \u002F 400 \u002F 1.00 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 28px; font-weight: 400; line-height: 1.2;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 28px \u002F 400 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 24px; font-weight: 500; line-height: 1.2;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F 500 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 20px; font-weight: 500; line-height: 1.2;\">Feature Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Label — 20px \u002F 500 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 18px; font-weight: 400; line-height: 1.2;\">Body Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400 \u002F 1.20 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 16px; font-weight: 400; line-height: 1.5;\">Body \u002F Button Text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.50 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 15px; font-weight: 400; line-height: 1.63;\">Body Small — used for longer-form content blocks\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Small — 15px \u002F 400 \u002F 1.63 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);\">Caption text for descriptions and metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.63 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 13px; font-weight: 500; line-height: 1.5;\">Label Text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Label — 13px \u002F 500 \u002F 1.50 \u002F normal — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;\">TAG \u002F OVERLINE\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Tag \u002F Overline — 12px \u002F 500 \u002F 1.00 \u002F 0.3px \u002F uppercase — abcDiatype\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;\">const agent = composio.create({ tools: [\"github\", \"slack\"] })\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400 \u002F 1.50 \u002F -0.32px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;\">npx composio-cli init --framework langchain\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 14px \u002F 400 \u002F 1.50 \u002F -0.28px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;\">import { Composio } from \"composio-core\"\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Caption — 12px \u002F 400 \u002F 1.50 \u002F -0.28px — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;\">CODE OVERLINE\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Overline — 14px \u002F 400 \u002F 1.43 \u002F 0.7px \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;\">CODE MICRO TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Micro — 11px \u002F 400 \u002F 1.33 \u002F 0.55px \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Primary \u002F White Fill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-cyan\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Cyan Accent CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-blue\">Learn More\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Signal Blue\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-charcoal\">Secondary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Charcoal\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-phantom\">Dismiss\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Phantom\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Mist 08\u003C\u002Fh3>\n      \u003Cp>Standard content card with subtle white border at 8% opacity on pure black surface. Deeper darkness for the dark mode variant.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-brutalist\">\n      \u003Cdiv class=\"card-label\">Brutalist Shadow\u003C\u002Fdiv>\n      \u003Ch3>Hard Offset 4px\u003C\u002Fh3>\n      \u003Cp>Hard-offset shadow intensified to 40% opacity on pure black. The brutalist personality cuts deeper against the absolute dark.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glow\">\n      \u003Cdiv class=\"card-label\">Floating + Glow\u003C\u002Fdiv>\n      \u003Ch3>Cyan Glow Halo\u003C\u002Fh3>\n      \u003Cp>Soft diffuse shadow at 70% opacity with restrained cyan glow. The deeper black makes the glow more pronounced.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-title\">05 \u002F Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Inputs & Forms\u003C\u002Fh2>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your API key...\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-focus\" value=\"composio-api-key-xxxxx\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key\">\n        \u003Cdiv class=\"form-error-text\">Invalid API key format\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your agent's task...\">\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">06 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--ghost-white); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 1px to 40px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 56px; height: 56px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">14px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">18px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">30px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">07 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Sharp \u002F None\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 37px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">37px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Full round\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">08 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and inline text.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border Mist 04. Background groupings, subtle sections.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-standard\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Card\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border Mist 08. Standard content cards, code blocks.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-brutalist\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Brutalist\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Hard offset shadow (4px 4px, 40% black). Distinctive feature highlights.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-floating\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Floating\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Soft diffuse shadow (0px 8px 32px, 70% black). Modals, overlays.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Composio Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcomposio\u002FDESIGN.md) extracted from the public [Composio](https:\u002F\u002Fcomposio.dev\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcomposio\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Composio Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcomposio\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Composio Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcomposio\u002Fpreview-screenshot.png)\n",{"slug":88,"name":89,"category":90,"designMd":91,"previewHtml":92,"previewDarkHtml":93,"readme":94},"cursor","Cursor","Developer Tools & Platforms","# Design System Inspiration of Cursor\n\n## 1. Visual Theme & Atmosphere\n\nCursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.\n\nThe custom CursorGothic font is the typographic signature -- a gothic sans-serif with aggressive negative letter-spacing at display sizes (-2.16px at 72px) that creates a compressed, engineered feel. As a secondary voice, the jjannon serif font (with OpenType `\"cswh\"` contextual swash alternates) provides literary counterpoint for body copy and editorial passages. The monospace voice comes from berkeleyMono, a refined coding font that connects the marketing site to Cursor's core identity as a code editor. This three-font system (gothic display, serif body, mono code) gives Cursor one of the most typographically rich palettes in developer tooling.\n\nThe border system is particularly distinctive -- Cursor uses `oklab()` color space for border colors, applying warm brown at various alpha levels (0.1, 0.2, 0.55) to create borders that feel organic rather than mechanical. The signature border color `oklab(0.263084 -0.00230259 0.0124794 \u002F 0.1)` is not a simple rgba value but a perceptually uniform color that maintains visual consistency across different backgrounds.\n\n**Key Characteristics:**\n- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings\n- jjannon serif for body text with OpenType `\"cswh\"` (contextual swash alternates)\n- berkeleyMono for code and technical labels\n- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted\n- Primary text color `#26251e` (warm near-black with yellow undertone)\n- Accent orange `#f54e00` for brand highlight and links\n- oklab-space borders at various alpha levels for perceptually uniform edge treatment\n- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)\n- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Cursor Dark** (`#26251e`): Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.\n- **Cursor Cream** (`#f2f1ed`): Page background, primary surface. Not white but a warm cream that sets the entire warm tone.\n- **Cursor Light** (`#e6e5e0`): Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.\n- **Pure White** (`#ffffff`): Used sparingly for maximum contrast elements and specific surface highlights.\n- **True Black** (`#000000`): Minimal use, specific code\u002Fconsole contexts.\n\n### Accent\n- **Cursor Orange** (`#f54e00`): Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.\n- **Gold** (`#c08532`): Secondary accent, warm gold for premium or highlighted contexts.\n\n### Semantic\n- **Error** (`#cf2d56`): `--color-error`. A warm crimson-rose rather than cold red.\n- **Success** (`#1f8a65`): `--color-success`. A muted teal-green, warm-shifted.\n\n### Timeline \u002F Feature Colors\n- **Thinking** (`#dfa88f`): Warm peach for \"thinking\" state in AI timeline.\n- **Grep** (`#9fc9a2`): Soft sage green for search\u002Fgrep operations.\n- **Read** (`#9fbbe0`): Soft blue for file reading operations.\n- **Edit** (`#c0a8dd`): Soft lavender for editing operations.\n\n### Surface Scale\n- **Surface 100** (`#f7f7f4`): Lightest button\u002Fcard surface, barely tinted.\n- **Surface 200** (`#f2f1ed`): Primary page background.\n- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.\n- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.\n- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.\n\n### Border Colors\n- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 \u002F 0.1)`): Standard border, 10% warm brown in oklab space.\n- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 \u002F 0.2)`): Emphasized border, 20% warm brown.\n- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.\n- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.\n- **Border Light** (`#f2f1ed`): Light border matching page background.\n\n### Shadows & Depth\n- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 \u002F 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.\n- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display\u002FHeadlines**: `CursorGothic`, with fallbacks: `CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`\n- **Body\u002FEditorial**: `jjannon`, with fallbacks: `Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`\n- **Code\u002FTechnical**: `berkeleyMono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`\n- **UI\u002FSystem**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Helvetica Neue, Arial`\n- **Icons**: `CursorIcons16` (icon font at 14px and 12px)\n- **OpenType Features**: `\"cswh\"` on jjannon body text, `\"ss09\"` on CursorGothic buttons\u002Fcaptions\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | Maximum compression, hero statements |\n| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | Feature sections, CTA headlines |\n| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | Card headings, sub-sections |\n| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | Smaller titles, list headings |\n| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | Editorial body with `\"cswh\"` |\n| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | Standard body text, descriptions |\n| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal\u002F0.08px | UI body text |\n| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |\n| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `\"ss09\"` |\n| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |\n| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |\n| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |\n| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |\n| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |\n| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |\n| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |\n| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |\n| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |\n\n### Principles\n- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.\n- **Serif for soul**: jjannon provides literary warmth. The `\"cswh\"` feature adds contextual swash alternates that give body text a calligraphic quality.\n- **Three typographic voices**: Gothic (display\u002FUI), serif (editorial\u002Fbody), mono (code\u002Ftechnical). Each serves a distinct communication purpose.\n- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Warm Surface)**\n- Background: `#ebeae5` (Surface 300)\n- Text: `#26251e` (Cursor Dark)\n- Padding: 10px 12px 10px 14px\n- Radius: 8px\n- Outline: none\n- Hover: text shifts to `var(--color-error)` (`#cf2d56`)\n- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`\n- Use: Primary actions, main CTAs\n\n**Secondary Pill**\n- Background: `#e6e5e0` (Surface 400)\n- Text: `oklab(0.263 \u002F 0.6)` (60% warm brown)\n- Padding: 3px 8px\n- Radius: full pill (33.5M px)\n- Hover: text shifts to `var(--color-error)`\n- Use: Tags, filters, secondary actions\n\n**Tertiary Pill**\n- Background: `#e1e0db` (Surface 500)\n- Text: `oklab(0.263 \u002F 0.6)` (60% warm brown)\n- Radius: full pill\n- Use: Active filter state, selected tags\n\n**Ghost (Transparent)**\n- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)\n- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)\n- Padding: 6px 12px\n- Use: Tertiary actions, dismiss buttons\n\n**Light Surface**\n- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)\n- Text: `#26251e` or `oklab(0.263 \u002F 0.9)` (90%)\n- Padding: 0px 8px 1px 12px\n- Use: Dropdown triggers, subtle interactive elements\n\n### Cards & Containers\n- Background: `#e6e5e0` or `#f2f1ed`\n- Border: `1px solid oklab(0.263 \u002F 0.1)` (warm brown at 10%)\n- Radius: 8px (standard), 4px (compact), 10px (featured)\n- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards\n- Hover: shadow intensification\n\n### Inputs & Forms\n- Background: transparent or surface\n- Text: `#26251e`\n- Padding: 8px 8px 6px (textarea)\n- Border: `1px solid oklab(0.263 \u002F 0.1)`\n- Focus: border shifts to `oklab(0.263 \u002F 0.2)` or accent orange\n\n### Navigation\n- Clean horizontal nav on warm cream background\n- Cursor logotype left-aligned (~96x24px)\n- Links: 14px CursorGothic or system-ui, weight 500\n- CTA button: warm surface with Cursor Dark text\n- Tab navigation: bottom border `1px solid oklab(0.263 \u002F 0.1)` with active tab differentiation\n\n### Image Treatment\n- Code editor screenshots with `1px solid oklab(0.263 \u002F 0.1)` border\n- Rounded corners: 8px standard\n- AI chat\u002Ftimeline screenshots dominate feature sections\n- Warm gradient or solid cream backgrounds behind hero images\n\n### Distinctive Components\n\n**AI Timeline**\n- Vertical timeline showing AI operations: thinking (peach), grep (sage), read (blue), edit (lavender)\n- Each step uses its semantic color with matching text\n- Connected with vertical lines\n- Core visual metaphor for Cursor's AI-first coding experience\n\n**Code Editor Previews**\n- Dark code editor screenshots with warm cream border frame\n- berkeleyMono for code text\n- Syntax highlighting using timeline colors\n\n**Pricing Cards**\n- Warm surface backgrounds with bordered containers\n- Feature lists using jjannon serif for readability\n- CTA buttons with accent orange or primary dark styling\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)\n- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)\n- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px\n- Notable: fine-grained sub-8px increments for precise icon\u002Ftext alignment\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (80-120px)\n- Feature sections: 2-3 column grids for cards and features\n- Full-width sections with warm cream or slightly darker backgrounds\n- Sidebar layouts for documentation and settings pages\n\n### Whitespace Philosophy\n- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.\n- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.\n- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.\n\n### Border Radius Scale\n- Micro (1.5px): Fine detail elements\n- Small (2px): Inline elements, code spans\n- Medium (3px): Small containers, inline badges\n- Standard (4px): Cards, images, compact buttons\n- Comfortable (8px): Primary buttons, cards, menus\n- Featured (10px): Larger containers, featured cards\n- Full Pill (33.5M px \u002F 9999px): Pill buttons, tags, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Border Ring (Level 1) | `oklab(0.263 \u002F 0.1) 0px 0px 0px 1px` | Standard card\u002Fcontainer border (warm oklab) |\n| Border Medium (Level 1b) | `oklab(0.263 \u002F 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |\n| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |\n| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |\n| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |\n\n**Shadow Philosophy**: Cursor's depth system is built around two ideas. First, borders use perceptually uniform oklab color space rather than rgba, ensuring warm brown borders look consistent across different background tones. Second, elevation shadows use dramatically large blur values (28px, 70px) with moderate opacity (0.14, 0.1), creating a diffused, atmospheric lift rather than hard-edged drop shadows. Cards don't feel like they float above the page -- they feel like the page has gently opened a space for them.\n\n### Decorative Depth\n- Warm cream surface variations create subtle tonal depth without shadows\n- oklab borders at 10% and 20% create a spectrum of edge definition\n- No harsh divider lines -- section separation through background tone shifts and spacing\n\n## 7. Interaction & Motion\n\n### Hover States\n- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity\n- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`\n- Cards: shadow intensification on hover (ambient → elevated)\n\n### Focus States\n- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication\n- Border focus: `oklab(0.263 \u002F 0.2)` (20% border) for input\u002Fform focus\n- Consistent warm tone in all focus states -- no cold blue focus rings\n\n### Transitions\n- Color transitions: 150ms ease for text\u002Fbackground color changes\n- Shadow transitions: 200ms ease for elevation changes\n- Transform: subtle scale or translate for interactive feedback\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C600px | Single column, reduced padding, stacked navigation |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-900px | Expanded card grids, sidebar appears |\n| Desktop Small | 900-1279px | Full layout forming |\n| Desktop | >1279px | Full layout, maximum content width |\n\n### Touch Targets\n- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)\n- Pill buttons maintain tap-friendly sizing with 3px-10px padding\n- Navigation links at 14px with adequate spacing for touch\n\n### Collapsing Strategy\n- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing\n- Navigation: horizontal links → hamburger menu on mobile\n- Feature cards: 3-column → 2-column → single column stacked\n- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved\n- Timeline visualization: horizontal → vertical stacking\n- Section spacing: 80px+ → 48px → 32px on mobile\n\n### Image Behavior\n- Editor screenshots maintain warm border treatment at all sizes\n- AI timeline adapts from horizontal to vertical layout\n- Product screenshots use responsive images with consistent border radius\n- Full-width hero images scale proportionally\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA background: `#ebeae5` (warm cream button)\n- Page background: `#f2f1ed` (warm off-white)\n- Text color: `#26251e` (warm near-black)\n- Secondary text: `rgba(38, 37, 30, 0.55)` (55% warm brown)\n- Accent: `#f54e00` (orange)\n- Error\u002Fhover: `#cf2d56` (warm crimson)\n- Success: `#1f8a65` (muted teal)\n- Border: `oklab(0.263084 -0.00230259 0.0124794 \u002F 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback\n\n### Example Component Prompts\n- \"Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`.\"\n- \"Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents.\"\n- \"Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400.\"\n- \"Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`.\"\n- \"Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`.\"\n\n### Iteration Guide\n1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white\u002Fblack for primary surfaces\n2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px\n3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders\n4. Three fonts, three voices: CursorGothic (display\u002FUI), jjannon (editorial), berkeleyMono (code)\n5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards\n6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction\n7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth\n8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon\u002Ftext micro-alignment\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Cursor (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cursor-dark: #26251e;\n    --cursor-cream: #f2f1ed;\n    --cursor-light: #e6e5e0;\n    --surface-100: #f7f7f4;\n    --surface-200: #f2f1ed;\n    --surface-300: #ebeae5;\n    --surface-400: #e6e5e0;\n    --surface-500: #e1e0db;\n    --white: #ffffff;\n    --black: #000000;\n    --accent: #f54e00;\n    --error: #cf2d56;\n    --success: #1f8a65;\n    --gold: #c08532;\n    --thinking: #dfa88f;\n    --grep: #9fc9a2;\n    --read: #9fbbe0;\n    --edit: #c0a8dd;\n    --text-primary: #26251e;\n    --text-secondary: rgba(38, 37, 30, 0.55);\n    --text-tertiary: rgba(38, 37, 30, 0.4);\n    --border-default: rgba(38, 37, 30, 0.1);\n    --border-medium: rgba(38, 37, 30, 0.2);\n    --border-strong: rgba(38, 37, 30, 0.55);\n    --shadow-card: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;\n    --shadow-ambient: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;\n    --shadow-focus: rgba(0,0,0,0.1) 0px 4px 12px;\n    --font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cursor-cream);\n    color: var(--text-primary);\n    font-family: var(--font-gothic);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(242, 241, 237, 0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-default);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    display: inline-block; background: var(--surface-300); color: var(--text-primary);\n    padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: all 0.15s;\n  }\n  .nav-cta:hover { background: var(--surface-500); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 72px; font-weight: 400; line-height: 1.10;\n    letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--surface-300); color: var(--text-primary);\n    padding: 10px 14px 10px 14px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-primary:hover { color: var(--error); }\n  .btn-dark {\n    display: inline-block; background: var(--cursor-dark); color: var(--cursor-cream);\n    padding: 10px 20px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: rgba(38,37,30,0.06); color: var(--text-secondary);\n    padding: 6px 12px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: color 0.15s;\n  }\n  .btn-ghost:hover { color: var(--error); }\n  .btn-pill {\n    display: inline-block; background: var(--surface-400); color: rgba(38,37,30,0.6);\n    padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;\n    text-decoration: none; transition: color 0.15s;\n  }\n  .btn-pill:hover { color: var(--error); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-default); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }\n  .card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--text-primary);\n    border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;\n    font-family: var(--font-gothic); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); }\n  .form-input--focus { border-color: var(--accent); }\n  .form-input--error { border-color: var(--error); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--text-primary);\n    border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;\n    font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--cursor-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--cursor-dark); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }\n  .radius-context { font-size: 10px; color: var(--text-tertiary); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.72px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Download Editor\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Cursor\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm cream tones.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Download Cursor\u003C\u002Fa>\n    \u003Ca class=\"btn-primary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#26251e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#26251e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f1ed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f1ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid rgba(38,37,30,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent & Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f54e00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f54e00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c08532\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gold\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c08532\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#cf2d56\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#cf2d56\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f8a65\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f8a65\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">AI Timeline Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dfa88f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Thinking\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dfa88f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">AI thinking state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fc9a2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Grep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fc9a2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Search operations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fbbe0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Read\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fbbe0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">File reading\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c0a8dd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Edit\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c0a8dd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Code editing\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f7f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f7f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Lightest surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f1ed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 200\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f1ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebeae5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebeae5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button default\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e1e0db\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e1e0db\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 72px \u002F 400 \u002F 1.10 \u002F -2.16px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 36px \u002F 400 \u002F 1.20 \u002F -0.72px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 400 \u002F 1.25 \u002F -0.325px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;\">Title Small\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Title Small -- 22px \u002F 400 \u002F 1.30 \u002F -0.11px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;\">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Serif -- 19.2px \u002F 500 \u002F 1.50 \u002F jjannon (with cswh)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;\">Body Serif Small -- Write code naturally with AI that understands your entire codebase.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Serif SM -- 17.28px \u002F 400 \u002F 1.35 \u002F jjannon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Sans -- Standard UI text for navigation and interface elements\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Sans -- 16px \u002F 400 \u002F 1.50 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.00;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button Label -- 14px \u002F 400 \u002F 1.00 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:11px; font-weight:500; line-height:1.50;\">Caption -- Small metadata and labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 11px \u002F 500 \u002F 1.50 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;\">const editor = await cursor.init({ ai: true });\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body -- 12px \u002F 400 \u002F 1.67 \u002F berkeleyMono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;\">AI OPERATIONS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">System Micro -- 11px \u002F 500 \u002F uppercase \u002F system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Download Cursor\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">AI-First\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Tag\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--thinking); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Thinking\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--grep); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Grep\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--read); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Read\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--edit); color:var(--cursor-dark); padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Edit\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(245,78,0,0.1); color:var(--accent);\">AI\u003C\u002Fdiv>\n      \u003Ch3>Tab Autocomplete\u003C\u002Fh3>\n      \u003Cp>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(159,187,224,0.2); color:#4a7ab5;\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Chat with Codebase\u003C\u002Fh3>\n      \u003Cp>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(192,168,221,0.2); color:#7b5fa8;\">Agent\u003C\u002Fdiv>\n      \u003Ch3>Agentic Editing\u003C\u002Fh3>\n      \u003Cp>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-cursor-project\">\u003Cdiv class=\"form-state-label\">Default (warm border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"cursor\u002Feditor\">\u003Cdiv class=\"form-state-label\">Focus (accent orange)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key\">\u003Cdiv class=\"form-state-label\">Error (warm crimson)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Instructions\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe the changes you want...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">3\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">5\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1.5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1.5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">3px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-default);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(38,37,30,0.1) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Border Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">oklab warm border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(38,37,30,0.2) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1b: Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Emphasized border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.02) 0px 0px 16px 0px, rgba(0,0,0,0.008) 0px 0px 8px 0px;\">\u003Cdiv class=\"elevation-label\">Level 2: Ambient\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.14) 0px 28px 70px 0px, rgba(0,0,0,0.1) 0px 14px 32px 0px, rgba(38,37,30,0.1) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Modal \u002F popover\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive focus\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fcursor.com\u002F\">cursor.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Cursor (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Lato:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cursor-dark: #e6e5e0;\n    --cursor-cream: #1a1915;\n    --cursor-light: #2a2922;\n    --surface-100: #1e1d17;\n    --surface-200: #1a1915;\n    --surface-300: #2a2922;\n    --surface-400: #33322a;\n    --surface-500: #3d3c33;\n    --white: #111110;\n    --black: #f2f1ed;\n    --accent: #f54e00;\n    --error: #e04a6f;\n    --success: #2fba8a;\n    --gold: #d9a04a;\n    --thinking: #a06b50;\n    --grep: #5a9e5e;\n    --read: #5a8ab8;\n    --edit: #8a6fb8;\n    --text-primary: #e6e5e0;\n    --text-secondary: rgba(230, 229, 224, 0.55);\n    --text-tertiary: rgba(230, 229, 224, 0.35);\n    --border-default: rgba(230, 229, 224, 0.1);\n    --border-medium: rgba(230, 229, 224, 0.2);\n    --border-strong: rgba(230, 229, 224, 0.55);\n    --shadow-card: rgba(0,0,0,0.4) 0px 28px 70px 0px, rgba(0,0,0,0.3) 0px 14px 32px 0px, rgba(230,229,224,0.08) 0px 0px 0px 1px;\n    --shadow-ambient: rgba(0,0,0,0.1) 0px 0px 16px 0px, rgba(0,0,0,0.05) 0px 0px 8px 0px;\n    --shadow-focus: rgba(245,78,0,0.3) 0px 4px 12px;\n    --font-gothic: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', Times, serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    --font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cursor-cream);\n    color: var(--text-primary);\n    font-family: var(--font-gothic);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 12px; right: 12px; z-index: 200;\n    background: var(--accent); color: #ffffff;\n    padding: 4px 12px; border-radius: 9999px;\n    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(26, 25, 21, 0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-default);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    display: inline-block; background: var(--surface-300); color: var(--text-primary);\n    padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: all 0.15s;\n  }\n  .nav-cta:hover { background: var(--surface-500); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 72px; font-weight: 400; line-height: 1.10;\n    letter-spacing: -2.16px; color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-family: var(--font-serif); font-size: 19.2px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--surface-300); color: var(--text-primary);\n    padding: 10px 14px 10px 14px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-primary:hover { color: var(--error); }\n  .btn-dark {\n    display: inline-block; background: var(--text-primary); color: var(--cursor-cream);\n    padding: 10px 20px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: rgba(230,229,224,0.06); color: var(--text-secondary);\n    padding: 6px 12px; border-radius: 8px; border: none;\n    font-family: var(--font-gothic); font-size: 14px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: color 0.15s;\n  }\n  .btn-ghost:hover { color: var(--error); }\n  .btn-pill {\n    display: inline-block; background: var(--surface-400); color: rgba(230,229,224,0.6);\n    padding: 3px 8px; border-radius: 9999px; font-size: 14px; font-weight: 400;\n    text-decoration: none; transition: color 0.15s;\n  }\n  .btn-pill:hover { color: var(--error); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 36px; font-weight: 400; line-height: 1.20; letter-spacing: -0.72px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-default); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); background: var(--white); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--surface-300); border-radius: 8px; padding: 24px; border: 1px solid var(--border-default); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.11px; margin-bottom: 8px; }\n  .card p { font-family: var(--font-serif); font-size: 17.28px; color: var(--text-secondary); line-height: 1.35; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--surface-300); color: var(--text-primary);\n    border: 1px solid var(--border-default); padding: 8px 8px 6px; border-radius: 4px;\n    font-family: var(--font-gothic); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); }\n  .form-input--focus { border-color: var(--accent); }\n  .form-input--error { border-color: var(--error); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--surface-300); color: var(--text-primary);\n    border: 1px solid var(--border-default); padding: 8px; border-radius: 4px;\n    font-family: var(--font-gothic); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--text-primary); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--text-primary); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }\n  .radius-context { font-size: 10px; color: var(--text-tertiary); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--surface-300); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-default); font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.72px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Download Editor\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Cursor\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm dark tones.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Download Cursor\u003C\u002Fa>\n    \u003Ca class=\"btn-primary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#26251e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#26251e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f1ed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f1ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent & Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f54e00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cursor Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f54e00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c08532\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gold\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c08532\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#cf2d56\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#cf2d56\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f8a65\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f8a65\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">AI Timeline Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dfa88f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Thinking\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dfa88f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">AI thinking state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fc9a2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Grep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fc9a2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Search operations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fbbe0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Read\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fbbe0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">File reading\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c0a8dd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Edit\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c0a8dd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Code editing\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f7f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f7f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Lightest surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f1ed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 200\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f1ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebeae5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebeae5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button default\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e1e0db\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e1e0db\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:400; line-height:1.10; letter-spacing:-2.16px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 72px \u002F 400 \u002F 1.10 \u002F -2.16px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:400; line-height:1.20; letter-spacing:-0.72px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 36px \u002F 400 \u002F 1.20 \u002F -0.72px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:400; line-height:1.25; letter-spacing:-0.325px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 400 \u002F 1.25 \u002F -0.325px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:400; line-height:1.30; letter-spacing:-0.11px;\">Title Small\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Title Small -- 22px \u002F 400 \u002F 1.30 \u002F -0.11px \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:19.2px; font-weight:500; line-height:1.50;\">Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Serif -- 19.2px \u002F 500 \u002F 1.50 \u002F jjannon (with cswh)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:17.28px; font-weight:400; line-height:1.35;\">Body Serif Small -- Write code naturally with AI that understands your entire codebase.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Serif SM -- 17.28px \u002F 400 \u002F 1.35 \u002F jjannon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Sans -- Standard UI text for navigation and interface elements\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Sans -- 16px \u002F 400 \u002F 1.50 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.00;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button Label -- 14px \u002F 400 \u002F 1.00 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:11px; font-weight:500; line-height:1.50;\">Caption -- Small metadata and labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 11px \u002F 500 \u002F 1.50 \u002F CursorGothic\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.67;\">const editor = await cursor.init({ ai: true });\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body -- 12px \u002F 400 \u002F 1.67 \u002F berkeleyMono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-ui); font-size:11px; font-weight:500; line-height:1.27; text-transform:uppercase; letter-spacing:0.048px;\">AI OPERATIONS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">System Micro -- 11px \u002F 500 \u002F uppercase \u002F system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Download Cursor\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">AI-First\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Tag\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--thinking); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Thinking\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--grep); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Grep\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--read); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Read\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--edit); color:#fff; padding:3px 8px; border-radius:9999px; font-size:12px; font-weight:500;\">Edit\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Timeline Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(245,78,0,0.15); color:var(--accent);\">AI\u003C\u002Fdiv>\n      \u003Ch3>Tab Autocomplete\u003C\u002Fh3>\n      \u003Cp>Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(90,138,184,0.2); color:#9fbbe0;\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Chat with Codebase\u003C\u002Fh3>\n      \u003Cp>Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(138,111,184,0.2); color:#c0a8dd;\">Agent\u003C\u002Fdiv>\n      \u003Ch3>Agentic Editing\u003C\u002Fh3>\n      \u003Cp>Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-cursor-project\">\u003Cdiv class=\"form-state-label\">Default (warm border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"cursor\u002Feditor\">\u003Cdiv class=\"form-state-label\">Focus (accent orange)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key\">\u003Cdiv class=\"form-state-label\">Error (warm crimson)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Instructions\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe the changes you want...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">3\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">5\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1.5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1.5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">3px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-default);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(230,229,224,0.1) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Border Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">oklab warm border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(230,229,224,0.2) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1b: Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Emphasized border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-ambient);\">\u003Cdiv class=\"elevation-label\">Level 2: Ambient\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Modal \u002F popover\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-focus);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive focus\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fcursor.com\u002F\">cursor.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Cursor Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcursor\u002FDESIGN.md) extracted from the public [Cursor](https:\u002F\u002Fcursor.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fcursor\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cursor design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Cursor Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcursor\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Cursor Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fcursor\u002Fpreview-screenshot.png)\n",{"slug":96,"name":97,"category":45,"designMd":98,"previewHtml":99,"previewDarkHtml":100,"readme":101},"elevenlabs","Elevenlabs","# Design System Inspiration of ElevenLabs\n\n## 1. Visual Theme & Atmosphere\n\nElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.\n\nThe typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.\n\nWhat makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.\n\n**Key Characteristics:**\n- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)\n- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings\n- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability\n- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist\n- Pill buttons (9999px) with warm stone-tinted backgrounds\n- WaldenburgFH bold uppercase for specific CTA labels\n- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness\n- Geist Mono \u002F ui-monospace for code snippets\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds\n- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation\n- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature\n- **Black** (`#000000`): Primary text, headings, dark buttons\n\n### Neutral Scale\n- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions\n- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines\n- **Near White** (`#f6f6f6`): Alternate light surface\n\n### Interactive\n- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay\n- **Ring Blue** (`rgb(147 197 253 \u002F 0.5)`): `--tw-ring-color`, focus ring\n- **Border Light** (`#e5e5e5`): Explicit borders\n- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders\n\n### Shadows\n- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition\n- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant\n- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border\n- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift\n- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button\u002Fcard elevation\n- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow\n- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition\n- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`\n- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`\n- **Body \u002F UI**: `Inter`, fallback: `Inter Fallback`\n- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |\n| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |\n| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |\n| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |\n| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |\n| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |\n| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |\n| Nav \u002F UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |\n| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |\n| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |\n| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |\n| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |\n| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |\n| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |\n| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |\n\n### Principles\n- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.\n- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).\n- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.\n- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Black Pill**\n- Background: `#000000`\n- Text: `#ffffff`\n- Padding: 0px 14px\n- Radius: 9999px (full pill)\n- Use: Primary CTA\n\n**White Pill (Shadow-bordered)**\n- Background: `#ffffff`\n- Text: `#000000`\n- Radius: 9999px\n- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`\n- Use: Secondary CTA on white\n\n**Warm Stone Pill**\n- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)\n- Text: `#000000`\n- Padding: 12px 20px 12px 14px (asymmetric)\n- Radius: 30px\n- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)\n- Use: Featured CTA, hero action — the signature warm button\n\n**Uppercase Waldenburg Button**\n- Font: WaldenburgFH 14px weight 700\n- Text-transform: uppercase\n- Letter-spacing: 0.7px\n- Use: Specific bold CTA labels\n\n### Cards & Containers\n- Background: `#ffffff`\n- Border: `1px solid #e5e5e5` or shadow-as-border\n- Radius: 16px–24px\n- Shadow: multi-layer stack (inset + outline + elevation)\n- Content: product screenshots, code examples, audio waveform previews\n\n### Inputs & Forms\n- Textarea: padding 12px 20px, transparent text at default\n- Select: white background, standard styling\n- Radio: standard with tw-ring focus\n- Focus: `var(--tw-ring-offset-shadow)` ring system\n\n### Navigation\n- Clean white sticky header\n- Inter 15px weight 500 for nav links\n- Pill CTAs right-aligned (black primary, white secondary)\n- Mobile: hamburger collapse at 1024px\n\n### Image Treatment\n- Product screenshots and audio waveform visualizations\n- Warm gradient backgrounds in feature sections\n- 20px–24px radius on image containers\n- Full-width sections alternating white and light gray\n\n### Distinctive Components\n\n**Audio Waveform Sections**\n- Colorful gradient backgrounds showcasing voice AI capabilities\n- Warm amber, blue, and green gradients behind product demos\n- Screenshots of the ElevenLabs product interface\n\n**Warm Stone CTA Block**\n- `rgba(245,242,239,0.8)` background with warm shadow\n- Asymmetric padding (more right padding)\n- Creates a physical, tactile quality unique to ElevenLabs\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px\n\n### Grid & Container\n- Centered content with generous max-width\n- Single-column hero, expanding to feature grids\n- Full-width gradient sections for product showcases\n- White card grids on light gray backgrounds\n\n### Whitespace Philosophy\n- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.\n- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.\n- **Typography-led rhythm**: The light-weight Waldenburg headings create visual \"whispers\" that draw the eye through vast white space.\n\n### Border Radius Scale\n- Minimal (2px): Small links, inline elements\n- Subtle (4px): Nav items, tab panels, tags\n- Standard (8px): Small containers\n- Comfortable (10px–12px): Medium cards, dropdowns\n- Card (16px): Standard cards, articles\n- Large (18px–20px): Featured cards, code panels\n- Section (24px): Large panels, section containers\n- Warm Button (30px): Warm stone CTA\n- Pill (9999px): Primary buttons, navigation pills\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |\n| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |\n| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |\n| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |\n| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |\n\n**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Waldenburg weight 300 for all display headings — the lightness IS the brand\n- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity\n- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements\n- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text\n- Use 9999px radius for primary buttons — pill shape is standard\n- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs\n- Keep the page predominantly white with subtle gray section differentiation\n- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels\n\n### Don't\n- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable\n- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth\n- Don't use cool gray borders — the system is warm-tinted throughout\n- Don't skip the inset shadow component — half-pixel inset borders define edges\n- Don't apply negative letter-spacing to body text — Inter uses positive tracking\n- Don't use sharp corners (\u003C8px) on cards — the generous radius is structural\n- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones\n- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C1024px | Single column, hamburger nav, stacked sections |\n| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |\n\n### Touch Targets\n- Pill buttons with generous padding (12px–20px)\n- Navigation links at 15px with adequate spacing\n- Select dropdowns maintain comfortable sizing\n\n### Collapsing Strategy\n- Navigation: horizontal → hamburger at 1024px\n- Feature grids: multi-column → stacked\n- Hero: maintains centered layout, font scales proportionally\n- Gradient sections: full-width maintained, content stacks\n- Spacing compresses proportionally\n\n### Image Behavior\n- Product screenshots scale responsively\n- Gradient backgrounds simplify on mobile\n- Audio waveform previews maintain aspect ratio\n- Rounded corners maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)\n- Text: Black (`#000000`)\n- Secondary text: Dark Gray (`#4e4e4e`)\n- Muted text: Warm Gray (`#777169`)\n- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)\n- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`\n\n### Example Component Prompts\n- \"Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px).\"\n- \"Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e.\"\n- \"Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500.\"\n- \"Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px.\"\n- \"Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05).\"\n\n### Iteration Guide\n1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds\n2. Waldenburg 300 for headings — never bold, the lightness is the identity\n3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity\n4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality\n5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow\n6. Pill (9999px) for buttons, generous radius (16px–24px) for cards\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: ElevenLabs (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #ffffff; --light: #f5f5f5; --warm-stone: rgba(245,242,239,0.8);\n    --black: #000000; --dark-gray: #4e4e4e; --warm-gray: #777169;\n    --border: #e5e5e5; --border-subtle: rgba(0,0,0,0.05);\n    --shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;\n    --shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;\n    --shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;\n    --shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;\n    --font-sans: 'Inter', system-ui, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--black); }\n  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }\n\n  .hero { padding:100px 32px 80px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }\n  .hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }\n  .btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }\n  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }\n  .btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }\n  .color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }\n  .card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }\n  .form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }\n  .form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }\n  .form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }\n  .form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }\n  .spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }\n  .radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n  .radius-context { font-size:9px; color:var(--warm-gray); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n\n  .footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }\n  .footer a { color:var(--black); text-decoration:underline; }\n\n  @media (max-width:1024px) {\n    .hero h1 { font-size:36px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n    .card-grid { grid-template-columns:1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by ElevenLabs\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-black\" href=\"#\">Try for Free\u003C\u002Fa>\n    \u003Ca class=\"btn-warm\" href=\"#\">Explore Voice AI\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f5f5f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f5f5f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Section background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(245,242,239,0.8)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Stone\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(245,242,239,0.8)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Featured CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4e4e4e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4e4e4e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#777169\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#777169\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e5e5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#292524\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#292524\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F 300 \u002F 1.08 \u002F -0.96px \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:300; line-height:1.17;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 36px \u002F 300 \u002F 1.17 \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:300; line-height:1.13;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 300 \u002F 1.13 \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.35;\">Body Large — Bringing every conversation to life\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.35 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;\">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.60 \u002F +0.18px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;\">Nav \u002F Button\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav — 15px \u002F 500 \u002F 1.47 \u002F +0.15px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;\">Uppercase CTA\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CTA — 14px \u002F 700 \u002F uppercase \u002F +0.7px \u002F WaldenburgFH\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;\">Caption — Last updated 3 hours ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.43 \u002F +0.14px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);\">const audio = await elevenlabs.generate({ text: \"Hello\" })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code — 13px \u002F 400 \u002F 1.85 \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-black\" href=\"#\">Try for Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Black Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-warm\" href=\"#\">Explore Voice AI\u003C\u002Fa>\u003Cdiv class=\"button-label\">Warm Stone\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-upper\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Uppercase Bold\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Text to Speech\u003C\u002Fh3>\u003Cp>Generate natural, expressive speech from text in any language with the most realistic AI voices.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;\">\u003Ch3>Voice Cloning\u003C\u002Fh3>\u003Cp>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--light);\">\u003Ch3>Audio Native\u003C\u002Fh3>\u003Cp>Turn any written content into engaging audio. Light gray background variant for section differentiation.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Voice Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My Custom Voice\">\u003Cdiv class=\"form-state-label\">Default (inset border shadow)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Language\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"English\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid_key\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Text Input\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Enter text to convert to speech...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-inset);\">\u003Cdiv class=\"elevation-label\">Inset Edge\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.5px inset border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Outline + subtle lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-btn);\">\u003Cdiv class=\"elevation-label\">Button\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Strong outline + lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-warm);\">\u003Cdiv class=\"elevation-label\">Warm Lift\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm-tinted shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px rgb(147,197,253);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Felevenlabs.io\u002F\">elevenlabs.io\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: ElevenLabs (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;700&family=Geist+Mono&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #0a0a0a; --light: #141414; --warm-stone: rgba(245,242,239,0.8);\n    --black: #f0f0f0; --dark-gray: #a0a0a0; --warm-gray: #8a8580;\n    --border: #2a2a2a; --border-subtle: rgba(255,255,255,0.08);\n    --shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px;\n    --shadow-btn: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;\n    --shadow-warm: rgba(78,50,23,0.04) 0px 6px 16px;\n    --shadow-inset: rgb(255,255,255) 0px 0px 0px 0px inset, rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;\n    --font-sans: 'Inter', system-ui, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.16px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(10,10,10,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:15px; font-weight:500; color:var(--dark-gray); text-decoration:none; letter-spacing:0.15px; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--black); }\n  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:6px 16px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; }\n\n  .hero { padding:100px 32px 80px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px; margin-bottom:16px; }\n  .hero p { font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px; color:var(--dark-gray); max-width:520px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-black { display:inline-block; background:var(--black); color:var(--white); padding:8px 20px; border-radius:9999px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }\n  .btn-warm { display:inline-block; background:var(--warm-stone); color:var(--black); padding:10px 20px; border-radius:30px; font-size:15px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-warm); }\n  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:500; text-decoration:none; border:none; cursor:pointer; box-shadow:var(--shadow-btn); }\n  .btn-upper { display:inline-block; background:var(--black); color:var(--white); padding:8px 18px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.7px; border:none; cursor:pointer; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--warm-gray); margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:300; line-height:1.17; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-inset); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--warm-gray); font-family:var(--font-mono); }\n  .color-swatch-role { font-size:10px; color:var(--warm-gray); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:500; color:var(--dark-gray); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:var(--font-mono); font-size:11px; color:var(--warm-gray); margin-top:6px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:500; color:var(--warm-gray); margin-top:8px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }\n  .card h3 { font-size:20px; font-weight:300; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--dark-gray); line-height:1.50; letter-spacing:0.14px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; letter-spacing:0.14px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; outline:none; box-shadow:var(--shadow-inset); transition:box-shadow 0.15s; }\n  .form-input:focus { box-shadow:0 0 0 2px rgb(147,197,253); }\n  .form-input--focus { box-shadow:0 0 0 2px rgb(147,197,253); }\n  .form-input--error { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-family:var(--font-sans); font-size:15px; resize:vertical; outline:none; box-shadow:var(--shadow-inset); }\n  .form-state-label { font-size:10px; color:var(--warm-gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--black); border-radius:4px; margin-bottom:6px; height:28px; opacity:0.15; }\n  .spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--light); margin-bottom:6px; box-shadow:var(--shadow-inset); }\n  .radius-label { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n  .radius-context { font-size:9px; color:var(--warm-gray); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border-radius:20px; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--warm-gray); }\n\n  .footer { padding:32px; text-align:center; border-top:1px solid var(--border); font-size:13px; color:var(--warm-gray); letter-spacing:0.13px; }\n  .footer a { color:var(--black); text-decoration:underline; }\n\n  @media (max-width:1024px) {\n    .hero h1 { font-size:36px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n    .card-grid { grid-template-columns:1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#f0f0f0;color:#0a0a0a;font-size:11px;font-weight:500;padding:4px 10px;border-radius:9999px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by ElevenLabs\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-black\" href=\"#\">Try for Free\u003C\u002Fa>\n    \u003Ca class=\"btn-warm\" href=\"#\">Explore Voice AI\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f5f5f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f5f5f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Section background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(245,242,239,0.8)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Stone\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(245,242,239,0.8)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Featured CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4e4e4e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4e4e4e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#777169\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#777169\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e5e5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#292524\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#292524\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.08; letter-spacing:-0.96px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F 300 \u002F 1.08 \u002F -0.96px \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:300; line-height:1.17;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 36px \u002F 300 \u002F 1.17 \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:300; line-height:1.13;\">Card Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 300 \u002F 1.13 \u002F Waldenburg\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.35;\">Body Large — Bringing every conversation to life\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.35 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:0.18px;\">Body — The most realistic AI voice platform. Create natural-sounding speech in any language.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.60 \u002F +0.18px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.47; letter-spacing:0.15px;\">Nav \u002F Button\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav — 15px \u002F 500 \u002F 1.47 \u002F +0.15px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.10; text-transform:uppercase; letter-spacing:0.7px;\">Uppercase CTA\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">CTA — 14px \u002F 700 \u002F uppercase \u002F +0.7px \u002F WaldenburgFH\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.14px;\">Caption — Last updated 3 hours ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.43 \u002F +0.14px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:13px; font-weight:400; line-height:1.85; color:var(--dark-gray);\">const audio = await elevenlabs.generate({ text: \"Hello\" })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code — 13px \u002F 400 \u002F 1.85 \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-black\" href=\"#\">Try for Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Black Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-warm\" href=\"#\">Explore Voice AI\u003C\u002Fa>\u003Cdiv class=\"button-label\">Warm Stone\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-upper\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Uppercase Bold\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Text to Speech\u003C\u002Fh3>\u003Cp>Generate natural, expressive speech from text in any language with the most realistic AI voices.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px;\">\u003Ch3>Voice Cloning\u003C\u002Fh3>\u003Cp>Create a digital replica of any voice with just a few minutes of audio. Elevated shadow variant.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--light);\">\u003Ch3>Audio Native\u003C\u002Fh3>\u003Cp>Turn any written content into engaging audio. Light gray background variant for section differentiation.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Voice Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My Custom Voice\">\u003Cdiv class=\"form-state-label\">Default (inset border shadow)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Language\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"English\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid_key\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Text Input\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Enter text to convert to speech...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-inset);\">\u003Cdiv class=\"elevation-label\">Inset Edge\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.5px inset border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Outline + subtle lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-btn);\">\u003Cdiv class=\"elevation-label\">Button\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Strong outline + lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-warm);\">\u003Cdiv class=\"elevation-label\">Warm Lift\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm-tinted shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px rgb(147,197,253);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Felevenlabs.io\u002F\">elevenlabs.io\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Elevenlabs Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Felevenlabs\u002FDESIGN.md) extracted from the public [ElevenLabs](https:\u002F\u002Felevenlabs.io\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Felevenlabs\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Elevenlabs design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Elevenlabs Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Felevenlabs\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Elevenlabs Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Felevenlabs\u002Fpreview-screenshot.png)\n",{"slug":103,"name":104,"category":90,"designMd":105,"previewHtml":106,"previewDarkHtml":107,"readme":108},"expo","Expo","# Design System Inspiration of Expo\n\n## 1. Visual Theme & Atmosphere\n\nExpo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own \"room.\"\n\nThe design language is decisively monochromatic — pure black (`#000000`) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (`#60646c`, `#b0b4ba`, `#555860`) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.\n\nWhat makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.\n\n**Key Characteristics:**\n- Luminous cool-white canvas (`#f0f0f3`) with gallery-like vertical spacing\n- Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color\n- Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)\n- Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)\n- Inter as the sole typeface, used at weights 400–900 for full expressive range\n- Whisper-soft shadows that barely lift elements from the surface\n- Product screenshots as the only source of color in the interface\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Expo Black** (`#000000`): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.\n- **Near Black** (`#1c2024`): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.\n\n### Secondary & Accent\n- **Link Cobalt** (`#0d74ce`): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.\n- **Legal Blue** (`#476cff`): A brighter, more saturated blue for legal\u002Ffooter links — slightly more attention-grabbing than Link Cobalt.\n- **Widget Sky** (`#47c2ff`): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.\n- **Preview Purple** (`#8145b5`): A rich violet used for \"preview\" or beta feature indicators — creating clear visual distinction from standard content.\n\n### Surface & Background\n- **Cloud Gray** (`#f0f0f3`): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.\n- **Pure White** (`#ffffff`): Card surfaces, button backgrounds, and elevated content containers. Creates a clear \"lifted\" distinction from Cloud Gray.\n- **Widget Dark** (`#1a1a1a`): Dark surface for dark-theme widgets and overlay elements.\n- **Banner Dark** (`#171717`): The darkest surface variant, used for promotional banners and high-contrast containers.\n\n### Neutrals & Text\n- **Slate Gray** (`#60646c`): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.\n- **Mid Slate** (`#555860`): Slightly darker than Slate, used for emphasized secondary text.\n- **Silver** (`#b0b4ba`): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.\n- **Pewter** (`#999999`): Accordion icons and deeply de-emphasized UI elements in dark contexts.\n- **Light Silver** (`#cccccc`): Arrow icons and decorative elements in dark contexts.\n- **Dark Slate** (`#363a3f`): Borders on dark surfaces, switch tracks, and emphasized containment.\n- **Charcoal** (`#333333`): Dark mode switch backgrounds and deep secondary surfaces.\n\n### Semantic & Accent\n- **Warning Amber** (`#ab6400`): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.\n- **Destructive Rose** (`#eb8e90`): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.\n- **Border Lavender** (`#e0e1e6`): Standard card\u002Fcontainer borders — a cool lavender-gray that's visible without being heavy.\n- **Input Border** (`#d9d9e0`): Button and form element borders — slightly warmer\u002Fdarker than card borders for interactive elements.\n- **Dark Focus Ring** (`#2547d0`): Deep blue for keyboard focus indicators in dark theme contexts.\n\n### Gradient System\n- The design is notably **gradient-free** in the interface layer. Visual richness comes from product screenshots, the React universe illustration, and careful shadow layering rather than color gradients. This absence IS the design decision — gradients would undermine the clinical precision.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter`, with fallbacks: `-apple-system, system-ui`\n- **Monospace**: `JetBrains Mono`, with fallback: `ui-monospace`\n- **System Fallback**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |\n| Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |\n| Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |\n| Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |\n| Body \u002F Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |\n| Caption \u002F Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |\n| Tag \u002F Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |\n| Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |\n| Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |\n| Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |\n\n### Principles\n- **One typeface, full expression**: Inter is the only sans-serif, used from weight 400 (regular) through 900 (black). This gives the design a unified voice while still achieving dramatic contrast between whisper-light body text and thundering display headlines.\n- **Extreme negative tracking at scale**: Headlines at 64px use -1.6px to -3px letter-spacing, creating ultra-dense text blocks that feel like logotypes. This aggressive compression is the signature typographic move.\n- **Weight as hierarchy**: 700–900 for display, 600 for headings, 500 for emphasis, 400 for body. The jumps are decisive — no ambiguous in-between weights.\n- **Consistent 1.40 body line-height**: Nearly all body and UI text shares 1.40 line-height, creating a rhythmic vertical consistency.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (White on border)**\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#1c2024`)\n- Padding: 0px 12px (compact, content-driven height)\n- Border: thin solid Input Border (`1px solid #d9d9e0`)\n- Radius: subtly rounded (6px)\n- Shadow: subtle combined shadow on hover\n- The understated default — clean, professional, unheroic\n\n**Primary Pill**\n- Same as Primary but with pill-shaped radius (9999px)\n- Used for hero CTAs and high-emphasis actions\n- The extra roundness signals \"start here\"\n\n**Dark Primary**\n- Background: Expo Black (`#000000`)\n- Text: Pure White (`#ffffff`)\n- Pill-shaped (9999px) or generously rounded (32–36px)\n- No border (black IS the border)\n- The maximum-emphasis CTA — reserved for primary conversion actions\n\n### Cards & Containers\n- Background: Pure White (`#ffffff`) — clearly lifted from Cloud Gray page\n- Border: thin solid Border Lavender (`1px solid #e0e1e6`) for standard cards\n- Radius: comfortably rounded (8px) for standard cards; generously rounded (16–24px) for featured containers\n- Shadow Level 1: Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`) — barely perceptible lift\n- Shadow Level 2: Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`) — clear floating elevation\n- Hover: likely subtle shadow deepening or background shift\n\n### Inputs & Forms\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#1c2024`)\n- Border: thin solid Input Border (`1px solid #d9d9e0`)\n- Padding: 0px 12px (inline with button sizing)\n- Radius: subtly rounded (6px)\n- Focus: blue ring shadow via CSS custom property\n\n### Navigation\n- Sticky top nav on transparent\u002Fblurred background\n- Logo: Expo wordmark in black\n- Links: Near Black (`#1c2024`) or Slate Gray (`#60646c`) at 14–16px Inter weight 500\n- CTA: Black pill button (\"Sign Up\") on the right\n- GitHub star badge as social proof\n- Status indicator (\"All Systems Operational\") with green dot\n\n### Image Treatment\n- Product screenshots and device mockups are the visual heroes\n- Generously rounded corners (24px) on video and image containers\n- Screenshots shown in realistic device frames\n- Dark UI screenshots provide contrast against the light canvas\n- Full-bleed within rounded containers\n\n### Distinctive Components\n\n**Universe React Logo**\n- Animated\u002Fillustrated React logo as the visual centerpiece\n- Connects Expo's identity to the React ecosystem\n- The only illustrative element on an otherwise photographic page\n\n**Device Preview Grid**\n- Multiple device types (phone, tablet, web) shown simultaneously\n- Demonstrates cross-platform capability visually\n- Each device uses realistic device chrome\n\n**Status Badge**\n- \"All Systems Operational\" pill in the nav\n- Green dot + text — compact trust signal\n- Pill-shaped (36px radius)\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px\n- Button padding: 0px 12px (unusually compact — height driven by line-height)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: enormous (estimated 96–144px between major sections)\n- Component gap: 16–24px between sibling elements\n\n### Grid & Container\n- Max container width: approximately 1200–1400px, centered\n- Hero: centered single-column with massive breathing room\n- Feature sections: alternating layouts (image left\u002Fright, full-width showcases)\n- Card grids: 2–3 column for feature highlights\n- Full-width sections with contained inner content\n\n### Whitespace Philosophy\n- **Gallery-like pacing**: Each section feels like its own exhibit, surrounded by vast empty space. This creates a premium, unhurried browsing experience.\n- **Breathing room is the design**: The generous whitespace IS the primary design element — it communicates confidence, quality, and that each feature deserves individual attention.\n- **Content islands**: Sections float as isolated \"islands\" in the white space, connected by scrolling rather than visual continuation.\n\n### Border Radius Scale\n- Nearly squared (4px): Small inline elements, tags\n- Subtly rounded (6px): Buttons, form inputs, combo boxes — the functional interactive radius\n- Comfortably rounded (8px): Standard content cards, containers\n- Generously rounded (16px): Feature tabs, content panels\n- Very rounded (24px): Buttons, video\u002Fimage containers, tabpanels — the signature softness\n- Highly rounded (32–36px): Hero CTAs, status badges, nav buttons\n- Pill-shaped (9999px): Primary action buttons, tags, avatars — maximum friendliness\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Cloud Gray page background, inline text |\n| Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |\n| Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | Subtle card lift, hover states |\n| Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | Feature showcases, product screenshots |\n| Modal (Level 4) | Dark overlay (`--dialog-overlay-background-color`) + heavy shadow | Dialogs, overlays |\n\n**Shadow Philosophy**: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is **background color contrast** — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Cloud Gray (`#f0f0f3`) as the page background and Pure White (`#ffffff`) for elevated cards — the two-tone light system is essential\n- Keep display headlines at extreme negative letter-spacing (-1.6px to -3px at 64px) for the signature compressed look\n- Use pill-shaped (9999px) radius for primary CTA buttons — the organic shape is core to the identity\n- Reserve black (`#000000`) for headlines and primary CTAs — it carries maximum authority on the light canvas\n- Use Slate Gray (`#60646c`) for secondary text — it's the precise balance between readable and receded\n- Maintain enormous vertical spacing between sections (96px+) — the gallery pacing defines the premium feel\n- Use product screenshots as the primary visual content — the interface stays monochrome, the products bring color\n- Apply Inter at the full weight range (400–900) — weight contrast IS the hierarchy\n\n### Don't\n- Don't introduce decorative colors into the interface chrome — the monochromatic palette is intentional\n- Don't use sharp corners (border-radius \u003C 6px) on interactive elements — the pill\u002Frounded geometry is the signature\n- Don't reduce section spacing below 64px — the breathing room is the design\n- Don't use heavy drop shadows — depth comes from background contrast and whisper-soft shadows\n- Don't mix in additional typefaces — Inter handles everything from display to caption\n- Don't use letter-spacing wider than -0.25px on body text — extreme tracking is reserved for display only\n- Don't use borders heavier than 2px — containment is subtle, achieved through background color and gentle borders\n- Don't add gradients to the interface — visual richness comes from content, not decoration\n- Don't use saturated colors outside of semantic contexts — the palette is strictly grayscale + functional blue\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |\n| Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |\n| Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |\n\n*Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()\u002Fclamp()-based responsive system rather than fixed breakpoint snapping.*\n\n### Touch Targets\n- Buttons use generous radius (24–36px) creating large, finger-friendly surfaces\n- Navigation links spaced with adequate gap\n- Status badge sized for touch (36px radius)\n- Minimum recommended: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav with CTA collapses to hamburger on mobile\n- **Feature sections**: Multi-column → stacked single column\n- **Hero text**: 64px → ~36px progressive scaling\n- **Device previews**: Grid → stacked\u002Fcarousel\n- **Cards**: Side-by-side → vertical stacking\n- **Spacing**: Reduces proportionally but maintains generous rhythm\n\n### Image Behavior\n- Product screenshots scale proportionally\n- Device mockups may simplify or show fewer devices on mobile\n- Rounded corners maintained at all sizes\n- Lazy loading for below-fold content\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA \u002F Headlines: \"Expo Black (#000000)\"\n- Page Background: \"Cloud Gray (#f0f0f3)\"\n- Card Surface: \"Pure White (#ffffff)\"\n- Body Text: \"Near Black (#1c2024)\"\n- Secondary Text: \"Slate Gray (#60646c)\"\n- Borders: \"Border Lavender (#e0e1e6)\"\n- Links: \"Link Cobalt (#0d74ce)\"\n- Tertiary Text: \"Silver (#b0b4ba)\"\n\n### Example Component Prompts\n- \"Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath.\"\n- \"Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px).\"\n- \"Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6).\"\n- \"Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce).\"\n- \"Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0).\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes — \"use Slate Gray (#60646c)\" not \"make it gray\"\n3. Use radius values deliberately — 6px for buttons, 8px for cards, 24px for images, 9999px for pills\n4. Describe the \"feel\" alongside measurements — \"enormous breathing room with 96px section spacing\"\n5. Always specify Inter and the exact weight — weight contrast IS the hierarchy\n6. For shadows, specify \"whisper shadow\" or \"standard elevation\" from the elevation table\n7. Keep the interface monochrome — let product content be the color\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Expo (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-expo-black: #000000;\n    --color-near-black: #1c2024;\n    --color-link-cobalt: #0d74ce;\n    --color-legal-blue: #476cff;\n    --color-widget-sky: #47c2ff;\n    --color-preview-purple: #8145b5;\n    --color-cloud-gray: #f0f0f3;\n    --color-pure-white: #ffffff;\n    --color-widget-dark: #1a1a1a;\n    --color-banner-dark: #171717;\n    --color-slate-gray: #60646c;\n    --color-mid-slate: #555860;\n    --color-silver: #b0b4ba;\n    --color-pewter: #999999;\n    --color-light-silver: #cccccc;\n    --color-dark-slate: #363a3f;\n    --color-charcoal: #333333;\n    --color-warning: #ab6400;\n    --color-destructive: #eb8e90;\n    --color-border-lavender: #e0e1e6;\n    --color-input-border: #d9d9e0;\n    --color-focus-ring: #2547d0;\n    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    \u002F* Light mode *\u002F\n    --bg-page: var(--color-cloud-gray);\n    --bg-card: var(--color-pure-white);\n    --bg-nav: rgba(240,240,243,0.92);\n    --text-primary: var(--color-near-black);\n    --text-secondary: var(--color-slate-gray);\n    --text-muted: var(--color-silver);\n    --border-color: var(--color-border-lavender);\n    --border-subtle: rgba(224,225,230,0.5);\n    --section-label-color: var(--color-expo-black);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--color-expo-black); }\n  .nav-brand svg { width: 24px; height: 24px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-near-black); }\n  .nav-cta {\n    background: var(--color-expo-black);\n    color: var(--color-pure-white);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .nav-status {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    background: var(--color-pure-white);\n    border: 1px solid var(--color-input-border);\n    border-radius: 9999px;\n    padding: 4px 12px 4px 8px;\n  }\n  .nav-status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #22c55e;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero h1 {\n    font-family: var(--font-body);\n    font-size: 60px;\n    font-weight: 700;\n    line-height: 1.10;\n    letter-spacing: -3px;\n    margin-bottom: 24px;\n    color: var(--color-expo-black);\n    position: relative;\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.4;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary-pill {\n    background: var(--color-expo-black);\n    color: var(--color-pure-white);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-standard {\n    background: var(--color-pure-white);\n    color: var(--color-near-black);\n    padding: 12px 24px;\n    border: 1px solid var(--color-input-border);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 96px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 48px;\n    font-weight: 600;\n    line-height: 1.10;\n    letter-spacing: -2px;\n    margin-bottom: 48px;\n    color: var(--color-expo-black);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }\n  .color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }\n  .color-swatch-block { height: 80px; }\n  .color-swatch-info { padding: 12px; background: var(--bg-card); }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-demo { text-align: center; }\n  .button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }\n  .btn-dark-pill {\n    background: var(--color-expo-black);\n    color: var(--color-pure-white);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-white-standard {\n    background: var(--color-pure-white);\n    color: var(--color-near-black);\n    padding: 12px 24px;\n    border: 1px solid var(--color-input-border);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-dark-rounded {\n    background: var(--color-expo-black);\n    color: var(--color-pure-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 32px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card { background: var(--bg-card); border-radius: 8px; padding: 28px; }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px; }\n  .card-glow { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px; border-radius: 16px; }\n  .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px; margin-bottom: 12px; color: var(--color-near-black); }\n  .card p { color: var(--text-secondary); font-size: 16px; line-height: 1.40; }\n  .card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-expo-black); margin-bottom: 16px; }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-near-black);\n    border: 1px solid var(--color-dark-slate);\n    border-radius: 8px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.4;\n    color: #f2f2f2;\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-link-cobalt); }\n  .code-block .string { color: #22c55e; }\n  .code-block .comment { color: var(--color-pewter); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); border-radius: 2px; margin-bottom: 8px; }\n  .spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n  .radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-surface { border: none; background: var(--bg-card); }\n  .elevation-whisper { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px; }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px; }\n  .elevation-modal { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.15) 0px 20px 40px, rgba(0,0,0,0.08) 0px 8px 16px; }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-expo-black); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .nav-status { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; letter-spacing: -1.5px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; letter-spacing: -1px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\u003Cpath d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\u003C\u002Fsvg>\n    Expo\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cdiv class=\"nav-status\">\u003Cspan class=\"nav-status-dot\">\u003C\u002Fspan> All Systems Operational\u003C\u002Fdiv>\n    \u003Cbutton class=\"nav-cta\">Sign Up\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Expo\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-pill\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-standard\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Expo Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary headlines, CTA buttons, brand anchor\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #1c2024;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c2024\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text, softer than pure black for reading\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #0d74ce;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Cobalt\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d74ce\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Standard links, interactive signals\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #476cff;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Legal Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#476cff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Footer\u002Flegal links, brighter accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #47c2ff;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Widget Sky\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#47c2ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Widget branding, lightest accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #8145b5;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Preview Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8145b5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Beta\u002Fpreview feature indicators\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #f0f0f3; border-bottom: 1px solid #e0e1e6;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cloud Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e0e1e6;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card surfaces, elevated containers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #1a1a1a;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Widget Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark theme widgets, overlays\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #171717;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Banner Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Promo banners, high-contrast surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #60646c;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#60646c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text (305 instances)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #555860;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#555860\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Emphasized secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #b0b4ba;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b0b4ba\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text, placeholders, metadata\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#363a3f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders on dark surfaces, switch tracks\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #ab6400;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning Amber\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ab6400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning states, deep amber for seriousness\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #eb8e90;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Destructive Rose\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eb8e90\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled destructive actions, gentle alarm\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #e0e1e6;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Lavender\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e1e6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Standard card\u002Fcontainer borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #d9d9e0;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Input Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d9d9e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, form elements, interactive borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 60px; font-weight: 700; line-height: 1.10; letter-spacing: -3px; color: var(--color-expo-black);\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 700–900 \u002F 1.10 \u002F -3px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -2px; color: var(--color-expo-black);\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 600 \u002F 1.10 \u002F -2px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Sub-heading — 20px \u002F 600 \u002F 1.20 \u002F -0.25px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);\">Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400–500 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.40;\">Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400–700 \u002F 1.25–1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.40; color: var(--text-secondary);\">Caption text for descriptions and metadata labels\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Caption \u002F Label — 14px \u002F 400–600 \u002F 1.00–1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.00; color: var(--text-muted);\">Tag \u002F Small Badge\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Tag \u002F Small — 12px \u002F 500 \u002F 1.00–1.60 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.40;\">npx create-expo-app@latest my-app\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400–600 \u002F 1.40 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.40;\">import { Camera } from \"expo-camera\";\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Caption — 14px \u002F 400–600 \u002F 1.40 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.60; text-transform: uppercase; color: var(--text-muted);\">REACT NATIVE\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Small \u002F Tag — 12px \u002F 400 \u002F 1.60 \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-dark-pill\">Get Started\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Primary Pill (Dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-white-standard\">View Docs\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Standard (White)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-dark-rounded\">Sign Up Free\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Dark Rounded (32px)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">\u002F\u002F Get started with Expo\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">$\u003C\u002Fspan> npx create-expo-app@latest my-app\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Lavender Container\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px Border Lavender border and 8px radius. White surface clearly lifted from Cloud Gray page background.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">Elevated (Whisper)\u003C\u002Fdiv>\n      \u003Ch3>Whisper Shadow Lift\u003C\u002Fh3>\n      \u003Cp>Subtle card elevation with whisper-soft shadow. Barely perceptible lift for hover states and highlighted content.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glow\">\n      \u003Cdiv class=\"card-label\">Featured (Glow)\u003C\u002Fdiv>\n      \u003Ch3>Standard Elevation\u003C\u002Fh3>\n      \u003Cp>Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 1px to 144px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 256px; height: 256px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Standard cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Feature panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images, videos\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Cloud Gray page background, inline text.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-surface\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">White bg, no shadow. Standard white cards on Cloud Gray.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-whisper\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Whisper-soft shadow. Subtle card lift, hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Standard floating shadow. Feature showcases, screenshots.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-modal\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Modal\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy shadow with dark overlay. Dialogs, overlays.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Expo (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-expo-black: #000000;\n    --color-near-black: #1c2024;\n    --color-link-cobalt: #0d74ce;\n    --color-legal-blue: #476cff;\n    --color-widget-sky: #47c2ff;\n    --color-preview-purple: #8145b5;\n    --color-cloud-gray: #f0f0f3;\n    --color-pure-white: #ffffff;\n    --color-widget-dark: #1a1a1a;\n    --color-banner-dark: #171717;\n    --color-slate-gray: #60646c;\n    --color-mid-slate: #555860;\n    --color-silver: #b0b4ba;\n    --color-pewter: #999999;\n    --color-light-silver: #cccccc;\n    --color-dark-slate: #363a3f;\n    --color-charcoal: #333333;\n    --color-warning: #ab6400;\n    --color-destructive: #eb8e90;\n    --color-border-lavender: #e0e1e6;\n    --color-input-border: #d9d9e0;\n    --color-focus-ring: #2547d0;\n    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    \u002F* Dark mode *\u002F\n    --bg-page: var(--color-banner-dark);\n    --bg-card: var(--color-widget-dark);\n    --bg-nav: rgba(23,23,23,0.92);\n    --text-primary: var(--color-pure-white);\n    --text-secondary: var(--color-silver);\n    --text-muted: var(--color-pewter);\n    --border-color: var(--color-dark-slate);\n    --border-subtle: rgba(54,58,63,0.5);\n    --section-label-color: var(--color-pure-white);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--color-pure-white); }\n  .nav-brand svg { width: 24px; height: 24px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--color-silver); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-pure-white); }\n  .nav-cta {\n    background: var(--color-pure-white);\n    color: var(--color-expo-black);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .nav-status {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--color-silver);\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    padding: 4px 12px 4px 8px;\n  }\n  .nav-status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #22c55e;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero h1 {\n    font-family: var(--font-body);\n    font-size: 60px;\n    font-weight: 700;\n    line-height: 1.10;\n    letter-spacing: -3px;\n    margin-bottom: 24px;\n    color: var(--color-pure-white);\n    position: relative;\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.4;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary-pill {\n    background: var(--color-pure-white);\n    color: var(--color-expo-black);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-standard {\n    background: var(--bg-card);\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 96px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-body);\n    font-size: 48px;\n    font-weight: 600;\n    line-height: 1.10;\n    letter-spacing: -2px;\n    margin-bottom: 48px;\n    color: var(--color-pure-white);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }\n  .color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }\n  .color-swatch-block { height: 80px; }\n  .color-swatch-info { padding: 12px; background: var(--bg-card); }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-demo { text-align: center; }\n  .button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }\n  .btn-dark-pill {\n    background: var(--color-pure-white);\n    color: var(--color-expo-black);\n    padding: 12px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-white-standard {\n    background: var(--bg-card);\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-dark-rounded {\n    background: var(--color-pure-white);\n    color: var(--color-expo-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 32px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card { background: var(--bg-card); border-radius: 8px; padding: 28px; }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }\n  .card-glow { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; border-radius: 16px; }\n  .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px; margin-bottom: 12px; color: var(--color-pure-white); }\n  .card p { color: var(--text-secondary); font-size: 16px; line-height: 1.40; }\n  .card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-pure-white); margin-bottom: 16px; }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-expo-black);\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.4;\n    color: #f2f2f2;\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-widget-sky); }\n  .code-block .string { color: #22c55e; }\n  .code-block .comment { color: var(--color-pewter); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 8px; }\n  .spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n  .radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-surface { border: none; background: var(--bg-card); }\n  .elevation-whisper { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.3) 0px 3px 6px, rgba(0,0,0,0.2) 0px 2px 4px; }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.4) 0px 10px 20px, rgba(0,0,0,0.2) 0px 3px 6px; }\n  .elevation-modal { border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,0.5) 0px 20px 40px, rgba(0,0,0,0.3) 0px 8px 16px; }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-pure-white); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .nav-status { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; letter-spacing: -1.5px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; letter-spacing: -1px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\u003Cpath d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\u003C\u002Fsvg>\n    Expo\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cdiv class=\"nav-status\">\u003Cspan class=\"nav-status-dot\">\u003C\u002Fspan> All Systems Operational\u003C\u002Fdiv>\n    \u003Cbutton class=\"nav-cta\">Sign Up\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Expo\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-pill\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-standard\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Expo Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary headlines, CTA buttons, brand anchor\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #1c2024; border-bottom: 1px solid #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c2024\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text, softer than pure black for reading\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #0d74ce;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Cobalt\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d74ce\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Standard links, interactive signals\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #476cff;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Legal Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#476cff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Footer\u002Flegal links, brighter accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #47c2ff;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Widget Sky\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#47c2ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Widget branding, lightest accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #8145b5;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Preview Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8145b5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Beta\u002Fpreview feature indicators\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #f0f0f3;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cloud Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary page background (light mode)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card surfaces, elevated containers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #1a1a1a; border-bottom: 1px solid #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Widget Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark theme card surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #171717; border-bottom: 1px solid #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Banner Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark theme page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #60646c;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#60646c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text (305 instances)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #555860;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#555860\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Emphasized secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #b0b4ba;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b0b4ba\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text, placeholders, metadata\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #363a3f;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#363a3f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders on dark surfaces, switch tracks\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #ab6400;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning Amber\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ab6400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning states, deep amber for seriousness\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #eb8e90;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Destructive Rose\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eb8e90\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled destructive actions, gentle alarm\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #e0e1e6;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Lavender\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e1e6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Standard card\u002Fcontainer borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #d9d9e0;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Input Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d9d9e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, form elements, interactive borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 60px; font-weight: 700; line-height: 1.10; letter-spacing: -3px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 64px \u002F 700–900 \u002F 1.10 \u002F -3px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 48px; font-weight: 600; line-height: 1.10; letter-spacing: -2px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 600 \u002F 1.10 \u002F -2px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.25px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Sub-heading — 20px \u002F 600 \u002F 1.20 \u002F -0.25px — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);\">Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400–500 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.40;\">Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400–700 \u002F 1.25–1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.40; color: var(--text-secondary);\">Caption text for descriptions and metadata labels\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Caption \u002F Label — 14px \u002F 400–600 \u002F 1.00–1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.00; color: var(--text-muted);\">Tag \u002F Small Badge\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Tag \u002F Small — 12px \u002F 500 \u002F 1.00–1.60 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.40;\">npx create-expo-app@latest my-app\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400–600 \u002F 1.40 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.40;\">import { Camera } from \"expo-camera\";\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Caption — 14px \u002F 400–600 \u002F 1.40 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.60; text-transform: uppercase; color: var(--text-muted);\">REACT NATIVE\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Small \u002F Tag — 12px \u002F 400 \u002F 1.60 \u002F uppercase — JetBrains Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-dark-pill\">Get Started\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Primary Pill (Light)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-white-standard\">View Docs\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Standard (Surface)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-dark-rounded\">Sign Up Free\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Rounded (32px)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">\u002F\u002F Get started with Expo\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">$\u003C\u002Fspan> npx create-expo-app@latest my-app\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Dark Slate Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px Dark Slate border and 8px radius. Widget Dark surface on Banner Dark background.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">Elevated (Whisper)\u003C\u002Fdiv>\n      \u003Ch3>Whisper Shadow Lift\u003C\u002Fh3>\n      \u003Cp>Subtle card elevation with soft shadow. Barely perceptible lift for hover states and highlighted content.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glow\">\n      \u003Cdiv class=\"card-label\">Featured (Glow)\u003C\u002Fdiv>\n      \u003Ch3>Standard Elevation\u003C\u002Fh3>\n      \u003Cp>Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 1px to 144px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 256px; height: 256px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Standard cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Feature panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images, videos\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Banner Dark page background, inline text.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-surface\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Widget Dark bg, no shadow. Standard cards on Banner Dark.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-whisper\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Soft shadow. Subtle card lift, hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Standard floating shadow. Feature showcases, screenshots.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-modal\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Modal\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy shadow with dark overlay. Dialogs, overlays.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Expo Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fexpo\u002FDESIGN.md) extracted from the public [Expo](https:\u002F\u002Fexpo.dev\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fexpo\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Expo design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Expo Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fexpo\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Expo Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fexpo\u002Fpreview-screenshot.png)\n",{"slug":110,"name":111,"category":30,"designMd":112,"previewHtml":113,"previewDarkHtml":114,"readme":115},"ferrari","Ferrari","# Design System Inspiration of Ferrari\n\n## 1. Visual Theme & Atmosphere\n\nFerrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens onto an expanse of absolute black, broken only by the iconic Prancing Horse emblem floating alone in its own atmosphere. Below, the content unfolds in dramatic alternations between inky-dark cinematic sections and crisp white editorial panels. This chiaroscuro rhythm — darkness yielding to light, machinery yielding to human story — feels more like paging through a Ferrari yearbook than scrolling a commercial website. Every section is a curated vignette: a concept car dissolving from shadow, two F1 drivers posed with sculptural stillness, a lineup of production models arranged in a jewel-toned parade.\n\nThe color language is monastically restrained for a brand built on speed and emotion. Ferrari Red (`#DA291C`) appears with almost surgical sparseness — reserved for the Subscribe CTA and accent moments that need to command immediate attention. The vast majority of the interface lives in black, white, and a carefully calibrated gray scale (from `#303030` dark surfaces through `#8F8F8F` mid-tones to `#D2D2D2` light borders). Two yellows — Racing Yellow (`#FFF200`) and the deeper Modena Yellow (`#F6E500`) — exist in the token system as heritage accents for special contexts, honoring Ferrari's racing provenance. The restraint means that when red does appear, it carries the weight of the entire brand.\n\nTypography relies on FerrariSans — a proprietary sans-serif family with medium-weight headings (500–700) and compact proportions. Display text runs at 24–26px for section titles, while the UI chrome lives at 12–16px in weights ranging from regular to bold. A secondary \"Body-Font\" custom typeface handles captions and utility text, rendered in uppercase with wide letter-spacing (1px) to create a label-like editorial quality. This two-font system — FerrariSans for narrative authority, Body-Font for structural annotation — gives the site a print-magazine hierarchy. No text decoration is gratuitous. Letter-spacing is tight for headlines and deliberately expanded for labels, creating a visual rhythm that alternates between urgency and composure.\n\n**Key Characteristics:**\n- Chiaroscuro layout alternating between deep black sections and clean white editorial panels\n- Ferrari Red (`#DA291C`) used with extreme sparseness — accent, not atmosphere\n- Prancing Horse emblem as isolated hero element on a void-black field\n- FerrariSans proprietary typeface with compact proportions and medium weights\n- Photo-journalism imagery: concept renders, driver portraits, lineup parades — each section is a story\n- Uppercase Body-Font labels with wide letter-spacing (1px) for editorial annotation\n- Nearly zero border-radius (2px default) reflecting precision engineering aesthetics\n- Dual-framework architecture (PrimeReact + Element Plus) powering 32+ interactive components\n- Carousel-driven hero with editorial slides and arrow\u002Fdot navigation\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Ferrari Red** (`#DA291C`): The iconic Rosso Corsa — primary accent and CTA color. Used for the Subscribe button, key action triggers, and brand moments where maximum visual authority is needed. The single most important color in the system (--f-color-accent-100)\n- **Pure White** (`#FFFFFF`): Primary surface for editorial content panels, navigation text on dark backgrounds, and button fills. The canvas that provides breathing room between dark cinematic sections (--f-color-ui-0)\n\n### Secondary & Accent\n- **Dark Red** (`#B01E0A`): Deeper variant of Ferrari Red for hover\u002Fpressed states and high-contrast contexts — adds dimensionality to the brand color without introducing a new hue (--f-color-accent-90)\n- **Deep Red** (`#9D2211`): The most saturated dark red — used for active states and extra emphasis where even Dark Red needs more weight (--f-color-accent-80)\n- **Racing Yellow** (`#FFF200`): Heritage accent from Ferrari's racing livery — reserved for special highlights and motorsport-related contexts (--f-color-yellow-hypersail)\n- **Modena Yellow** (`#F6E500`): Slightly warmer and more golden than Racing Yellow — used for secondary heritage accents and category markers (--f-color-yellow)\n\n### Surface & Background\n- **Absolute Black** (`#000000`): Hero sections, cinematic backgrounds, and the dominant dark surface — the void that makes imagery and the Prancing Horse emblem float\n- **Dark Surface** (`#303030`): Secondary dark surface for footer regions, newsletter sections, and layered dark panels — slightly lifted from pure black for depth differentiation (--f-color-ui-90)\n- **Light Gray Surface** (`#D2D2D2`): Subtle alternate surface for dividers and border treatments on white panels (--f-color-ui-20)\n- **Overlay Dark** (`hsla(0, 0%, 7%, 0.8)`): Semi-transparent near-black for modal overlays and image caption backgrounds (--f-color-overlay-darker)\n\n### Neutrals & Text\n- **Near Black** (`#181818`): Primary body text color on light surfaces — slightly softened from absolute black for better readability (link default color)\n- **Dark Gray** (`#666666`): Secondary text and subdued UI labels — used where text needs to recede from the primary hierarchy (--f-color-black-60)\n- **Mid Gray** (`#8F8F8F`): Tertiary text for metadata, timestamps, and supportive content (--f-color-black-50)\n- **Silver Gray** (`#969696`): Placeholder text and disabled state indicators (--f-color-black-55)\n\n### Semantic & Accent\n- **Warning Red** (`#F13A2C`): Accessible warning state — brighter and more orange-shifted than Ferrari Red to differentiate semantic alerts from brand expression (--f-color-accessible-warning)\n- **Success Green** (`#03904A`): Confirmation and positive status indicators (--f-color-accessible-success)\n- **Info Blue** (`#4C98B9`): Informational callouts, tooltips, and neutral status messaging (--f-color-accessible-info)\n- **Link Hover Blue** (`#3860BE`): Interactive hover state for text links — a dignified navy-blue that signals interactivity without competing with Ferrari Red\n\n### Gradient System\n- No explicit gradients in the token system\n- Depth is achieved through photography and the binary contrast between black and white surfaces\n- The overlay darker color (`hsla(0, 0%, 7%, 0.8)`) creates depth through transparency layering over imagery\n- Occasional photographic gradients (light falloff in studio shots) provide atmospheric depth within image content\n\n## 3. Typography Rules\n\n### Font Family\n- **FerrariSans**: Primary typeface for headings, navigation, buttons, and editorial content. A proprietary sans-serif with medium weight as the default (500), compact x-height, and precise letter-spacing control. Fallbacks: Arial, Helvetica, sans-serif\n- **Body-Font**: Secondary typeface for captions, labels, and utility text. Frequently rendered in uppercase with expanded letter-spacing (1px) for an editorial label aesthetic. Used for category tags and small annotation text\n- **Arial \u002F Helvetica**: System fallback fonts used in cookie consent modals, form elements, and third-party component frameworks\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Section Title | 26px (1.63rem) | 500 | 1.20 | normal | FerrariSans, primary editorial headings on white backgrounds |\n| Card Heading | 24px (1.50rem) | 400 | normal | normal | FerrariSans, content card titles |\n| Subheading | 18px (1.13rem) | 700 | 1.20 (tight) | normal | FerrariSans, bold subsection labels |\n| UI Heading | 16px (1.00rem) | 500 | 1.40 | 0.08px | FerrariSans, component headings and nav items |\n| Body Bold | 16px (1.00rem) | 700 | 1.30 (tight) | normal | FerrariSans, emphasized inline text |\n| Button Label | 16px (1.00rem) | 400 | normal | 1.28px | FerrariSans, primary button text with wide tracking |\n| Small Button | 14.4px (0.90rem) | 700 | 1.00 (tight) | normal | FerrariSans, compact action buttons |\n| Nav Link | 13px (0.81rem) | 600 | 1.20 (tight) | 0.13px | FerrariSans, navigation and footer links |\n| Caption | 13px (0.81rem) | 400 | 1.50 | 0.195px | FerrariSans\u002FBody-Font, metadata and descriptions |\n| Micro Button | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | FerrariSans, small CTA with wide tracking |\n| Label Upper | 12px (0.75rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase labels and category tags |\n| Micro Label | 11px (0.69rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase smallest annotation text |\n| Cookie Text | 45px (2.81rem) | 400 | 1.50 | 0.195px | Arial, consent dialog oversized button text |\n\n### Principles\n- **Proprietary identity**: FerrariSans is exclusive to Ferrari — it cannot be substituted without losing brand recognition. The font's compact proportions and medium weight default (500) convey engineering precision\n- **Two-register system**: FerrariSans handles narrative voice (headings, content, buttons) while Body-Font handles structural annotation (labels, tags, micro-captions) — this mirrors print magazine conventions of editorial text vs. technical labels\n- **Uppercase as emphasis tool**: Body-Font captions use `text-transform: uppercase` with expanded letter-spacing (1px) to create a visually distinct label layer that reads as \"informational overlay\" rather than primary content\n- **Compact line-heights**: Headlines use tight line-heights (1.00–1.30) creating dense, impactful text blocks, while body text opens to 1.50 for comfortable reading — the contrast between compressed headers and relaxed body text creates visual tension\n- **Weight range 400–700**: Four weights active in the system (400, 500, 600, 700) — significantly more range than Tesla but still controlled. 500 is the default \"voice,\" 700 is for emphasis, 400 for body, 600 for navigation\n\n## 4. Component Stylings\n\n### Buttons\nFerrari's buttons are minimal white rectangles with near-zero radius — the CTA philosophy is \"architecture, not decoration.\"\n\n**Primary CTA (White)** — The default action button:\n- Default: bg `#FFFFFF`, text `#000000`, fontSize 16px (FerrariSans), letterSpacing 1.28px, padding 12px 10px, borderRadius 2px, border 1px solid `#000000`\n- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9\n- Focus: bg `#1EAEDB`, text `#FFFFFF`, border 1px solid `#FFFFFF`, outline 2px solid `#000000`, opacity 0.9\n- Used for: \"Configure\" actions, secondary calls to action on light backgrounds\n\n**Subscribe CTA (Red)** — The high-emphasis action button:\n- Default: bg `#DA291C` (Ferrari Red), text `#FFFFFF`, borderRadius 2px, padding 12px 10px\n- Used for: Newsletter subscribe, primary conversion actions on dark backgrounds\n- The only button that uses Ferrari Red — reserved for maximum visual priority\n\n**Ghost Button (White Border)** — For dark backgrounds:\n- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, borderRadius 2px, padding 12px 10px\n- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9\n- Focus: same as Primary CTA focus state\n- Used for: Actions overlaid on dark imagery and cinematic sections\n\n**Text Link** — Inline navigation:\n- Default: text `#181818` (on light surfaces) or `#FFFFFF` (on dark), no border, no background\n- Hover: color shifts to `#3860BE` (Link Hover Blue), decoration removes underline\n- White variant on dark surfaces uses underline decoration by default\n- FerrariSans or Body-Font depending on context (Body-Font for uppercase label links)\n\n### Cards & Containers\n\n**Editorial Card** (Content sections):\n- Background: white\n- Border: none\n- Shadow: none\n- Layout: image above, heading + caption below\n- Image treatment: full-width within card, no rounded corners on image\n- Text: FerrariSans heading (16–24px) + Body-Font caption (12–13px uppercase)\n\n**Dark Cinematic Card** (Hero\u002Ffeature sections):\n- Background: `#000000` (Absolute Black)\n- Full-bleed imagery with text overlay\n- No border, no shadow — the darkness IS the container\n- Text: white, positioned with careful negative space\n\n**Vehicle Lineup** (Model carousel):\n- Horizontal scrollable row of vehicle thumbnails\n- Each vehicle on a neutral\u002Fwhite background\n- Navigation: arrow buttons + dot indicators\n- Background shifts to showcase the selected model's color context\n\n### Inputs & Forms\n\n**Newsletter Input** (Footer section):\n- Background: transparent on dark surface\n- Text: white\n- Border: 1px solid `#CCCCCC`\n- Placeholder: `#969696` (Silver Gray)\n- Focus: border color transitions (standard browser focus ring)\n- Label: Body-Font uppercase, 12px, 1px letter-spacing\n\n**Cookie Consent** (Modal):\n- Background: white\n- Border radius: 8px (dialog)\n- Shadow: `rgb(153, 153, 153) 1px 1px 1px 0px`\n- Buttons: oversized (45px Arial), white bg with black border\n- Uses standard PrimeReact\u002FElement Plus modal framework\n\n### Navigation\n- **Desktop**: Prancing Horse logo centered at top of page, primary navigation below — not a traditional horizontal nav bar but a full-width header block on black background\n- **Logo**: Centered Prancing Horse emblem (44×42px) on absolute black — the single most prominent UI element\n- **Links**: FerrariSans, 13px, weight 600, white text on dark backgrounds\n- **Mobile**: Hamburger collapse to vertical navigation drawer\n- **Footer**: Multi-column layout on `#303030` (Dark Surface) with category links in Body-Font uppercase\n- **No sticky nav behavior** observed — the page scrolls naturally with the header moving off-screen\n\n### Image Treatment\n- **Hero**: Full-width editorial photography on black backgrounds — concept cars in atmospheric studio lighting, editorial portraits with cinematic composition\n- **Aspect ratios**: Mixed — landscape (16:9) for hero sections, near-square for portrait\u002Fdriver imagery, wide panoramic for vehicle lineups\n- **Full-bleed vs padded**: Hero images are full-bleed edge-to-edge; editorial content images are padded within white containers\n- **Lazy loading**: Below-fold sections use progressive loading (PrimeReact framework handles this)\n- **Image quality**: High-resolution photography with studio lighting — no user-generated or lifestyle imagery. Every image is art-directed\n\n### Carousel Component\n- Editorial carousel with multiple slides\n- Dot indicators for slide position\n- Arrow navigation (left\u002Fright) at slide edges\n- Auto-advancing with manual override\n- Content: mixed editorial — event recaps, model launches, racing highlights\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px (detected system base)\n- **Scale**: 1px, 2px, 4px, 5px, 6px, 9px, 10px, 11.2px, 12px, 13px, 15px, 16px, 19px, 20px, 25px\n- **Button padding**: 12px vertical, 10px horizontal — compact and precise\n- **Section padding**: Generous vertical spacing (40–80px estimated) between major content blocks\n- **Card gaps**: 16–20px between grid items\n- **Footer padding**: 25px horizontal sections within the dark footer block\n\n### Grid & Container\n- **Max width**: 1920px (largest breakpoint) with content constraining at narrower widths\n- **Hero**: Full-bleed on black, content centered\n- **Editorial sections**: 2-column layouts with image + text, alternating sides\n- **Vehicle lineup**: Horizontal scroll\u002Fcarousel, 5–6 models visible at desktop width\n- **Footer**: 4-column grid for link categories\n\n### Whitespace Philosophy\nFerrari treats white space as a gallery wall. Each section — whether a concept car render on black void or a pair of F1 drivers on neutral gray — is given its own \"room\" of breathing space. The alternating black\u002Fwhite sections create a pacing rhythm: dark = immersive moment, white = editorial content, dark = immersive moment. This cadence makes scrolling feel like turning pages in a luxury publication. White space between editorial cards is moderate (not Tesla-extreme) because Ferrari is telling stories, not exhibiting single objects.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 1px | Subtle softening on small inline elements (spans) |\n| 2px | Default for buttons, inputs, and interactive elements — barely perceptible, razor-precision |\n| 8px | Modal dialogs and overlay containers — the \"softest\" structural radius |\n| 50% | Circular elements: carousel dots, avatar thumbnails, slider handles |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, no border | Default state for all content sections and cards |\n| Level 1 (Subtle) | `rgb(153, 153, 153) 1px 1px 1px 0px` | Rare — cookie consent dialogs and dropdown menus |\n| Level 2 (Overlay) | `hsla(0, 0%, 7%, 0.8)` backdrop | Modal overlays and image caption backgrounds |\n| Level 3 (Border) | `1px solid #CCCCCC` | Input fields, form containers — depth through delineation not shadow |\n\n### Shadow Philosophy\nFerrari's approach to elevation is nearly as flat as Tesla's, but with a different rationale. Where Tesla avoids shadows for minimalism, Ferrari avoids them because the editorial photography provides all the visual depth needed. The single shadow token (`rgb(153, 153, 153) 1px 1px 1px 0px`) is extremely subtle — a 1-pixel whisper used only in utilitarian contexts like consent dialogs. The site communicates hierarchy through three strategies:\n1. **Surface color contrast**: Black sections vs. white sections create unmistakable layering\n2. **Overlay transparency**: The `--f-color-overlay-darker` at 80% opacity creates depth without shadow\n3. **Photographic depth**: Studio-lit car imagery with reflections, ground shadows, and atmospheric haze provides all the visual dimensionality\n\n### Decorative Depth\n- No UI gradients, no glows, no blur effects on interface elements\n- The Prancing Horse logo on black creates a \"floating in void\" effect through pure contrast — no glow or shadow needed\n- Dark-to-light section transitions are hard cuts, not gradient blends — reinforcing the editorial page-turn metaphor\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Ferrari Red (`#DA291C`) sparingly — only for primary CTAs and brand-critical moments. Its power comes from restraint\n- Alternate between black cinematic sections and white editorial sections to create the signature chiaroscuro rhythm\n- Use FerrariSans at weight 500 as the default heading voice — it's the typographic equivalent of the engine note\n- Apply Body-Font in uppercase with 1px letter-spacing for all labels, category tags, and structural annotations\n- Keep border-radius at 2px for all interactive elements — razor precision, not rounded friendliness\n- Let photography carry the emotional weight — every image should be art-directed studio quality\n- Use the Prancing Horse emblem as a standalone hero element on black — never crowd it with adjacent content\n- Maintain the 12px\u002F10px button padding ratio — compact, purposeful, no excess\n- Use `#181818` (Near Black) for body text instead of pure `#000000` — the subtle warmth improves readability\n- Reserve the yellow accents (`#FFF200`, `#F6E500`) strictly for motorsport and racing heritage contexts\n\n### Don't\n- Scatter Ferrari Red across the interface as decoration — it's a CTA signal, not a theme color\n- Use rounded-pill buttons or large border-radii — the 2px precision is non-negotiable\n- Add box-shadows to cards or content containers — depth comes from surface color contrast and photography\n- Mix FerrariSans and Body-Font within the same text block — they serve separate hierarchical functions\n- Use colorful backgrounds (blue, green, etc.) for sections — the palette is exclusively black\u002Fwhite\u002Fgray with red and yellow accents\n- Apply text transforms to FerrariSans headings — uppercase is reserved for Body-Font labels only\n- Display low-quality or user-generated imagery — every photograph must meet editorial standards\n- Use the Link Hover Blue (`#3860BE`) for anything other than interactive hover states — it's not a brand color\n- Create busy layouts with multiple competing focal points — each section should have one clear story\n- Override the semantic color system (warning, success, info) with brand colors — `#F13A2C` warning is deliberately different from `#DA291C` brand red\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | ≤375px | Single-column, minimal padding (12px), stacked navigation, hero text scales to ~18px, full-width CTAs |\n| Mobile | 376–600px | Single-column, slightly larger padding (16px), hamburger nav, body text at 13px |\n| Tablet Small | 601–768px | 2-column editorial grid begins, hero images maintain full-width, footer switches to 2-column |\n| Tablet | 769–960px | Full 2-column layout, carousel shows 3 vehicles, padding increases to 20px |\n| Desktop | 961–1280px | Full navigation, 2-column editorial with larger imagery, vehicle lineup shows 5 models |\n| Large Desktop | 1281–1920px | Maximum content width, generous whitespace, hero photography at full cinematic scale |\n\n### Touch Targets\n- Primary CTA buttons: minimum 44px height with 12px vertical padding (meets WCAG AAA 44×44px target)\n- Navigation links: 13px text with 1.50 line-height and adequate spacing between items\n- Carousel arrows: 44px+ touch targets at viewport edges\n- Footer links: grouped with sufficient vertical spacing (16–20px) for touch accuracy\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to centered Prancing Horse logo + hamburger menu on mobile\n- **Editorial sections**: 2-column image+text layouts collapse to single-column with image stacking above text\n- **Vehicle lineup**: Horizontal carousel maintains scroll behavior but reduces visible models from 5 to 2–3\n- **Footer**: 4-column link grid collapses to 2-column on tablet, single-column accordion on mobile\n- **Hero carousel**: Full-width at all breakpoints, dot indicators and arrows scale proportionally\n- **Spacing reduction**: Section padding reduces from 40–80px (desktop) to 20–40px (mobile), maintaining proportional breathing room\n\n### Image Behavior\n- Hero images: full-bleed at all breakpoints, using `object-fit: cover` to maintain cinematic composition\n- Editorial images: responsive within their containers, maintaining aspect ratio\n- Vehicle lineup: thumbnail size scales but maintains consistent car-to-frame proportions\n- Art direction: mobile crops may tighten on vehicle subjects, reducing environmental context\n- Lazy loading: PrimeReact handles progressive image loading for below-fold content\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Ferrari Red (#DA291C)\"\n- Background Light: \"Pure White (#FFFFFF)\"\n- Background Dark: \"Absolute Black (#000000)\"\n- Secondary Dark Surface: \"Dark Surface (#303030)\"\n- Heading text (light bg): \"Near Black (#181818)\"\n- Body text: \"Dark Gray (#666666)\"\n- Tertiary text: \"Mid Gray (#8F8F8F)\"\n- Border: \"Border Gray (#CCCCCC)\"\n- Button Hover: \"Teal (#1EAEDB)\"\n- Link Hover: \"Link Blue (#3860BE)\"\n\n### Example Component Prompts\n- \"Create a hero section on Absolute Black (#000000) background with a centered logo emblem at the top, generous vertical spacing (80px+), and a single editorial headline in FerrariSans at 26px weight 500 in white, with a small Body-Font uppercase caption (12px, 1px letter-spacing) in Silver Gray (#969696) below\"\n- \"Design a Subscribe section on Dark Surface (#303030) with a left-aligned headline in white FerrariSans (24px\u002F500), a subtitle in Mid Gray (#8F8F8F, 13px), an email input with transparent background and 1px #CCCCCC border, and a Ferrari Red (#DA291C) Subscribe button with white text, 2px border-radius, and 12px 10px padding\"\n- \"Build an editorial card on white background with a full-width image (16:9 ratio) above, a FerrariSans heading (16px\u002F700, Near Black #181818) below, and a Body-Font uppercase label (11px, 1px letter-spacing, Mid Gray #8F8F8F) as the category tag — no border, no shadow, no border-radius\"\n- \"Create a vehicle lineup carousel showing 5 car thumbnails in a horizontal scroll on white background, with left\u002Fright arrow navigation, dot indicators below, and a FerrariSans model name (16px\u002F500) beneath each vehicle\"\n- \"Design a dark cinematic section with full-bleed studio photography of a concept car on Absolute Black, a white FerrariSans headline (26px\u002F500) positioned in the lower-left with generous padding (40px), and a Ghost Button (transparent bg, 1px white border, white text, 2px radius) as the CTA\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Ferrari's editorial rhythm means each section is a self-contained vignette\n2. Reference specific color names and hex codes from this document — the palette is small but each color has a precise role\n3. Use natural language descriptions, not CSS values — \"razor-sharp 2px corners\" conveys intent better than \"border-radius: 2px\"\n4. Describe the desired \"feel\" alongside specific measurements — \"editorial magazine page-turn between sections\" communicates the layout philosophy better than \"margin-bottom: 80px\"\n5. Always maintain the chiaroscuro contrast — if a section feels flat, check whether it needs to be on black or white to maintain the alternating rhythm\n6. Reserve Ferrari Red for ONE element per screen — if red appears in more than one place, it loses its authority\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Ferrari\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --ferrari-red: #DA291C;\n    --dark-red: #B01E0A;\n    --deep-red: #9D2211;\n    --pure-white: #FFFFFF;\n    --absolute-black: #000000;\n    --dark-surface: #303030;\n    --light-gray-surface: #D2D2D2;\n    --near-black: #181818;\n    --dark-gray: #666666;\n    --mid-gray: #8F8F8F;\n    --silver-gray: #969696;\n    --border-gray: #CCCCCC;\n    --border-mid: #909090;\n    --warning-red: #F13A2C;\n    --success-green: #03904A;\n    --info-blue: #4C98B9;\n    --link-blue: #3860BE;\n    --teal-hover: #1EAEDB;\n    --racing-yellow: #FFF200;\n    --modena-yellow: #F6E500;\n    --overlay-dark: hsla(0, 0%, 7%, 0.8);\n    --font-heading: 'DM Sans', Arial, Helvetica, sans-serif;\n    --font-body: 'Barlow Condensed', Arial, Helvetica, sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-heading);\n    background: var(--pure-white);\n    color: var(--near-black);\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: var(--absolute-black);\n    min-height: 52px;\n  }\n  .nav-brand {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--pure-white);\n    text-decoration: none;\n    letter-spacing: 0.13px;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--pure-white);\n    text-decoration: none;\n    padding: 6px 14px;\n    border-radius: 2px;\n    display: inline-flex;\n    align-items: center;\n    transition: color 0.3s;\n  }\n  .nav-links a:hover { color: var(--link-blue); }\n  .nav-cta {\n    background: var(--ferrari-red);\n    color: var(--pure-white) !important;\n    padding: 8px 20px;\n    border-radius: 2px;\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    text-decoration: none;\n    transition: background-color 0.3s;\n    display: inline-flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n  }\n  .nav-cta:hover { background: var(--dark-red); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    min-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 100px 40px 80px;\n    background: var(--absolute-black);\n    text-align: center;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 600px;\n    height: 600px;\n    background: radial-gradient(circle, rgba(218,41,28,0.06) 0%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-heading);\n    font-size: 42px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: normal;\n    color: var(--pure-white);\n    margin-bottom: 16px;\n    position: relative;\n  }\n  .hero .subtitle {\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--silver-gray);\n    margin-bottom: 12px;\n    line-height: 1.50;\n    position: relative;\n  }\n  .hero .label-tag {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    position: relative;\n  }\n  .btn-primary-red {\n    background: var(--ferrari-red);\n    color: var(--pure-white);\n    border: none;\n    border-radius: 2px;\n    padding: 12px 28px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-primary-red:hover { background: var(--dark-red); }\n  .btn-ghost {\n    background: transparent;\n    color: var(--pure-white);\n    border: 1px solid var(--pure-white);\n    border-radius: 2px;\n    padding: 12px 28px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-ghost:hover { background: var(--teal-hover); border-color: var(--teal-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-dark {\n    background: var(--pure-white);\n  }\n  .section-title {\n    font-family: var(--font-heading);\n    font-size: 26px;\n    font-weight: 500;\n    color: var(--near-black);\n    margin-bottom: 8px;\n    line-height: 1.20;\n  }\n  .section-desc {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--dark-gray);\n    margin-bottom: 40px;\n    line-height: 1.50;\n    letter-spacing: 0.195px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--light-gray-surface);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-group-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-bottom: 16px;\n    margin-top: 32px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 2px;\n    overflow: hidden;\n  }\n  .color-swatch .swatch-block {\n    height: 80px;\n    border-radius: 2px 2px 0 0;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px;\n    background: var(--pure-white);\n    border: 1px solid var(--border-gray);\n    border-top: none;\n    border-radius: 0 0 2px 2px;\n  }\n  .color-swatch .swatch-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--near-black);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    color: var(--dark-gray);\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 11px;\n    color: var(--mid-gray);\n    line-height: 1.3;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--light-gray-surface);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-family: var(--font-body);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    margin-top: 8px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-end;\n    margin-bottom: 24px;\n  }\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .button-item .btn-label {\n    font-family: var(--font-body);\n    font-size: 11px;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n  .btn-white-cta {\n    background: var(--pure-white);\n    color: var(--absolute-black);\n    border: 1px solid var(--absolute-black);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-white-cta:hover { background: var(--teal-hover); color: var(--pure-white); border-color: var(--teal-hover); }\n  .btn-red-cta {\n    background: var(--ferrari-red);\n    color: var(--pure-white);\n    border: 1px solid var(--ferrari-red);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-red-cta:hover { background: var(--dark-red); border-color: var(--dark-red); }\n  .btn-ghost-dark {\n    background: transparent;\n    color: var(--pure-white);\n    border: 1px solid var(--pure-white);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-ghost-dark:hover { background: var(--teal-hover); border-color: var(--teal-hover); }\n  .btn-text-link {\n    background: none;\n    border: none;\n    color: var(--near-black);\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 400;\n    letter-spacing: 0.195px;\n    cursor: pointer;\n    text-decoration: none;\n    transition: color 0.3s;\n    padding: 0;\n  }\n  .btn-text-link:hover { color: var(--link-blue); }\n  .dark-btn-row {\n    background: var(--absolute-black);\n    padding: 24px;\n    border-radius: 2px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-end;\n  }\n  .dark-btn-row .btn-label { color: var(--silver-gray); }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--pure-white);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .card-img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n    display: block;\n    background: var(--light-gray-surface);\n  }\n  .card-body { padding: 20px 0; }\n  .card-heading {\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--near-black);\n    line-height: 1.30;\n    margin-bottom: 8px;\n  }\n  .card-caption {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n    margin-bottom: 8px;\n  }\n  .card-text {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--dark-gray);\n    line-height: 1.50;\n  }\n  .card-dark {\n    background: var(--absolute-black);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .card-dark .card-img { background: var(--dark-surface); }\n  .card-dark .card-body { padding: 20px; }\n  .card-dark .card-heading { color: var(--pure-white); }\n  .card-dark .card-caption { color: var(--silver-gray); }\n  .card-dark .card-text { color: var(--mid-gray); }\n  .card-hover {\n    transition: transform 0.3s;\n  }\n  .card-hover:hover { transform: translateY(-2px); }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    max-width: 700px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full { grid-column: 1 \u002F -1; }\n  .form-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n  .form-input {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--near-black);\n    background: transparent;\n    border: 1px solid var(--border-gray);\n    border-radius: 2px;\n    padding: 12px 10px;\n    outline: none;\n    transition: border-color 0.3s;\n    line-height: 1.50;\n    letter-spacing: 0.195px;\n  }\n  .form-input::placeholder { color: var(--silver-gray); }\n  .form-input:focus { border-color: var(--ferrari-red); }\n  .form-input-error {\n    border-color: var(--warning-red);\n  }\n  .form-error-text {\n    font-size: 11px;\n    color: var(--warning-red);\n    font-family: var(--font-heading);\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n  }\n  .spacing-box {\n    background: var(--ferrari-red);\n    border-radius: 1px;\n    opacity: 0.8;\n    height: 40px;\n  }\n  .spacing-label {\n    font-family: monospace;\n    font-size: 10px;\n    color: var(--mid-gray);\n    white-space: nowrap;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--light-gray-surface);\n    border: 1px solid var(--border-gray);\n  }\n  .radius-label {\n    font-family: monospace;\n    font-size: 11px;\n    color: var(--mid-gray);\n    text-align: center;\n    line-height: 1.3;\n  }\n  .radius-context {\n    font-family: var(--font-body);\n    font-size: 11px;\n    color: var(--silver-gray);\n    text-align: center;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: 24px;\n    padding: 40px;\n    background: #F5F5F5;\n    border-radius: 2px;\n  }\n  .elevation-card {\n    background: var(--pure-white);\n    padding: 24px;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n  .elevation-label {\n    font-family: var(--font-heading);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--near-black);\n    margin-bottom: 4px;\n  }\n  .elevation-desc {\n    font-family: var(--font-heading);\n    font-size: 12px;\n    color: var(--mid-gray);\n    line-height: 1.50;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 60px 20px; min-height: 70vh; }\n    .hero h1 { font-size: 28px; }\n    .hero-buttons { flex-direction: column; gap: 12px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 22px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .form-group.full { grid-column: auto; }\n    .button-row, .dark-btn-row { flex-direction: column; align-items: flex-start; }\n    .elevation-grid { grid-template-columns: 1fr; padding: 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav-cta\" href=\"#elevation\">Explore\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"label-tag\">Design Token Catalog\u003C\u002Fdiv>\n  \u003Ch1>Design System Inspired by Ferrari\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual reference generated from DESIGN.md — every color, type rule, and component token documented\u003C\u002Fp>\n  \u003Cdiv class=\"label-tag\">Precision Engineering Meets Editorial Design\u003C\u002Fdiv>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary-red\">Subscribe\u003C\u002Fa>\n    \u003Ca href=\"#typography\" class=\"btn-ghost\">Configure\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Cdiv id=\"colors\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color extracted from Ferrari's design system with semantic names, hex values, and functional roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#DA291C;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Ferrari Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#DA291C\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary CTA and brand accent (--f-color-accent-100)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF; border:1px solid #D2D2D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary surface for editorial panels (--f-color-ui-0)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Secondary & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#B01E0A;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#B01E0A\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Hover\u002Fpressed states (--f-color-accent-90)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#9D2211;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Deep Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#9D2211\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Active states, extra emphasis (--f-color-accent-80)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#FFF200;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Racing Yellow\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFF200\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Heritage racing accent (--f-color-yellow-hypersail)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F6E500;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Modena Yellow\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F6E500\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Secondary heritage accent (--f-color-yellow)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#000000;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Hero sections, cinematic backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#303030;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#303030\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Footer, newsletter sections (--f-color-ui-90)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#D2D2D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Light Gray Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#D2D2D2\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Dividers, border treatments (--f-color-ui-20)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutrals & Text\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#181818;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Near Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#181818\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary body text on light surfaces\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#666666;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#666666\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Secondary text, subdued labels (--f-color-black-60)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#8F8F8F;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#8F8F8F\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Tertiary text, metadata (--f-color-black-50)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#969696;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Silver Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#969696\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Placeholder, disabled states (--f-color-black-55)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#CCCCCC;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Border Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#CCCCCC\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Input borders, form containers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F13A2C;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Warning Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F13A2C\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Accessible warning state (--f-color-accessible-warning)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#03904A;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Success Green\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#03904A\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Positive status (--f-color-accessible-success)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#4C98B9;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Info Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#4C98B9\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Informational callouts (--f-color-accessible-info)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#3860BE;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Link Hover Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#3860BE\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Interactive hover state for text links\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#1EAEDB;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Teal\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#1EAEDB\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Button hover state\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Cdiv id=\"typography\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">FerrariSans for headings and editorial content, Body-Font for labels and captions. Rendered with DM Sans and Barlow Condensed as Google Font substitutes.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:26px;font-weight:500;line-height:1.20;color:var(--near-black);\">Section Title — The Art of Engineering\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Title — 26px \u002F 500 \u002F 1.20 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:24px;font-weight:400;line-height:normal;color:var(--near-black);\">Card Heading — Concept Revealed\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Card Heading — 24px \u002F 400 \u002F normal LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:18px;font-weight:700;line-height:1.20;color:var(--near-black);\">Subheading — Maranello Edition\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Subheading — 18px \u002F 700 \u002F 1.20 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:500;line-height:1.40;letter-spacing:0.08px;color:var(--near-black);\">UI Heading — Vehicle Configuration\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">UI Heading — 16px \u002F 500 \u002F 1.40 LH \u002F 0.08px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.30;color:var(--near-black);\">Body Bold — Performance Specifications\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Bold — 16px \u002F 700 \u002F 1.30 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:400;line-height:normal;letter-spacing:1.28px;color:var(--near-black);\">Button Label — Configure\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button Label — 16px \u002F 400 \u002F normal LH \u002F 1.28px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:14.4px;font-weight:700;line-height:1.00;color:var(--near-black);\">Small Button — Discover More\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Small Button — 14.4px \u002F 700 \u002F 1.00 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:13px;font-weight:600;line-height:1.20;letter-spacing:0.13px;color:var(--near-black);\">Nav Link — Models & Range\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav Link — 13px \u002F 600 \u002F 1.20 LH \u002F 0.13px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:13px;font-weight:400;line-height:1.50;letter-spacing:0.195px;color:var(--dark-gray);\">Caption — Photographed at the Fiorano test circuit during the annual event, showcasing the latest innovations in motorsport technology.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption — 13px \u002F 400 \u002F 1.50 LH \u002F 0.195px — FerrariSans\u002FBody-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:12px;font-weight:700;line-height:1.00;letter-spacing:0.96px;color:var(--near-black);\">Micro Button\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Button — 12px \u002F 700 \u002F 1.00 LH \u002F 0.96px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-body);font-size:12px;font-weight:400;line-height:1.27;letter-spacing:1px;text-transform:uppercase;color:var(--mid-gray);\">Label Upper — Motorsport Heritage\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Label Upper — 12px \u002F 400 \u002F 1.27 LH \u002F 1px \u002F uppercase — Body-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-body);font-size:11px;font-weight:400;line-height:1.27;letter-spacing:1px;text-transform:uppercase;color:var(--mid-gray);\">Micro Label — Racing Division\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Label — 11px \u002F 400 \u002F 1.27 LH \u002F 1px \u002F uppercase — Body-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Cdiv id=\"buttons\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All button variants from the design system. Ferrari's CTA philosophy: architecture, not decoration.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Primary CTA (White)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-white-cta\">Configure\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Subscribe CTA (Red)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-red-cta\">Subscribe\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Text Link\u003C\u002Fspan>\n      \u003Ca href=\"#\" class=\"btn-text-link\">View Details\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">On Dark Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"dark-btn-row\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Ghost Button (White Border)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-ghost-dark\">Explore\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Subscribe CTA (Red)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-red-cta\">Subscribe\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Text Link (White)\u003C\u002Fspan>\n      \u003Ca href=\"#\" style=\"color:var(--pure-white);font-size:13px;font-family:var(--font-heading);text-decoration:underline;transition:color 0.3s;\">View All\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Cdiv id=\"cards\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Editorial cards and dark cinematic cards — the two primary container treatments.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #D2D2D2 0%, #F5F5F5 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Motorsport\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Championship Season Highlights\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">A curated look back at the defining moments from this season's racing campaign across Formula 1 and endurance events.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card-dark card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #000000 0%, #303030 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Concept\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Vision GT Unveiled\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">The latest concept from the Maranello design studio merges aerodynamic precision with sculptural beauty.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #DA291C 0%, #9D2211 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Heritage\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Celebrating 75 Years of Excellence\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">From the 125 S to the SF-23 — tracing the evolution of engineering artistry that defines the Prancing Horse.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Cdiv id=\"forms\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Input fields, labels, and states — following Ferrari's transparent-background input treatment with precise 2px radius.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">First Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter first name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Last Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter last name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"email@example.com\" style=\"border-color:#DA291C;\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Phone (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"tel\" class=\"form-input form-input-error\" placeholder=\"Invalid number\" value=\"+1 555\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid phone number\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full\">\n      \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Write your message here...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Cdiv id=\"spacing\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit: 8px. The full spacing scale extracted from Ferrari's design tokens.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">1px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:5px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">5px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:9px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">9px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:13px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">13px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:15px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">15px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:19px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">19px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:25px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">25px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Cdiv id=\"radius\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Ferrari's precision engineering aesthetic demands near-zero border-radius. The 2px default is razor-sharp.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:1px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">1px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Inline Elements\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, Inputs\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Dialogs, Modals\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:50%;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">50%\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Dots, Avatars\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Cdiv id=\"elevation\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Ferrari communicates hierarchy through surface color contrast and photography, not shadows. The single shadow token is a 1-pixel whisper.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none; border:1px solid #D2D2D2;\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow, no border. Default for all content sections and cards.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgb(153,153,153) 1px 1px 1px 0px;\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Subtle\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">1px whisper shadow. Rare — cookie consent dialogs and dropdown menus.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(18,18,18,0.95); color:var(--pure-white);\">\n      \u003Cdiv class=\"elevation-label\" style=\"color:var(--pure-white);\">Level 2 — Overlay\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\" style=\"color:var(--silver-gray);\">hsla(0,0%,7%,0.8) backdrop. Modal overlays and image captions.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none; border:1px solid #CCCCCC;\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Border\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">1px solid #CCCCCC. Input fields and form containers — depth through delineation.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"background:var(--dark-surface);padding:40px;text-align:center;margin-top:40px;\">\n  \u003Cp style=\"font-family:var(--font-body);font-size:12px;color:var(--silver-gray);letter-spacing:1px;text-transform:uppercase;\">Generated from DESIGN.md — Ferrari Design System Tokens\u003C\u002Fp>\n  \u003Cp style=\"font-family:var(--font-heading);font-size:13px;color:var(--mid-gray);margin-top:8px;\">awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Ferrari — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --ferrari-red: #DA291C;\n    --dark-red: #B01E0A;\n    --deep-red: #9D2211;\n    --pure-white: #FFFFFF;\n    --absolute-black: #000000;\n    --dark-surface: #303030;\n    --dark-surface-lighter: #3A3A3A;\n    --light-gray-surface: #D2D2D2;\n    --near-black: #181818;\n    --dark-gray: #666666;\n    --mid-gray: #8F8F8F;\n    --silver-gray: #969696;\n    --border-gray: #CCCCCC;\n    --border-dark: #444444;\n    --border-mid: #909090;\n    --warning-red: #F13A2C;\n    --success-green: #03904A;\n    --info-blue: #4C98B9;\n    --link-blue: #3860BE;\n    --teal-hover: #1EAEDB;\n    --racing-yellow: #FFF200;\n    --modena-yellow: #F6E500;\n    --overlay-dark: hsla(0, 0%, 7%, 0.8);\n    --font-heading: 'DM Sans', Arial, Helvetica, sans-serif;\n    --font-body: 'Barlow Condensed', Arial, Helvetica, sans-serif;\n\n    \u002F* Dark mode overrides *\u002F\n    --page-bg: var(--near-black);\n    --card-bg: var(--dark-surface);\n    --card-border: var(--border-dark);\n    --text-primary: var(--pure-white);\n    --text-secondary: var(--light-gray-surface);\n    --text-tertiary: var(--silver-gray);\n    --text-muted: var(--mid-gray);\n    --divider: var(--border-dark);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-heading);\n    background: var(--page-bg);\n    color: var(--text-secondary);\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--pure-white);\n    color: var(--absolute-black);\n    font-family: var(--font-body);\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    padding: 6px 14px;\n    border-radius: 2px;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: var(--absolute-black);\n    min-height: 52px;\n    border-bottom: 1px solid var(--border-dark);\n  }\n  .nav-brand {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--pure-white);\n    text-decoration: none;\n    letter-spacing: 0.13px;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--silver-gray);\n    text-decoration: none;\n    padding: 6px 14px;\n    border-radius: 2px;\n    display: inline-flex;\n    align-items: center;\n    transition: color 0.3s;\n  }\n  .nav-links a:hover { color: var(--pure-white); }\n  .nav-cta {\n    background: var(--ferrari-red);\n    color: var(--pure-white) !important;\n    padding: 8px 20px;\n    border-radius: 2px;\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 600;\n    text-decoration: none;\n    transition: background-color 0.3s;\n    display: inline-flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n  }\n  .nav-cta:hover { background: var(--dark-red); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    min-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 100px 40px 80px;\n    background: var(--absolute-black);\n    text-align: center;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 700px;\n    height: 700px;\n    background: radial-gradient(circle, rgba(218,41,28,0.08) 0%, transparent 65%);\n    pointer-events: none;\n  }\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: var(--border-dark);\n  }\n  .hero h1 {\n    font-family: var(--font-heading);\n    font-size: 42px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: normal;\n    color: var(--pure-white);\n    margin-bottom: 16px;\n    position: relative;\n  }\n  .hero .subtitle {\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--silver-gray);\n    margin-bottom: 12px;\n    line-height: 1.50;\n    position: relative;\n  }\n  .hero .label-tag {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--mid-gray);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    position: relative;\n  }\n  .btn-primary-red {\n    background: var(--ferrari-red);\n    color: var(--pure-white);\n    border: none;\n    border-radius: 2px;\n    padding: 12px 28px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-primary-red:hover { background: var(--dark-red); }\n  .btn-ghost {\n    background: transparent;\n    color: var(--pure-white);\n    border: 1px solid var(--pure-white);\n    border-radius: 2px;\n    padding: 12px 28px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-ghost:hover { background: var(--teal-hover); border-color: var(--teal-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-family: var(--font-heading);\n    font-size: 26px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n    line-height: 1.20;\n  }\n  .section-desc {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--text-muted);\n    margin-bottom: 40px;\n    line-height: 1.50;\n    letter-spacing: 0.195px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--divider);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-group-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-muted);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-bottom: 16px;\n    margin-top: 32px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 2px;\n    overflow: hidden;\n  }\n  .color-swatch .swatch-block {\n    height: 80px;\n    border-radius: 2px 2px 0 0;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px;\n    background: var(--card-bg);\n    border: 1px solid var(--card-border);\n    border-top: none;\n    border-radius: 0 0 2px 2px;\n  }\n  .color-swatch .swatch-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    color: var(--text-tertiary);\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 11px;\n    color: var(--text-muted);\n    line-height: 1.3;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--divider);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-family: var(--font-body);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--text-muted);\n    margin-top: 8px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-end;\n    margin-bottom: 24px;\n  }\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .button-item .btn-label {\n    font-family: var(--font-body);\n    font-size: 11px;\n    color: var(--text-muted);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n  .btn-white-cta {\n    background: var(--pure-white);\n    color: var(--absolute-black);\n    border: 1px solid var(--absolute-black);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-white-cta:hover { background: var(--teal-hover); color: var(--pure-white); border-color: var(--teal-hover); }\n  .btn-red-cta {\n    background: var(--ferrari-red);\n    color: var(--pure-white);\n    border: 1px solid var(--ferrari-red);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-red-cta:hover { background: var(--dark-red); border-color: var(--dark-red); }\n  .btn-ghost-dark {\n    background: transparent;\n    color: var(--pure-white);\n    border: 1px solid var(--pure-white);\n    border-radius: 2px;\n    padding: 12px 10px;\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: 1.28px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    min-width: 160px;\n    text-align: center;\n  }\n  .btn-ghost-dark:hover { background: var(--teal-hover); border-color: var(--teal-hover); }\n  .btn-text-link {\n    background: none;\n    border: none;\n    color: var(--text-secondary);\n    font-family: var(--font-heading);\n    font-size: 13px;\n    font-weight: 400;\n    letter-spacing: 0.195px;\n    cursor: pointer;\n    text-decoration: none;\n    transition: color 0.3s;\n    padding: 0;\n  }\n  .btn-text-link:hover { color: var(--link-blue); }\n  .dark-btn-row {\n    background: var(--absolute-black);\n    padding: 24px;\n    border-radius: 2px;\n    border: 1px solid var(--card-border);\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-end;\n  }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--card-bg);\n    border: 1px solid var(--card-border);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .card-img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n    display: block;\n    background: var(--dark-surface-lighter);\n  }\n  .card-body { padding: 20px; }\n  .card-heading {\n    font-family: var(--font-heading);\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1.30;\n    margin-bottom: 8px;\n  }\n  .card-caption {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-muted);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n    margin-bottom: 8px;\n  }\n  .card-text {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--text-tertiary);\n    line-height: 1.50;\n  }\n  .card-dark {\n    background: var(--absolute-black);\n    border: 1px solid var(--card-border);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .card-dark .card-img { background: #1a1a1a; }\n  .card-dark .card-body { padding: 20px; }\n  .card-dark .card-heading { color: var(--pure-white); }\n  .card-dark .card-caption { color: var(--text-muted); }\n  .card-dark .card-text { color: var(--text-tertiary); }\n  .card-hover { transition: transform 0.3s; }\n  .card-hover:hover { transform: translateY(-2px); }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    max-width: 700px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full { grid-column: 1 \u002F -1; }\n  .form-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-muted);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n  .form-input {\n    font-family: var(--font-heading);\n    font-size: 13px;\n    color: var(--text-primary);\n    background: transparent;\n    border: 1px solid var(--card-border);\n    border-radius: 2px;\n    padding: 12px 10px;\n    outline: none;\n    transition: border-color 0.3s;\n    line-height: 1.50;\n    letter-spacing: 0.195px;\n  }\n  .form-input::placeholder { color: var(--text-muted); }\n  .form-input:focus { border-color: var(--ferrari-red); }\n  .form-input-error { border-color: var(--warning-red); }\n  .form-error-text {\n    font-size: 11px;\n    color: var(--warning-red);\n    font-family: var(--font-heading);\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n  }\n  .spacing-box {\n    background: var(--ferrari-red);\n    border-radius: 1px;\n    opacity: 0.8;\n    height: 40px;\n  }\n  .spacing-label {\n    font-family: monospace;\n    font-size: 10px;\n    color: var(--text-muted);\n    white-space: nowrap;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--dark-surface-lighter);\n    border: 1px solid var(--card-border);\n  }\n  .radius-label {\n    font-family: monospace;\n    font-size: 11px;\n    color: var(--text-tertiary);\n    text-align: center;\n    line-height: 1.3;\n  }\n  .radius-context {\n    font-family: var(--font-body);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-align: center;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    line-height: 1.27;\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: 24px;\n    padding: 40px;\n    background: var(--absolute-black);\n    border-radius: 2px;\n    border: 1px solid var(--card-border);\n  }\n  .elevation-card {\n    background: var(--card-bg);\n    padding: 24px;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    border: 1px solid var(--card-border);\n  }\n  .elevation-label {\n    font-family: var(--font-heading);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n  }\n  .elevation-desc {\n    font-family: var(--font-heading);\n    font-size: 12px;\n    color: var(--text-muted);\n    line-height: 1.50;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 60px 20px; min-height: 70vh; }\n    .hero h1 { font-size: 28px; }\n    .hero-buttons { flex-direction: column; gap: 12px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 22px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .form-group.full { grid-column: auto; }\n    .button-row, .dark-btn-row { flex-direction: column; align-items: flex-start; }\n    .elevation-grid { grid-template-columns: 1fr; padding: 20px; }\n    .dark-badge { top: 8px; right: 8px; font-size: 10px; padding: 4px 10px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav-cta\" href=\"#elevation\">Explore\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"label-tag\">Design Token Catalog\u003C\u002Fdiv>\n  \u003Ch1>Design System Inspired by Ferrari\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual reference generated from DESIGN.md — every color, type rule, and component token documented\u003C\u002Fp>\n  \u003Cdiv class=\"label-tag\">Precision Engineering Meets Editorial Design\u003C\u002Fdiv>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary-red\">Subscribe\u003C\u002Fa>\n    \u003Ca href=\"#typography\" class=\"btn-ghost\">Configure\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Cdiv id=\"colors\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color extracted from Ferrari's design system with semantic names, hex values, and functional roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#DA291C;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Ferrari Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#DA291C\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary CTA and brand accent (--f-color-accent-100)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary surface for editorial panels (--f-color-ui-0)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Secondary & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#B01E0A;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#B01E0A\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Hover\u002Fpressed states (--f-color-accent-90)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#9D2211;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Deep Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#9D2211\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Active states, extra emphasis (--f-color-accent-80)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#FFF200;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Racing Yellow\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFF200\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Heritage racing accent (--f-color-yellow-hypersail)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F6E500;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Modena Yellow\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F6E500\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Secondary heritage accent (--f-color-yellow)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#000000;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Hero sections, cinematic backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#303030;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#303030\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Footer, newsletter sections (--f-color-ui-90)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#D2D2D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Light Gray Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#D2D2D2\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Dividers, border treatments (--f-color-ui-20)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutrals & Text\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#181818;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Near Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#181818\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary body text on light surfaces\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#666666;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Dark Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#666666\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Secondary text, subdued labels (--f-color-black-60)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#8F8F8F;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#8F8F8F\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Tertiary text, metadata (--f-color-black-50)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#969696;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Silver Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#969696\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Placeholder, disabled states (--f-color-black-55)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#CCCCCC;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Border Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#CCCCCC\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Input borders, form containers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F13A2C;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Warning Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F13A2C\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Accessible warning state (--f-color-accessible-warning)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#03904A;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Success Green\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#03904A\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Positive status (--f-color-accessible-success)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#4C98B9;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Info Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#4C98B9\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Informational callouts (--f-color-accessible-info)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#3860BE;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Link Hover Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#3860BE\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Interactive hover state for text links\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#1EAEDB;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Teal\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#1EAEDB\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Button hover state\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Cdiv id=\"typography\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">FerrariSans for headings and editorial content, Body-Font for labels and captions. Rendered with DM Sans and Barlow Condensed as Google Font substitutes.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:26px;font-weight:500;line-height:1.20;color:var(--text-primary);\">Section Title — The Art of Engineering\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Title — 26px \u002F 500 \u002F 1.20 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:24px;font-weight:400;line-height:normal;color:var(--text-primary);\">Card Heading — Concept Revealed\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Card Heading — 24px \u002F 400 \u002F normal LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:18px;font-weight:700;line-height:1.20;color:var(--text-primary);\">Subheading — Maranello Edition\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Subheading — 18px \u002F 700 \u002F 1.20 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:500;line-height:1.40;letter-spacing:0.08px;color:var(--text-primary);\">UI Heading — Vehicle Configuration\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">UI Heading — 16px \u002F 500 \u002F 1.40 LH \u002F 0.08px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.30;color:var(--text-primary);\">Body Bold — Performance Specifications\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Bold — 16px \u002F 700 \u002F 1.30 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:16px;font-weight:400;line-height:normal;letter-spacing:1.28px;color:var(--text-primary);\">Button Label — Configure\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button Label — 16px \u002F 400 \u002F normal LH \u002F 1.28px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:14.4px;font-weight:700;line-height:1.00;color:var(--text-primary);\">Small Button — Discover More\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Small Button — 14.4px \u002F 700 \u002F 1.00 LH \u002F normal — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:13px;font-weight:600;line-height:1.20;letter-spacing:0.13px;color:var(--text-primary);\">Nav Link — Models & Range\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav Link — 13px \u002F 600 \u002F 1.20 LH \u002F 0.13px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:13px;font-weight:400;line-height:1.50;letter-spacing:0.195px;color:var(--text-tertiary);\">Caption — Photographed at the Fiorano test circuit during the annual event, showcasing the latest innovations in motorsport technology.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption — 13px \u002F 400 \u002F 1.50 LH \u002F 0.195px — FerrariSans\u002FBody-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-heading);font-size:12px;font-weight:700;line-height:1.00;letter-spacing:0.96px;color:var(--text-primary);\">Micro Button\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Button — 12px \u002F 700 \u002F 1.00 LH \u002F 0.96px — FerrariSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-body);font-size:12px;font-weight:400;line-height:1.27;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);\">Label Upper — Motorsport Heritage\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Label Upper — 12px \u002F 400 \u002F 1.27 LH \u002F 1px \u002F uppercase — Body-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:var(--font-body);font-size:11px;font-weight:400;line-height:1.27;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);\">Micro Label — Racing Division\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Label — 11px \u002F 400 \u002F 1.27 LH \u002F 1px \u002F uppercase — Body-Font\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Cdiv id=\"buttons\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All button variants from the design system. Ferrari's CTA philosophy: architecture, not decoration.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Primary CTA (White)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-white-cta\">Configure\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Subscribe CTA (Red)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-red-cta\">Subscribe\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\">Text Link\u003C\u002Fspan>\n      \u003Ca href=\"#\" class=\"btn-text-link\">View Details\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">On Dark Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"dark-btn-row\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Ghost Button (White Border)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-ghost-dark\">Explore\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Subscribe CTA (Red)\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-red-cta\">Subscribe\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Text Link (White)\u003C\u002Fspan>\n      \u003Ca href=\"#\" style=\"color:var(--pure-white);font-size:13px;font-family:var(--font-heading);text-decoration:underline;transition:color 0.3s;\">View All\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Cdiv id=\"cards\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Editorial cards and dark cinematic cards — the two primary container treatments.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #444 0%, #303030 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Motorsport\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Championship Season Highlights\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">A curated look back at the defining moments from this season's racing campaign across Formula 1 and endurance events.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card-dark card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #000000 0%, #1a1a1a 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Concept\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Vision GT Unveiled\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">The latest concept from the Maranello design studio merges aerodynamic precision with sculptural beauty.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card card-hover\">\n      \u003Cdiv class=\"card-img\" style=\"background:linear-gradient(135deg, #DA291C 0%, #9D2211 100%);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-caption\">Heritage\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-heading\">Celebrating 75 Years of Excellence\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-text\">From the 125 S to the SF-23 — tracing the evolution of engineering artistry that defines the Prancing Horse.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Cdiv id=\"forms\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Input fields, labels, and states — following Ferrari's transparent-background input treatment with precise 2px radius.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">First Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter first name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Last Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter last name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"email@example.com\" style=\"border-color:#DA291C;\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Phone (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"tel\" class=\"form-input form-input-error\" placeholder=\"Invalid number\" value=\"+1 555\" style=\"color:var(--text-primary);\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid phone number\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full\">\n      \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Write your message here...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Cdiv id=\"spacing\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit: 8px. The full spacing scale extracted from Ferrari's design tokens.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">1px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:5px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">5px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:9px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">9px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:13px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">13px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:15px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">15px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:19px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">19px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:25px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">25px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Cdiv id=\"radius\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Ferrari's precision engineering aesthetic demands near-zero border-radius. The 2px default is razor-sharp.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:1px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">1px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Inline Elements\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, Inputs\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Dialogs, Modals\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:50%;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">50%\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Dots, Avatars\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Cdiv id=\"elevation\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Ferrari communicates hierarchy through surface color contrast and photography, not shadows. The single shadow token is a 1-pixel whisper.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow, no border. Default for all content sections and cards.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgb(153,153,153) 1px 1px 1px 0px;\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Subtle\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">1px whisper shadow. Rare — cookie consent dialogs and dropdown menus.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(18,18,18,0.95); border-color:transparent;\">\n      \u003Cdiv class=\"elevation-label\" style=\"color:var(--pure-white);\">Level 2 — Overlay\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\" style=\"color:var(--text-muted);\">hsla(0,0%,7%,0.8) backdrop. Modal overlays and image captions.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none; border:1px solid #666;\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Border\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">1px solid border. Input fields and form containers — depth through delineation.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;border-top:1px solid var(--card-border);\">\n  \u003Cp style=\"font-family:var(--font-body);font-size:12px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;\">Generated from DESIGN.md — Ferrari Design System Tokens\u003C\u002Fp>\n  \u003Cp style=\"font-family:var(--font-heading);font-size:13px;color:var(--text-tertiary);margin-top:8px;\">awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# Ferrari Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fferrari\u002FDESIGN.md) extracted from the public [Ferrari](https:\u002F\u002Fferrari.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fferrari\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Ferrari design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Ferrari Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fferrari\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Ferrari Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fferrari\u002Fpreview-screenshot.png)\n",{"slug":117,"name":118,"category":15,"designMd":119,"previewHtml":120,"previewDarkHtml":121,"readme":122},"figma","Figma","# Design System Inspiration of Figma\n\n## 1. Visual Theme & Atmosphere\n\nFigma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of \"regular vs bold.\"\n\nThe page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only `#000000` and `#ffffff` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.\n\nWhat makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (`dashed 2px`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.\n\n**Key Characteristics:**\n- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700\n- Strictly black-and-white interface chrome — color exists only in product content\n- figmaMono for uppercase technical labels with wide letter-spacing\n- Pill (50px) and circular (50%) button geometry\n- Dashed focus outlines echoing Figma's editor selection handles\n- Vibrant multi-color hero gradients (green, yellow, purple, pink)\n- OpenType `\"kern\"` feature enabled globally\n- Negative letter-spacing throughout — even body text at -0.14px to -0.26px\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): All text, all solid buttons, all borders. The sole \"color\" of the interface.\n- **Pure White** (`#ffffff`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.\n\n*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*\n\n### Surface & Background\n- **Pure White** (`#ffffff`): Primary page background and card surfaces.\n- **Glass Black** (`rgba(0, 0, 0, 0.08)`): Subtle dark overlay for secondary circular buttons and glass effects.\n- **Glass White** (`rgba(255, 255, 255, 0.16)`): Frosted glass overlay for buttons on dark\u002Fcolored surfaces.\n\n### Gradient System\n- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.\n- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `figmaSans`, with fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`\n- **Monospace \u002F Labels**: `figmaMono`, with fallbacks: `figmaMono Fallback, SF Mono, menlo`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |\n| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |\n| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |\n| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |\n| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |\n| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |\n| Body \u002F Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |\n| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |\n| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |\n| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |\n\n### Principles\n- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.\n- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 \"regular\"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.\n- **Kern everywhere**: Every text element enables OpenType `\"kern\"` feature — kerning is not optional, it's structural.\n- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.\n- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Black Solid (Pill)**\n- Background: Pure Black (`#000000`)\n- Text: Pure White (`#ffffff`)\n- Radius: circle (50%) for icon buttons\n- Focus: dashed 2px outline\n- Maximum emphasis\n\n**White Pill**\n- Background: Pure White (`#ffffff`)\n- Text: Pure Black (`#000000`)\n- Padding: 8px 18px 10px (asymmetric vertical)\n- Radius: pill (50px)\n- Focus: dashed 2px outline\n- Standard CTA on dark\u002Fcolored surfaces\n\n**Glass Dark**\n- Background: `rgba(0, 0, 0, 0.08)` (subtle dark overlay)\n- Text: Pure Black\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on light surfaces\n\n**Glass Light**\n- Background: `rgba(255, 255, 255, 0.16)` (frosted glass)\n- Text: Pure White\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on dark\u002Fcolored surfaces\n\n### Cards & Containers\n- Background: Pure White\n- Border: none or minimal\n- Radius: 6px (small containers), 8px (images, cards, dialogs)\n- Shadow: subtle to medium elevation effects\n- Product screenshots as card content\n\n### Navigation\n- Clean horizontal nav on white\n- Logo: Figma wordmark in black\n- Product tabs: pill-shaped (50px) tab navigation\n- Links: black text, underline 1px decoration\n- CTA: Black pill button\n- Hover: text color via CSS variable\n\n### Distinctive Components\n\n**Product Tab Bar**\n- Horizontal pill-shaped tabs (50px radius)\n- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)\n- Active tab highlighted\n\n**Hero Gradient Section**\n- Full-width vibrant multi-color gradient background\n- White text overlay with 86px display heading\n- Product screenshots floating within the gradient\n\n**Dashed Focus Indicators**\n- All interactive elements use `dashed 2px` outline on focus\n- References the selection handles in the Figma editor\n- A meta-design choice connecting website and product\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px\n\n### Grid & Container\n- Max container width: up to 1920px\n- Hero: full-width gradient with centered content\n- Product sections: alternating showcases\n- Footer: dark full-width section\n- Responsive from 559px to 1920px\n\n### Whitespace Philosophy\n- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.\n- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.\n\n### Border Radius Scale\n- Minimal (2px): Small link elements\n- Subtle (6px): Small containers, dividers\n- Comfortable (8px): Cards, images, dialogs\n- Pill (50px): Tab buttons, CTAs\n- Circle (50%): Icon buttons, circular elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, most text |\n| Surface (Level 1) | White card on gradient\u002Fdark section | Cards, product showcases |\n| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |\n\n**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful\u002Fdark sections) and the inherent dimensionality of the product screenshots themselves.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design\n- Keep the interface strictly black-and-white — color comes from product content only\n- Use pill (50px) and circular (50%) geometry for all interactive elements\n- Apply dashed 2px focus outlines — the signature accessibility pattern\n- Enable `\"kern\"` feature on all text\n- Use figmaMono in uppercase with positive letter-spacing for labels\n- Apply negative letter-spacing throughout (-0.1px to -1.72px)\n\n### Don't\n- Don't add interface colors — the monochrome palette is absolute\n- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)\n- Don't use sharp corners on buttons — pill and circular geometry only\n- Don't use solid focus outlines — dashed is the signature\n- Don't increase body font weight above 450 — the light-weight aesthetic is core\n- Don't use positive letter-spacing on body text — it's always negative\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | \u003C560px | Compact layout, stacked |\n| Tablet | 560–768px | Minor adjustments |\n| Small Desktop | 768–960px | 2-column layouts |\n| Desktop | 960–1280px | Standard layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | 1440–1920px | Maximum width |\n\n### Collapsing Strategy\n- Hero text: 86px → 64px → 48px\n- Product tabs: horizontal scroll on mobile\n- Feature sections: stacked single column\n- Footer: multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Everything: \"Pure Black (#000000)\" and \"Pure White (#ffffff)\"\n- Glass Dark: \"rgba(0, 0, 0, 0.08)\"\n- Glass Light: \"rgba(255, 255, 255, 0.16)\"\n\n### Example Component Prompts\n- \"Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding).\"\n- \"Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480.\"\n- \"Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled.\"\n- \"Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white.\"\n\n### Iteration Guide\n1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700\n2. Interface is always black + white — never add colors to chrome\n3. Dashed focus outlines, not solid\n4. Letter-spacing is always negative on body, always positive on mono labels\n5. Pill (50px) for buttons\u002Ftabs, circle (50%) for icon buttons\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Figma (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-white: #ffffff;\n    --glass-dark: rgba(0, 0, 0, 0.08);\n    --glass-light: rgba(255, 255, 255, 0.16);\n    --font-sans: system-ui, -apple-system, 'Segoe UI', 'SF Pro Display', Helvetica, Arial, sans-serif;\n    --font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-nav: rgba(255, 255, 255, 0.92);\n    --text-primary: #000000;\n    --text-secondary: #000000;\n    --text-muted: rgba(0, 0, 0, 0.5);\n    --border-color: rgba(0, 0, 0, 0.12);\n    --border-subtle: rgba(0, 0, 0, 0.06);\n    --section-label-color: #000000;\n    --glass-surface: rgba(0, 0, 0, 0.08);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    font-weight: 340;\n    line-height: 1.45;\n    letter-spacing: -0.14px;\n    font-feature-settings: \"kern\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-sans);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.26px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand svg { width: 24px; height: 24px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: -0.14px;\n    transition: opacity 0.2s;\n  }\n  .nav-links a:hover { opacity: 0.6; }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .nav-cta:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);\n  }\n  .hero h1 {\n    font-family: var(--font-sans);\n    font-size: 86px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.72px;\n    margin-bottom: 24px;\n    color: var(--color-white);\n    position: relative;\n  }\n  .hero p {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 20px;\n    font-weight: 330;\n    line-height: 1.4;\n    letter-spacing: -0.14px;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-hero-primary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-hero-primary:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-hero-glass {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n  }\n  .btn-hero-glass:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n\n  \u002F* PRODUCT TABS *\u002F\n  .product-tabs {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .product-tab {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    padding: 8px 18px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n    transition: background 0.2s;\n  }\n  .product-tab.active {\n    background: var(--color-white);\n    color: var(--color-black);\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 18px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.54px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n    line-height: 1.3;\n  }\n  .section-heading {\n    font-family: var(--font-sans);\n    font-size: 64px;\n    font-weight: 400;\n    line-height: 1.1;\n    letter-spacing: -0.96px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 26px;\n    font-weight: 540;\n    line-height: 1.35;\n    letter-spacing: -0.26px;\n    margin-bottom: 20px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.6px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 340; }\n\n  \u002F* GRADIENT PREVIEW *\u002F\n  .gradient-preview {\n    border-radius: 8px;\n    overflow: hidden;\n    margin-bottom: 16px;\n  }\n  .gradient-block {\n    height: 120px;\n    border-radius: 8px;\n  }\n  .gradient-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    letter-spacing: 0.6px;\n    text-transform: uppercase;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; font-feature-settings: \"kern\" 1; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n\n  \u002F* WEIGHT SPECTRUM *\u002F\n  .weight-spectrum { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding: 24px; background: var(--glass-surface); border-radius: 8px; }\n  .weight-sample { display: flex; align-items: baseline; gap: 16px; }\n  .weight-sample-text { font-family: var(--font-sans); font-size: 24px; letter-spacing: -0.26px; line-height: 1.35; flex: 1; }\n  .weight-sample-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; min-width: 80px; text-align: right; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n  }\n  .btn-black-pill {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-black-pill:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }\n  .btn-white-pill {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 18px 10px;\n    border: 1px solid var(--border-color);\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-white-pill:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }\n  .btn-black-circle {\n    background: var(--color-black);\n    color: var(--color-white);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-black-circle:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }\n  .btn-glass-dark {\n    background: var(--glass-dark);\n    color: var(--color-black);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-glass-dark:focus { outline: 2px dashed var(--color-black); outline-offset: 3px; }\n  .btn-glass-light-demo {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .glass-light-wrapper {\n    background: var(--color-black);\n    border-radius: 50%;\n    padding: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  \u002F* FOCUS DEMO *\u002F\n  .focus-demo-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: center;\n    margin-top: 40px;\n    padding: 24px;\n    background: var(--glass-surface);\n    border-radius: 8px;\n  }\n  .focus-demo-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n  }\n  .btn-focus-visible {\n    outline: 2px dashed var(--color-black);\n    outline-offset: 3px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-elevated {\n    border: none;\n    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n  }\n  .card-glass {\n    background: var(--glass-surface);\n    border: none;\n  }\n  .card h3 {\n    font-family: var(--font-sans);\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.45;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-muted); font-size: 16px; line-height: 1.45; font-weight: 330; letter-spacing: -0.14px; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(0, 0, 0, 0.06);\n    border: 1px solid rgba(0, 0, 0, 0.12);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--glass-surface);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n    font-weight: 340;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-surface { background: var(--bg-card); border: 1px solid var(--border-color); }\n  .elevation-elevated { border: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); }\n  .elevation-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: normal; }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; font-weight: 340; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; letter-spacing: -0.96px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; letter-spacing: -0.72px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .product-tabs { flex-wrap: wrap; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 38 57\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Cpath d=\"M19 28.5C19 23.2533 23.2533 19 28.5 19C33.7467 19 38 23.2533 38 28.5C38 33.7467 33.7467 38 28.5 38C23.2533 38 19 33.7467 19 28.5Z\" fill=\"#1ABCFE\"\u002F>\n      \u003Cpath d=\"M0 47.5C0 42.2533 4.25329 38 9.5 38H19V47.5C19 52.7467 14.7467 57 9.5 57C4.25329 57 0 52.7467 0 47.5Z\" fill=\"#0ACF83\"\u002F>\n      \u003Cpath d=\"M19 0V19H28.5C33.7467 19 38 14.7467 38 9.5C38 4.25329 33.7467 0 28.5 0H19Z\" fill=\"#FF7262\"\u002F>\n      \u003Cpath d=\"M0 9.5C0 14.7467 4.25329 19 9.5 19H19V0H9.5C4.25329 0 0 4.25329 0 9.5Z\" fill=\"#F24E1E\"\u002F>\n      \u003Cpath d=\"M0 28.5C0 33.7467 4.25329 38 9.5 38H19V19H9.5C4.25329 19 0 23.2533 0 28.5Z\" fill=\"#A259FF\"\u002F>\n    \u003C\u002Fsvg>\n    Figma\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"product-tabs\">\n    \u003Cbutton class=\"product-tab active\">Design\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Dev Mode\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Prototyping\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Slides\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>Figma\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-hero-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-hero-glass\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F COLOR PALETTE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">All text, solid buttons, all borders. The sole interface color.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.12);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">All backgrounds, white buttons, text on dark surfaces.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Glass\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.12);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary circular buttons, glass overlays on light surfaces.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.16); border: 1px solid rgba(0,0,0,0.12); position: relative;\">\n          \u003Cdiv style=\"position: absolute; inset: 0; background: #000; z-index: 0;\">\u003C\u002Fdiv>\n          \u003Cdiv style=\"position: absolute; inset: 0; background: rgba(255,255,255,0.16); z-index: 1;\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.16)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Frosted glass overlay for buttons on dark or colored surfaces.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Gradient System\u003C\u002Fh3>\n    \u003Cdiv class=\"gradient-preview\">\n      \u003Cdiv class=\"gradient-block\" style=\"background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"gradient-label\">Hero Gradient -- Electric Green, Purple, Orange, Pink, Cyan\u003C\u002Fdiv>\n    \u003Cp style=\"color: var(--text-muted); font-size: 14px; margin-top: 8px; font-weight: 340;\">Color exists only in hero gradients and product showcases. The interface layer remains strictly monochrome.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F TYPOGRAPHY SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"weight-spectrum\">\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px;\">Variable Weight Spectrum\u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 320;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 320\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 330;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 330\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 340;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 340\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 400;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 400\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 450;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 450\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 480;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 480\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 540;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 540\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 700;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 700\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 86px; font-weight: 400; line-height: 1.0; letter-spacing: -1.72px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 86px \u002F wt 400 \u002F lh 1.00 \u002F ls -1.72px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 64px; font-weight: 400; line-height: 1.1; letter-spacing: -0.96px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 64px \u002F wt 400 \u002F lh 1.10 \u002F ls -0.96px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 26px; font-weight: 540; line-height: 1.35; letter-spacing: -0.26px;\">Sub-heading Medium\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 26px \u002F wt 540 \u002F lh 1.35 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 26px; font-weight: 340; line-height: 1.35; letter-spacing: -0.26px;\">Sub-heading Light\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Light -- 26px \u002F wt 340 \u002F lh 1.35 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: normal;\">Feature Title Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 24px \u002F wt 700 \u002F lh 1.45 \u002F ls normal -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 20px; font-weight: 330; line-height: 1.4; letter-spacing: -0.14px;\">Body large text for descriptions and introductions. The light weight creates an airy, ethereal reading experience that matches the design-tool aesthetic.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large -- 20px \u002F wt 330 \u002F lh 1.40 \u002F ls -0.14px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 18px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px;\">Body light text at the lightest variable weight. Nearly imperceptible thinness for secondary content and delicate UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Light -- 18px \u002F wt 320 \u002F lh 1.45 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.14px;\">Standard body text for paragraphs, navigation links, and button labels. The default reading weight for all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F wt 400 \u002F lh 1.45 \u002F ls -0.14px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: 0.54px; text-transform: uppercase;\">MONO SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Label -- 18px \u002F wt 400 \u002F lh 1.30 \u002F ls 0.54px \u002F uppercase -- figmaMono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.6px; text-transform: uppercase;\">MONO SMALL TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Small -- 12px \u002F wt 400 \u002F lh 1.00 \u002F ls 0.6px \u002F uppercase -- figmaMono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F BUTTON VARIANTS\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-black-pill\">Get started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Black Pill CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-pill\">Learn more\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-black-circle\" aria-label=\"Menu\">☰\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Black Circle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-glass-dark\" aria-label=\"Play\">▶\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Glass Dark\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cdiv class=\"glass-light-wrapper\">\n        \u003Cbutton class=\"btn-glass-light-demo\" aria-label=\"Close\">×\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"button-demo-label\">Glass Light\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"focus-demo-row\">\n    \u003Cdiv>\n      \u003Cdiv class=\"focus-demo-label\">Dashed Focus Indicator\u003C\u002Fdiv>\n      \u003Cp style=\"font-size: 14px; color: var(--text-muted); font-weight: 340; margin-bottom: 16px;\">All interactive elements use \u003Ccode style=\"font-family: var(--font-mono); font-size: 12px; background: var(--glass-surface); padding: 2px 6px; border-radius: 4px;\">dashed 2px\u003C\u002Fcode> outline on focus, echoing the selection handles in the Figma editor.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv style=\"display: flex; gap: 16px; align-items: center;\">\n      \u003Cbutton class=\"btn-black-pill btn-focus-visible\">Focused Pill\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-black-circle btn-focus-visible\" aria-label=\"Focused\">✓\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F CARD EXAMPLES\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">STANDARD CARD\u003C\u002Fdiv>\n      \u003Ch3>Minimal Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with subtle border and 8px radius. The default container for features and content sections on the white gallery surface.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">ELEVATED CARD\u003C\u002Fdiv>\n      \u003Ch3>Subtle Shadow\u003C\u002Fh3>\n      \u003Cp>Floating card with subtle shadow elevation. Used for product showcases and hover states where the card lifts off the surface.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glass\">\n      \u003Cdiv class=\"card-label\">GLASS SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Glass Overlay\u003C\u002Fh3>\n      \u003Cp>Glass-effect card using rgba(0,0,0,0.08) background. Secondary containers and grouped content areas with a translucent feel.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F SPACING SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-weight: 340; font-size: 18px; letter-spacing: -0.26px;\">Base unit: 8px. Scale from 1px to 50px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 200px; height: 200px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">50px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F BORDER RADIUS SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50px; width: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50%;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Circle \u002F Icon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F ELEVATION & DEPTH\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Page background and most text. The default surface.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-surface\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">White card on gradient or dark section. Primary depth through background contrast.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle shadow for floating cards and hover states. Sparingly applied.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Figma (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-white: #ffffff;\n    --glass-dark: rgba(0, 0, 0, 0.08);\n    --glass-light: rgba(255, 255, 255, 0.16);\n    --font-sans: system-ui, -apple-system, 'Segoe UI', 'SF Pro Display', Helvetica, Arial, sans-serif;\n    --font-mono: 'Space Mono', 'SF Mono', Menlo, monospace;\n    \u002F* Dark mode tokens *\u002F\n    --bg-page: #000000;\n    --bg-card: #000000;\n    --bg-nav: rgba(0, 0, 0, 0.92);\n    --text-primary: #ffffff;\n    --text-secondary: #ffffff;\n    --text-muted: rgba(255, 255, 255, 0.5);\n    --border-color: rgba(255, 255, 255, 0.12);\n    --border-subtle: rgba(255, 255, 255, 0.06);\n    --section-label-color: #ffffff;\n    --glass-surface: rgba(255, 255, 255, 0.08);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px;\n    font-weight: 340;\n    line-height: 1.45;\n    letter-spacing: -0.14px;\n    font-feature-settings: \"kern\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-sans);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.26px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--color-white);\n  }\n  .nav-brand svg { width: 24px; height: 24px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: -0.14px;\n    transition: opacity 0.2s;\n  }\n  .nav-links a:hover { opacity: 0.6; }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .nav-cta:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);\n  }\n  .hero h1 {\n    font-family: var(--font-sans);\n    font-size: 86px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.72px;\n    margin-bottom: 24px;\n    color: var(--color-white);\n    position: relative;\n  }\n  .hero p {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 20px;\n    font-weight: 330;\n    line-height: 1.4;\n    letter-spacing: -0.14px;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-hero-primary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-hero-primary:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-hero-glass {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n  }\n  .btn-hero-glass:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n\n  \u002F* PRODUCT TABS *\u002F\n  .product-tabs {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .product-tab {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    padding: 8px 18px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n    transition: background 0.2s;\n  }\n  .product-tab.active {\n    background: var(--color-white);\n    color: var(--color-black);\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 18px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.54px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n    line-height: 1.3;\n  }\n  .section-heading {\n    font-family: var(--font-sans);\n    font-size: 64px;\n    font-weight: 400;\n    line-height: 1.1;\n    letter-spacing: -0.96px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 26px;\n    font-weight: 540;\n    line-height: 1.35;\n    letter-spacing: -0.26px;\n    margin-bottom: 20px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.6px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 340; }\n\n  \u002F* GRADIENT PREVIEW *\u002F\n  .gradient-preview {\n    border-radius: 8px;\n    overflow: hidden;\n    margin-bottom: 16px;\n  }\n  .gradient-block {\n    height: 120px;\n    border-radius: 8px;\n  }\n  .gradient-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    letter-spacing: 0.6px;\n    text-transform: uppercase;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; font-feature-settings: \"kern\" 1; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n\n  \u002F* WEIGHT SPECTRUM *\u002F\n  .weight-spectrum { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding: 24px; background: var(--glass-surface); border-radius: 8px; }\n  .weight-sample { display: flex; align-items: baseline; gap: 16px; }\n  .weight-sample-text { font-family: var(--font-sans); font-size: 24px; letter-spacing: -0.26px; line-height: 1.35; flex: 1; }\n  .weight-sample-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; min-width: 80px; text-align: right; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n  }\n  .btn-white-pill-solid {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 18px 10px;\n    border: none;\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-white-pill-solid:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-dark-pill-outline {\n    background: transparent;\n    color: var(--color-white);\n    padding: 8px 18px 10px;\n    border: 1px solid var(--border-color);\n    border-radius: 50px;\n    font-size: 16px;\n    font-family: var(--font-sans);\n    font-weight: 480;\n    letter-spacing: -0.14px;\n    cursor: pointer;\n  }\n  .btn-dark-pill-outline:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-white-circle {\n    background: var(--color-white);\n    color: var(--color-black);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-white-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-glass-light-circle {\n    background: rgba(255, 255, 255, 0.16);\n    color: var(--color-white);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-glass-light-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n  .btn-glass-dark-circle {\n    background: rgba(0, 0, 0, 0.08);\n    color: var(--color-white);\n    width: 48px;\n    height: 48px;\n    border: none;\n    border-radius: 50%;\n    font-size: 20px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--border-color);\n  }\n  .btn-glass-dark-circle:focus { outline: 2px dashed var(--color-white); outline-offset: 3px; }\n\n  \u002F* FOCUS DEMO *\u002F\n  .focus-demo-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: center;\n    margin-top: 40px;\n    padding: 24px;\n    background: var(--glass-surface);\n    border-radius: 8px;\n  }\n  .focus-demo-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n  }\n  .btn-focus-visible {\n    outline: 2px dashed var(--color-white);\n    outline-offset: 3px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-elevated {\n    border: 1px solid var(--border-color);\n    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.04);\n  }\n  .card-glass {\n    background: var(--glass-surface);\n    border: none;\n  }\n  .card h3 {\n    font-family: var(--font-sans);\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.45;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-muted); font-size: 16px; line-height: 1.45; font-weight: 330; letter-spacing: -0.14px; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(255, 255, 255, 0.06);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--glass-surface);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    letter-spacing: 0.6px;\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n    font-weight: 340;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-surface { background: var(--glass-surface); border: 1px solid var(--border-color); }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0 4px 24px rgba(255, 255, 255, 0.04); }\n  .elevation-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: normal; }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; font-weight: 340; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; letter-spacing: -0.96px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; letter-spacing: -0.72px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .product-tabs { flex-wrap: wrap; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Csvg viewBox=\"0 0 38 57\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Cpath d=\"M19 28.5C19 23.2533 23.2533 19 28.5 19C33.7467 19 38 23.2533 38 28.5C38 33.7467 33.7467 38 28.5 38C23.2533 38 19 33.7467 19 28.5Z\" fill=\"#1ABCFE\"\u002F>\n      \u003Cpath d=\"M0 47.5C0 42.2533 4.25329 38 9.5 38H19V47.5C19 52.7467 14.7467 57 9.5 57C4.25329 57 0 52.7467 0 47.5Z\" fill=\"#0ACF83\"\u002F>\n      \u003Cpath d=\"M19 0V19H28.5C33.7467 19 38 14.7467 38 9.5C38 4.25329 33.7467 0 28.5 0H19Z\" fill=\"#FF7262\"\u002F>\n      \u003Cpath d=\"M0 9.5C0 14.7467 4.25329 19 9.5 19H19V0H9.5C4.25329 0 0 4.25329 0 9.5Z\" fill=\"#F24E1E\"\u002F>\n      \u003Cpath d=\"M0 28.5C0 33.7467 4.25329 38 9.5 38H19V19H9.5C4.25329 19 0 23.2533 0 28.5Z\" fill=\"#A259FF\"\u002F>\n    \u003C\u002Fsvg>\n    Figma\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"product-tabs\">\n    \u003Cbutton class=\"product-tab active\">Design\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Dev Mode\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Prototyping\u003C\u002Fbutton>\n    \u003Cbutton class=\"product-tab\">Slides\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>Figma\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-hero-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-hero-glass\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F COLOR PALETTE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid rgba(255,255,255,0.12);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, dark surface. The foundation of the dark theme.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">All text, solid buttons, primary interface color on dark.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Glass\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.16);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.16)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Frosted glass overlays, secondary buttons on dark surfaces.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Subtle\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card surfaces, grouped content areas on dark background.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Gradient System\u003C\u002Fh3>\n    \u003Cdiv class=\"gradient-preview\">\n      \u003Cdiv class=\"gradient-block\" style=\"background: linear-gradient(135deg, #0acf83 0%, #a259ff 30%, #f24e1e 50%, #ff7262 65%, #1abcfe 80%, #0acf83 100%);\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"gradient-label\">Hero Gradient -- Electric Green, Purple, Orange, Pink, Cyan\u003C\u002Fdiv>\n    \u003Cp style=\"color: var(--text-muted); font-size: 14px; margin-top: 8px; font-weight: 340;\">Color exists only in hero gradients and product showcases. The interface layer remains strictly monochrome.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F TYPOGRAPHY SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"weight-spectrum\">\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px;\">Variable Weight Spectrum\u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 320;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 320\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 330;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 330\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 340;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 340\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 400;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 400\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 450;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 450\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 480;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 480\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 540;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 540\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"weight-sample\">\n      \u003Cspan class=\"weight-sample-text\" style=\"font-weight: 700;\">The quick brown fox jumps\u003C\u002Fspan>\n      \u003Cspan class=\"weight-sample-label\">Weight 700\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 86px; font-weight: 400; line-height: 1.0; letter-spacing: -1.72px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 86px \u002F wt 400 \u002F lh 1.00 \u002F ls -1.72px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 64px; font-weight: 400; line-height: 1.1; letter-spacing: -0.96px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 64px \u002F wt 400 \u002F lh 1.10 \u002F ls -0.96px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 26px; font-weight: 540; line-height: 1.35; letter-spacing: -0.26px;\">Sub-heading Medium\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 26px \u002F wt 540 \u002F lh 1.35 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 26px; font-weight: 340; line-height: 1.35; letter-spacing: -0.26px;\">Sub-heading Light\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Light -- 26px \u002F wt 340 \u002F lh 1.35 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: normal;\">Feature Title Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 24px \u002F wt 700 \u002F lh 1.45 \u002F ls normal -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 20px; font-weight: 330; line-height: 1.4; letter-spacing: -0.14px;\">Body large text for descriptions and introductions. The light weight creates an airy, ethereal reading experience that matches the design-tool aesthetic.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large -- 20px \u002F wt 330 \u002F lh 1.40 \u002F ls -0.14px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 18px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px;\">Body light text at the lightest variable weight. Nearly imperceptible thinness for secondary content and delicate UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Light -- 18px \u002F wt 320 \u002F lh 1.45 \u002F ls -0.26px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.14px;\">Standard body text for paragraphs, navigation links, and button labels. The default reading weight for all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F wt 400 \u002F lh 1.45 \u002F ls -0.14px -- figmaSans\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: 0.54px; text-transform: uppercase;\">MONO SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Label -- 18px \u002F wt 400 \u002F lh 1.30 \u002F ls 0.54px \u002F uppercase -- figmaMono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.6px; text-transform: uppercase;\">MONO SMALL TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Small -- 12px \u002F wt 400 \u002F lh 1.00 \u002F ls 0.6px \u002F uppercase -- figmaMono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F BUTTON VARIANTS\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-pill-solid\">Get started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Pill CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-pill-outline\">Learn more\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outline Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-circle\" aria-label=\"Menu\">☰\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Circle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-glass-light-circle\" aria-label=\"Play\">▶\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Glass Light\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-glass-dark-circle\" aria-label=\"Close\">×\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Glass Dark\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"focus-demo-row\">\n    \u003Cdiv>\n      \u003Cdiv class=\"focus-demo-label\">Dashed Focus Indicator\u003C\u002Fdiv>\n      \u003Cp style=\"font-size: 14px; color: var(--text-muted); font-weight: 340; margin-bottom: 16px;\">All interactive elements use \u003Ccode style=\"font-family: var(--font-mono); font-size: 12px; background: var(--glass-surface); padding: 2px 6px; border-radius: 4px;\">dashed 2px\u003C\u002Fcode> outline on focus, echoing the selection handles in the Figma editor.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv style=\"display: flex; gap: 16px; align-items: center;\">\n      \u003Cbutton class=\"btn-white-pill-solid btn-focus-visible\">Focused Pill\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-white-circle btn-focus-visible\" aria-label=\"Focused\">✓\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F CARD EXAMPLES\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">STANDARD CARD\u003C\u002Fdiv>\n      \u003Ch3>Border Contained\u003C\u002Fh3>\n      \u003Cp>Standard content card with subtle white-alpha border and 8px radius. The default container on the black surface.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">ELEVATED CARD\u003C\u002Fdiv>\n      \u003Ch3>Subtle Glow\u003C\u002Fh3>\n      \u003Cp>Floating card with subtle luminous shadow. Used for product showcases and hover states that lift off the dark surface.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-glass\">\n      \u003Cdiv class=\"card-label\">GLASS SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Glass Overlay\u003C\u002Fh3>\n      \u003Cp>Glass-effect card using rgba(255,255,255,0.08) background. Secondary containers with a translucent frosted feel.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F SPACING SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-weight: 340; font-size: 18px; letter-spacing: -0.26px;\">Base unit: 8px. Scale from 1px to 50px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 72px; height: 72px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">18px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 200px; height: 200px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">50px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F BORDER RADIUS SCALE\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50px; width: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50%;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Circle \u002F Icon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F ELEVATION & DEPTH\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Pure black page background and most text. The default dark surface.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-surface\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Glass white card on black background. Primary depth through translucent layering.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle luminous shadow for floating cards and hover states on dark surfaces.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Figma Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ffigma\u002FDESIGN.md) extracted from the public [Figma](https:\u002F\u002Ffigma.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ffigma\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Figma design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Figma Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ffigma\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Figma Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ffigma\u002Fpreview-screenshot.png)\n",{"slug":124,"name":125,"category":15,"designMd":126,"previewHtml":127,"previewDarkHtml":128,"readme":129},"framer","Framer","# Design System Inspiration of Framer\n\n## 1. Visual Theme & Atmosphere\n\nFramer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.\n\nThe typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.\n\nThe overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.\n\n**Key Characteristics:**\n- Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted\n- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)\n- Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise\n- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements\n- Product screenshots as hero art — the tool IS the marketing\n- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces\n- Extensive OpenType feature usage across Inter for refined micro-typography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity\n- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds\n- **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights\n\n### Secondary & Accent\n- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces\n- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation\n\n### Surface & Background\n- **Void Black** (`#000000`): Page background, primary canvas\n- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark\n- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states\n\n### Neutrals & Text\n- **Pure White** (`#ffffff`): Heading text, high-emphasis body text\n- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information\n- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces\n\n### Semantic & Accent\n- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings\n- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements\n- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)\n\n### Gradient System\n- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth\n- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `GT Walsheim Framer Medium` \u002F `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif\n- **Body\u002FUI**: `Inter Variable` \u002F `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`\n- **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)\n- **Monospace**: `Azeret Mono` — companion mono for code and technical labels\n- **Rounded**: `Open Runde` — small rounded companion font for micro-labels\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |\n| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |\n| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |\n| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |\n| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |\n| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |\n| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |\n| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |\n| Nav\u002FUI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |\n| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |\n| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |\n| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |\n\n### Principles\n- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless\n- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes\n- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone\n- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length\n\n## 4. Component Stylings\n\n### Buttons\n- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle\n- **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA — clean, high-contrast on dark, unmissable\n- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background\n- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects\n\n### Cards & Containers\n- **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px–15px radius)\n- **Elevated Card**: Multi-layer shadow — `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)\n- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews\n- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Input fields follow dark theme: dark background, subtle border, white text\n- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`\n- Placeholder text in `rgba(255, 255, 255, 0.4)`\n\n### Navigation\n- **Dark floating nav bar**: Black background with frosted glass effect, white text links\n- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change\n- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav\n- **Mobile**: Collapses to hamburger menu, maintains dark theme\n- **Sticky behavior**: Nav remains fixed at top on scroll\n\n### Image Treatment\n- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)\n- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation\n- **16:9 and custom aspect ratios**: Product demos fill their containers\n- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow\n\n### Trust & Social Proof\n- Customer logos and testimonials in muted gray on dark surfaces\n- Minimal ornamentation — the product screenshots serve as the trust signal\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px\n- **Section padding**: Large vertical spacing (80px–120px between sections)\n- **Card padding**: 15px–30px internal padding\n- **Component gaps**: 8px–20px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container, centered\n- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases\n- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)\n\n### Whitespace Philosophy\n- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks\n- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space\n- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text\n\n### Border Radius Scale\n- **1px**: Micro-elements, nearly squared precision edges\n- **5px–7px**: Small UI elements, image thumbnails — subtly softened\n- **8px**: Standard component radius — code blocks, buttons, interactive elements\n- **10px–12px**: Cards, product screenshots — comfortably rounded\n- **15px–20px**: Large containers, feature cards — generously rounded\n- **30px–40px**: Navigation pills, pagination — noticeably rounded\n- **100px**: Full pill shape — primary CTAs, tag elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |\n| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |\n| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |\n| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |\n\n### Shadow Philosophy\nFramer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:\n- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element\n- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface\n- **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)\n\n### Decorative Depth\n- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas\n- **No background blur\u002Fglassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (`#000000`) as the primary background — not dark gray, not charcoal\n- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)\n- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons\n- Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states\n- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds\n- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand\n- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)\n- Let product screenshots be the visual centerpiece — the tool markets itself\n- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment\n\n### Don't\n- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)\n- Apply bold (700+) weight to GT Walsheim display text — medium 500 only\n- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system\n- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)\n- Add decorative imagery, illustrations, or icons — the product IS the illustration\n- Use positive letter-spacing on headlines — everything is compressed, negative tracking\n- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients\n- Place light\u002Fwhite backgrounds behind content sections — the void is sacred\n- Use serif or display-weight fonts — the system is geometric sans-serif only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |\n| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |\n| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |\n\n### Touch Targets\n- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum\n- Nav links: 15px text with generous padding for touch accessibility\n- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint\n- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally\n- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile\n- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios\n- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile\n\n### Image Behavior\n- Product screenshots are responsive, scaling within their container boundaries\n- No art direction changes — same crops across breakpoints\n- Dark background ensures screenshots maintain visual impact at any size\n- Screenshots lazy-load as user scrolls into view\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Void Black (`#000000`)\n- Primary Text: Pure White (`#ffffff`)\n- Accent\u002FCTA: Framer Blue (`#0099ff`)\n- Secondary Text: Muted Silver (`#a6a6a6`)\n- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)\n- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)\n\n### Example Component Prompts\n- \"Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text\"\n- \"Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text\"\n- \"Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA\"\n- \"Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)\"\n- \"Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — the dark canvas makes each element precious\n2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable\n3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links\n4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic\n5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Framer\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@100;300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Azeret+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-white: #ffffff;\n    --color-blue: #0099ff;\n    --color-silver: #a6a6a6;\n    --color-near-black: #090909;\n    --color-frosted: rgba(255, 255, 255, 0.1);\n    --color-frosted-hover: rgba(255, 255, 255, 0.15);\n    --color-blue-glow: rgba(0, 153, 255, 0.15);\n    --color-ghost: rgba(255, 255, 255, 0.6);\n    --color-placeholder: rgba(255, 255, 255, 0.4);\n    --shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;\n    --shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;\n    --shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;\n    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'Azeret Mono', monospace;\n    --radius-xs: 1px;\n    --radius-sm: 5px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n    --radius-xl: 15px;\n    --radius-2xl: 20px;\n    --radius-pill: 100px;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-body);\n    background: var(--color-black);\n    color: var(--color-white);\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(0, 0, 0, 0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--color-white);\n    letter-spacing: -0.3px;\n  }\n  .nav-links {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    list-style: none;\n  }\n  .nav-links a {\n    color: var(--color-silver);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: -0.14px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-white); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black) !important;\n    padding: 8px 18px;\n    border-radius: var(--radius-pill);\n    font-weight: 600;\n    font-size: 13px;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 120px 32px 100px;\n    text-align: center;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .hero h1 {\n    font-size: 96px;\n    font-weight: 700;\n    letter-spacing: -5px;\n    line-height: 0.88;\n    color: var(--color-white);\n    margin-bottom: 24px;\n  }\n  .hero .subtitle {\n    font-size: 18px;\n    color: var(--color-silver);\n    letter-spacing: -0.01px;\n    line-height: 1.5;\n    max-width: 560px;\n    margin: 0 auto 40px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n    letter-spacing: -0.15px;\n  }\n  .btn-primary:hover { opacity: 0.9; }\n  .btn-secondary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-frosted);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: background 0.2s;\n    letter-spacing: -0.15px;\n  }\n  .btn-secondary:hover { background: var(--color-frosted-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 32px;\n  }\n  .section-title {\n    font-size: 48px;\n    font-weight: 700;\n    letter-spacing: -2.5px;\n    line-height: 1.0;\n    margin-bottom: 12px;\n  }\n  .section-desc {\n    font-size: 16px;\n    color: var(--color-silver);\n    margin-bottom: 48px;\n    letter-spacing: -0.01px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n    margin: 0 32px;\n    max-width: 1136px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--color-silver);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 16px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    background: var(--color-near-black);\n    box-shadow: var(--shadow-ring);\n  }\n  .color-swatch-preview {\n    height: 80px;\n    width: 100%;\n  }\n  .color-swatch-info {\n    padding: 12px;\n  }\n  .color-swatch-name {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 2px;\n    letter-spacing: -0.13px;\n  }\n  .color-swatch-hex {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-silver);\n  }\n  .color-swatch-role {\n    font-size: 11px;\n    color: var(--color-ghost);\n    margin-top: 4px;\n    line-height: 1.4;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 24px 0;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--color-blue);\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n  }\n  .type-spec {\n    font-size: 12px;\n    color: var(--color-silver);\n    margin-top: 8px;\n    letter-spacing: -0.12px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-showcase {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    cursor: pointer;\n    transition: background 0.2s, border-color 0.2s;\n    letter-spacing: -0.15px;\n    font-family: var(--font-body);\n  }\n  .btn-ghost:hover {\n    background: var(--color-frosted);\n    border-color: rgba(255, 255, 255, 0.25);\n  }\n  .btn-blue {\n    background: var(--color-blue);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n    letter-spacing: -0.15px;\n    font-family: var(--font-body);\n  }\n  .btn-blue:hover { opacity: 0.85; }\n  .btn-label {\n    display: block;\n    font-size: 11px;\n    color: var(--color-silver);\n    margin-top: 8px;\n    text-align: center;\n    font-family: var(--font-mono);\n  }\n  .btn-item { text-align: center; }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n  }\n  .card {\n    background: var(--color-near-black);\n    border-radius: var(--radius-lg);\n    padding: 28px;\n    box-shadow: var(--shadow-ring);\n    transition: box-shadow 0.3s, transform 0.3s;\n  }\n  .card:hover {\n    box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 12px 40px;\n    transform: translateY(-2px);\n  }\n  .card-elevated {\n    box-shadow: var(--shadow-floating);\n  }\n  .card-elevated:hover {\n    box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.35) 0px 14px 44px;\n    transform: translateY(-2px);\n  }\n  .card-title {\n    font-size: 20px;\n    font-weight: 600;\n    letter-spacing: -0.8px;\n    margin-bottom: 8px;\n  }\n  .card-text {\n    font-size: 14px;\n    color: var(--color-silver);\n    line-height: 1.5;\n  }\n  .card-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--color-frosted);\n    border-radius: var(--radius-pill);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--color-blue);\n    margin-bottom: 12px;\n    letter-spacing: -0.11px;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--color-silver);\n    letter-spacing: -0.13px;\n  }\n  .form-input {\n    background: var(--color-near-black);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: var(--radius-md);\n    padding: 12px 14px;\n    color: var(--color-white);\n    font-size: 14px;\n    font-family: var(--font-body);\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n  .form-input::placeholder { color: var(--color-placeholder); }\n  .form-input:focus {\n    border-color: var(--color-blue);\n    box-shadow: var(--shadow-ring);\n  }\n  .form-input-error {\n    border-color: #ff4444;\n    box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;\n  }\n  .form-error-text {\n    font-size: 12px;\n    color: #ff4444;\n  }\n  textarea.form-input {\n    min-height: 100px;\n    resize: vertical;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 10px;\n  }\n  .spacing-box {\n    height: 32px;\n    background: var(--color-blue);\n    border-radius: 4px;\n    opacity: 0.7;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--color-silver);\n    min-width: 60px;\n    text-align: right;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n    align-items: flex-end;\n  }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 72px;\n    height: 72px;\n    background: var(--color-frosted);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    margin-bottom: 8px;\n  }\n  .radius-value {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-silver);\n  }\n  .radius-context {\n    font-size: 10px;\n    color: var(--color-ghost);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    padding: 28px;\n    border-radius: var(--radius-lg);\n    background: var(--color-near-black);\n    min-height: 120px;\n  }\n  .elevation-label {\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 6px;\n    letter-spacing: -0.14px;\n  }\n  .elevation-desc {\n    font-size: 12px;\n    color: var(--color-silver);\n    line-height: 1.5;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    text-align: center;\n    padding: 48px 32px;\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n    margin-top: 40px;\n  }\n  .footer p {\n    font-size: 13px;\n    color: var(--color-silver);\n  }\n  .footer a {\n    color: var(--color-blue);\n    text-decoration: none;\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 52px; letter-spacing: -2.5px; }\n    .hero .subtitle { font-size: 16px; }\n    .section-title { font-size: 36px; letter-spacing: -1.5px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Get Started\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Framer\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #000000; border-bottom: 1px solid rgba(255,255,255,0.06);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary background, void canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, button fill\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0099ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Framer Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0099ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Accent — links, borders, focus rings\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #a6a6a6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a6a6a6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text, descriptions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #090909; border: 1px solid rgba(255,255,255,0.06);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#090909\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Elevated dark surface, card background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.06);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.1)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Glass-effect buttons, translucent surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.6);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ghost White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.6)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, placeholders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Blue Glow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,153,255,0.15)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Focus ring shadow, blue halo\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0000ee;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Default Link Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0000ee\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Browser default links (rare)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 110px \u002F 500 \u002F 0.85 \u002F -5.5px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;\">Build better sites\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 85px \u002F 500 \u002F 0.95 \u002F -4.25px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;\">Scale without limits\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Heading — 62px \u002F 500 \u002F 1.00 \u002F -3.1px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;\">Create, collaborate\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium — OpenType: ss02\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Feature Heading — 32px \u002F 500 \u002F 1.13 \u002F -1px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;\">Powering ambitious sites\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium — tightest of the smaller headings\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Card Title — 24px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;\">Interactive components that respond\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Feature Title — 22px \u002F 700 \u002F 1.20 \u002F -0.8px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;\">Visual canvas meets code precision\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: cv05\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body Large — 18px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 18px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);\">Framer brings together the power of a visual canvas with the flexibility of code to create stunning, production-ready websites.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 15px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 15px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);\">Design and publish performant sites. Framer handles layout, interactions, and responsive behavior so you can focus on creativity.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv11\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 400 \u002F 1.40\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);\">Responsive breakpoints with automatic layout adjustments across all devices.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Label — 13px \u002F 500 \u002F 1.60\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);\">Component interaction settings\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: cv06, cv11, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Micro Code — 10.4px \u002F 400 \u002F 1.60\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 10.4px; font-weight: 400; line-height: 1.6; color: var(--color-blue);\">npx framer-motion@latest\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Azeret Mono — OpenType: cv06, cv11, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Start for Free\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Primary \u002F White Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Frosted \u002F Glass\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost \u002F Outline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-blue\">Upgrade Plan\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Blue \u002F Accent\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\" style=\"padding: 8px 18px; font-size: 13px;\">Sign Up\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Small \u002F Nav CTA\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Visual Canvas\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Design Freedom\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-tag\">Interactive\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Smart Components\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Performance\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Lightning Fast\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark inputs with Framer Blue focus rings and minimal chrome.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email Address (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@example.com\" style=\"border-color: var(--color-blue); box-shadow: var(--shadow-ring);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Project URL (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"url\" class=\"form-input form-input-error\" placeholder=\"https:\u002F\u002Fyoursite.framer.app\" value=\"invalid-url\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid URL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit system with fine-grained sub-8px values for micro-adjustments.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 8px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 24px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 40px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 56px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 72px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">15px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 96px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 140px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">30px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 220px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">35px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 260px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From nearly-squared micro edges to full pill shapes — radius grows with element importance.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 1px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">1px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 5px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">5px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Thumbnails\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Components\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 15px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">15px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Large cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 40px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">40px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Nav pills\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 100px; width: 72px; height: 44px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">100px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Full pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid rgba(255,255,255,0.04);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow. Pure black surface. The void baseline that everything else rises from.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-ring);\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Ring\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-contained);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Contained\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-floating);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Floating\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fframer.com\">framer.com\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Framer — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@100;300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Azeret+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-white: #ffffff;\n    --color-blue: #0099ff;\n    --color-silver: #a6a6a6;\n    --color-near-black: #090909;\n    --color-frosted: rgba(255, 255, 255, 0.1);\n    --color-frosted-hover: rgba(255, 255, 255, 0.15);\n    --color-blue-glow: rgba(0, 153, 255, 0.15);\n    --color-ghost: rgba(255, 255, 255, 0.6);\n    --color-placeholder: rgba(255, 255, 255, 0.4);\n    --shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;\n    --shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;\n    --shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;\n    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'Azeret Mono', monospace;\n    --radius-xs: 1px;\n    --radius-sm: 5px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n    --radius-xl: 15px;\n    --radius-2xl: 20px;\n    --radius-pill: 100px;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-body);\n    background: #050508;\n    color: var(--color-white);\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 14px;\n    right: 14px;\n    z-index: 200;\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 5px 12px;\n    border-radius: var(--radius-pill);\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: -0.11px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(5, 5, 8, 0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--color-white);\n    letter-spacing: -0.3px;\n  }\n  .nav-links {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    list-style: none;\n  }\n  .nav-links a {\n    color: var(--color-silver);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: -0.14px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-white); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black) !important;\n    padding: 8px 18px;\n    border-radius: var(--radius-pill);\n    font-weight: 600;\n    font-size: 13px;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 120px 32px 100px;\n    text-align: center;\n    max-width: 1200px;\n    margin: 0 auto;\n    background: radial-gradient(ellipse at 50% 80%, rgba(0, 153, 255, 0.06) 0%, transparent 60%);\n  }\n  .hero h1 {\n    font-size: 96px;\n    font-weight: 700;\n    letter-spacing: -5px;\n    line-height: 0.88;\n    color: var(--color-white);\n    margin-bottom: 24px;\n  }\n  .hero .subtitle {\n    font-size: 18px;\n    color: var(--color-silver);\n    letter-spacing: -0.01px;\n    line-height: 1.5;\n    max-width: 560px;\n    margin: 0 auto 40px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n    letter-spacing: -0.15px;\n  }\n  .btn-primary:hover { opacity: 0.9; }\n  .btn-secondary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-frosted);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: background 0.2s;\n    letter-spacing: -0.15px;\n  }\n  .btn-secondary:hover { background: var(--color-frosted-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 32px;\n  }\n  .section-title {\n    font-size: 48px;\n    font-weight: 700;\n    letter-spacing: -2.5px;\n    line-height: 1.0;\n    margin-bottom: 12px;\n  }\n  .section-desc {\n    font-size: 16px;\n    color: var(--color-silver);\n    margin-bottom: 48px;\n    letter-spacing: -0.01px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid rgba(255, 255, 255, 0.04);\n    margin: 0 32px;\n    max-width: 1136px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--color-silver);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 16px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    background: #0a0a0d;\n    box-shadow: var(--shadow-ring);\n  }\n  .color-swatch-preview {\n    height: 80px;\n    width: 100%;\n  }\n  .color-swatch-info {\n    padding: 12px;\n  }\n  .color-swatch-name {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 2px;\n    letter-spacing: -0.13px;\n  }\n  .color-swatch-hex {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-silver);\n  }\n  .color-swatch-role {\n    font-size: 11px;\n    color: var(--color-ghost);\n    margin-top: 4px;\n    line-height: 1.4;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 24px 0;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-family: var(--font-mono);\n    font-size: 10px;\n    color: var(--color-blue);\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    margin-bottom: 8px;\n  }\n  .type-spec {\n    font-size: 12px;\n    color: var(--color-silver);\n    margin-top: 8px;\n    letter-spacing: -0.12px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-showcase {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    cursor: pointer;\n    transition: background 0.2s, border-color 0.2s;\n    letter-spacing: -0.15px;\n    font-family: var(--font-body);\n  }\n  .btn-ghost:hover {\n    background: var(--color-frosted);\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n  .btn-blue {\n    background: var(--color-blue);\n    color: var(--color-white);\n    padding: 12px 28px;\n    border-radius: var(--radius-pill);\n    font-size: 15px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n    letter-spacing: -0.15px;\n    font-family: var(--font-body);\n  }\n  .btn-blue:hover { opacity: 0.85; }\n  .btn-label {\n    display: block;\n    font-size: 11px;\n    color: var(--color-silver);\n    margin-top: 8px;\n    text-align: center;\n    font-family: var(--font-mono);\n  }\n  .btn-item { text-align: center; }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n  }\n  .card {\n    background: #0a0a0d;\n    border-radius: var(--radius-lg);\n    padding: 28px;\n    box-shadow: var(--shadow-ring);\n    transition: box-shadow 0.3s, transform 0.3s;\n  }\n  .card:hover {\n    box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 40px;\n    transform: translateY(-2px);\n  }\n  .card-elevated {\n    box-shadow: var(--shadow-floating);\n  }\n  .card-elevated:hover {\n    box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.45) 0px 14px 44px;\n    transform: translateY(-2px);\n  }\n  .card-title {\n    font-size: 20px;\n    font-weight: 600;\n    letter-spacing: -0.8px;\n    margin-bottom: 8px;\n  }\n  .card-text {\n    font-size: 14px;\n    color: var(--color-silver);\n    line-height: 1.5;\n  }\n  .card-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: rgba(0, 153, 255, 0.1);\n    border-radius: var(--radius-pill);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--color-blue);\n    margin-bottom: 12px;\n    letter-spacing: -0.11px;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--color-silver);\n    letter-spacing: -0.13px;\n  }\n  .form-input {\n    background: #0a0a0d;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: var(--radius-md);\n    padding: 12px 14px;\n    color: var(--color-white);\n    font-size: 14px;\n    font-family: var(--font-body);\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n  .form-input::placeholder { color: var(--color-placeholder); }\n  .form-input:focus {\n    border-color: var(--color-blue);\n    box-shadow: var(--shadow-ring);\n  }\n  .form-input-error {\n    border-color: #ff4444;\n    box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;\n  }\n  .form-error-text {\n    font-size: 12px;\n    color: #ff4444;\n  }\n  textarea.form-input {\n    min-height: 100px;\n    resize: vertical;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 10px;\n  }\n  .spacing-box {\n    height: 32px;\n    background: var(--color-blue);\n    border-radius: 4px;\n    opacity: 0.6;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--color-silver);\n    min-width: 60px;\n    text-align: right;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n    align-items: flex-end;\n  }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 72px;\n    height: 72px;\n    background: rgba(255, 255, 255, 0.06);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    margin-bottom: 8px;\n  }\n  .radius-value {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-silver);\n  }\n  .radius-context {\n    font-size: 10px;\n    color: var(--color-ghost);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    padding: 28px;\n    border-radius: var(--radius-lg);\n    background: #0a0a0d;\n    min-height: 120px;\n  }\n  .elevation-label {\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 6px;\n    letter-spacing: -0.14px;\n  }\n  .elevation-desc {\n    font-size: 12px;\n    color: var(--color-silver);\n    line-height: 1.5;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    text-align: center;\n    padding: 48px 32px;\n    border-top: 1px solid rgba(255, 255, 255, 0.04);\n    margin-top: 40px;\n  }\n  .footer p {\n    font-size: 13px;\n    color: var(--color-silver);\n  }\n  .footer a {\n    color: var(--color-blue);\n    text-decoration: none;\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 52px; letter-spacing: -2.5px; }\n    .hero .subtitle { font-size: 16px; }\n    .section-title { font-size: 36px; letter-spacing: -1.5px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Get Started\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Framer\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #000000; border-bottom: 1px solid rgba(255,255,255,0.04);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary background, void canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, button fill\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0099ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Framer Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0099ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Accent — links, borders, focus rings\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #a6a6a6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a6a6a6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text, descriptions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #090909; border: 1px solid rgba(255,255,255,0.04);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#090909\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Elevated dark surface, card background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.04);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.1)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Glass-effect buttons, translucent surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.6);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ghost White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.6)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, placeholders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Blue Glow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,153,255,0.15)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Focus ring shadow, blue halo\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0000ee;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Default Link Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0000ee\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Browser default links (rare)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 110px \u002F 500 \u002F 0.85 \u002F -5.5px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;\">Build better sites\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 85px \u002F 500 \u002F 0.95 \u002F -4.25px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;\">Scale without limits\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Heading — 62px \u002F 500 \u002F 1.00 \u002F -3.1px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;\">Create, collaborate\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium — OpenType: ss02\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Feature Heading — 32px \u002F 500 \u002F 1.13 \u002F -1px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;\">Powering ambitious sites\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GT Walsheim Medium — tightest of the smaller headings\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Card Title — 24px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;\">Interactive components that respond\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Feature Title — 22px \u002F 700 \u002F 1.20 \u002F -0.8px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;\">Visual canvas meets code precision\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: cv05\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body Large — 18px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 18px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);\">Framer brings together the power of a visual canvas with the flexibility of code to create stunning, production-ready websites.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 15px \u002F 400 \u002F 1.30 \u002F -0.01px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 15px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3; color: var(--color-silver);\">Design and publish performant sites. Framer handles layout, interactions, and responsive behavior so you can focus on creativity.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv11\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 400 \u002F 1.40\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);\">Responsive breakpoints with automatic layout adjustments across all devices.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Label — 13px \u002F 500 \u002F 1.60\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);\">Component interaction settings\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: cv06, cv11, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Micro Code — 10.4px \u002F 400 \u002F 1.60\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 10.4px; font-weight: 400; line-height: 1.6; color: var(--color-blue);\">npx framer-motion@latest\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Azeret Mono — OpenType: cv06, cv11, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Start for Free\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Primary \u002F White Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Frosted \u002F Glass\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost \u002F Outline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-blue\">Upgrade Plan\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Blue \u002F Accent\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\" style=\"padding: 8px 18px; font-size: 13px;\">Sign Up\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Small \u002F Nav CTA\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Visual Canvas\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Design Freedom\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-tag\">Interactive\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Smart Components\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Performance\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Lightning Fast\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark inputs with Framer Blue focus rings and minimal chrome.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email Address (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@example.com\" style=\"border-color: var(--color-blue); box-shadow: var(--shadow-ring);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Project URL (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"url\" class=\"form-input form-input-error\" placeholder=\"https:\u002F\u002Fyoursite.framer.app\" value=\"invalid-url\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid URL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit system with fine-grained sub-8px values for micro-adjustments.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 8px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 24px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 40px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 56px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 72px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">15px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 96px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 140px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">30px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 220px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">35px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 260px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From nearly-squared micro edges to full pill shapes — radius grows with element importance.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 1px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">1px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 5px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">5px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Thumbnails\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Components\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 15px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">15px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Large cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 40px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">40px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Nav pills\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 100px; width: 72px; height: 44px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">100px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Full pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid rgba(255,255,255,0.03);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow. Pure black surface. The void baseline that everything else rises from.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-ring);\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Ring\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-contained);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Contained\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-floating);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Floating\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fframer.com\">framer.com\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Framer Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fframer\u002FDESIGN.md) extracted from the public [Framer](https:\u002F\u002Fframer.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fframer\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Framer design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Framer Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fframer\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Framer Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fframer\u002Fpreview-screenshot.png)\n",{"slug":131,"name":132,"category":60,"designMd":133,"previewHtml":134,"previewDarkHtml":135,"readme":136},"hashicorp","Hashicorp","# Design System Inspiration of HashiCorp\n\n## 1. Visual Theme & Atmosphere\n\nHashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (`#15181e`, `#0d0e12`) for hero areas and product showcases, creating a day\u002Fnight duality that mirrors the \"build in light, deploy in dark\" developer workflow.\n\nThe typography is anchored by a custom brand font (HashiCorp Sans, loaded as `__hashicorpSans_96f0ca`) that carries substantial weight — literally. Headings use 600–700 weights with tight line-heights (1.17–1.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType `\"kern\"` enabled is not decorative — it's infrastructure-grade typography.\n\nWhat distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color — Terraform purple (`#7b42bc`), Vault yellow (`#ffcf25`), Waypoint teal (`#14c6cb`), Vagrant blue (`#1868f2`) — and these colors appear throughout as accent tokens via a CSS custom property system (`--mds-color-*`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.\n\nThe component system uses the `mds` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle — dual-layer micro-shadows using `rgba(97, 104, 117, 0.05)` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.\n\n**Key Characteristics:**\n- Dual-mode: clean white sections + dramatic dark (`#15181e`) hero\u002Fproduct areas\n- Custom HashiCorp Sans font with 600–700 weights and `\"kern\"` feature\n- Multi-product color system via `--mds-color-*` CSS custom properties\n- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue\n- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)\n- Micro-shadows: dual-layer at 0.05 opacity — depth through whisper, not shout\n- Token-driven `mds` component system with semantic variable names\n- Tight border radius: 2px–8px, nothing pill-shaped or circular\n- System-ui fallback stack for secondary text\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Black** (`#000000`): Primary brand color, text on light surfaces, `--mds-color-hcp-brand`\n- **Dark Charcoal** (`#15181e`): Dark mode backgrounds, hero sections\n- **Near Black** (`#0d0e12`): Deepest dark mode surface, form inputs on dark\n\n### Neutral Scale\n- **Light Gray** (`#f1f2f3`): Light backgrounds, subtle surfaces\n- **Mid Gray** (`#d5d7db`): Borders, button text on dark\n- **Cool Gray** (`#b2b6bd`): Border accents (at 0.1–0.4 opacity)\n- **Dark Gray** (`#656a76`): Helper text, secondary labels, `--mds-form-helper-text-color`\n- **Charcoal** (`#3b3d45`): Secondary text on light, button borders\n- **Near White** (`#efeff1`): Primary text on dark surfaces\n\n### Product Brand Colors\n- **Terraform Purple** (`#7b42bc`): `--mds-color-terraform-button-background`\n- **Vault Yellow** (`#ffcf25`): `--mds-color-vault-button-background`\n- **Waypoint Teal** (`#14c6cb`): `--mds-color-waypoint-button-background-focus`\n- **Waypoint Teal Hover** (`#12b6bb`): `--mds-color-waypoint-button-background-hover`\n- **Vagrant Blue** (`#1868f2`): `--mds-color-vagrant-brand`\n- **Purple Accent** (`#911ced`): `--mds-color-palette-purple-300`\n- **Visited Purple** (`#a737ff`): `--mds-color-foreground-action-visited`\n\n### Semantic Colors\n- **Action Blue** (`#1060ff`): Primary action links on dark\n- **Link Blue** (`#2264d6`): Primary links on light\n- **Bright Blue** (`#2b89ff`): Active links, hover accent\n- **Amber** (`#bb5a00`): `--mds-color-palette-amber-200`, warning states\n- **Amber Light** (`#fbeabf`): `--mds-color-palette-amber-100`, warning backgrounds\n- **Vault Faint Yellow** (`#fff9cf`): `--mds-color-vault-radar-gradient-faint-stop`\n- **Orange** (`#a9722e`): `--mds-color-unified-core-orange-6`\n- **Red** (`#731e25`): `--mds-color-unified-core-red-7`, error states\n- **Navy** (`#101a59`): `--mds-color-unified-core-blue-7`\n\n### Shadows\n- **Micro Shadow** (`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`): Default card\u002Fbutton elevation\n- **Focus Outline**: `3px solid var(--mds-color-focus-action-external)` — systematic focus ring\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary Brand**: `__hashicorpSans_96f0ca` (HashiCorp Sans), with fallback: `__hashicorpSans_Fallback_96f0ca`\n- **System UI**: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | `\"kern\"` enabled |\n| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | `\"kern\"` enabled |\n| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |\n| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (tight) | normal | Feature blocks |\n| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |\n| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |\n| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | Bold body text |\n| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | Hero descriptions |\n| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (relaxed) | normal | Standard body text |\n| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |\n| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | Secondary content |\n| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | Metadata, footer links |\n| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | `text-transform: uppercase` |\n\n### Principles\n- **Brand\u002FSystem split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.\n- **Kern always on**: All HashiCorp Sans text enables OpenType `\"kern\"` — letterfitting is non-negotiable.\n- **Tight headings**: Every heading uses 1.17–1.21 line-height, creating dense, stacked text blocks that feel infrastructural — solid, load-bearing.\n- **Relaxed body**: Body text uses 1.50–1.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.\n- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category\u002Fsection marker — always HashiCorp Sans weight 600.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#15181e`\n- Text: `#d5d7db`\n- Padding: 9px 9px 9px 15px (asymmetric, more left padding)\n- Radius: 5px\n- Border: `1px solid rgba(178, 182, 189, 0.4)`\n- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`\n- Focus: `3px solid var(--mds-color-focus-action-external)`\n- Hover: uses `--mds-color-surface-interactive` token\n\n**Secondary White**\n- Background: `#ffffff`\n- Text: `#3b3d45`\n- Padding: 8px 12px\n- Radius: 4px\n- Hover: `--mds-color-surface-interactive` + low-shadow elevation\n- Focus: `3px solid transparent` outline\n- Clean, minimal appearance\n\n**Product-Colored Buttons**\n- Terraform: background `#7b42bc`\n- Vault: background `#ffcf25` (dark text)\n- Waypoint: background `#14c6cb`, hover `#12b6bb`\n- Each product button follows the same structural pattern but uses its brand color\n\n### Badges \u002F Pills\n- Background: `#42225b` (deep purple)\n- Text: `#efeff1`\n- Padding: 3px 7px\n- Radius: 5px\n- Border: `1px solid rgb(180, 87, 255)`\n- Font: 16px\n\n### Inputs\n\n**Text Input (Dark Mode)**\n- Background: `#0d0e12`\n- Text: `#efeff1`\n- Border: `1px solid rgb(97, 104, 117)`\n- Padding: 11px\n- Radius: 5px\n- Focus: `3px solid var(--mds-color-focus-action-external)` outline\n\n**Checkbox**\n- Background: `#0d0e12`\n- Border: `1px solid rgb(97, 104, 117)`\n- Radius: 3px\n\n### Links\n- **Action Blue on Light**: `#2264d6`, hover → blue-600 variable, underline on hover\n- **Action Blue on Dark**: `#1060ff` or `#2b89ff`, underline on hover\n- **White on Dark**: `#ffffff`, transparent underline → visible underline on hover\n- **Neutral on Light**: `#3b3d45`, transparent underline → visible underline on hover\n- **Light on Dark**: `#efeff1`, similar hover pattern\n- All links use `var(--wpl-blue-600)` as hover color\n\n### Cards & Containers\n- Light mode: white background, micro-shadow elevation\n- Dark mode: `#15181e` or darker surfaces\n- Radius: 8px for cards and containers\n- Product showcase cards with gradient borders or accent lighting\n\n### Navigation\n- Clean horizontal nav with mega-menu dropdowns\n- HashiCorp logo left-aligned\n- system-ui 15px weight 500 for links\n- Product categories organized by lifecycle management group\n- \"Get started\" and \"Contact us\" CTAs in header\n- Dark mode variant for hero sections\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px\n\n### Grid & Container\n- Max content width: ~1150px (xl breakpoint)\n- Full-width dark hero sections with contained content\n- Card grids: 2–3 column layouts\n- Generous horizontal padding at desktop scale\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C375px | Tight single column |\n| Mobile | 375–480px | Standard mobile |\n| Small Tablet | 480–600px | Minor adjustments |\n| Tablet | 600–768px | 2-column grids begin |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1120px | Standard layout |\n| Large Desktop | 1120–1440px | Max-width content |\n| Ultra-wide | >1440px | Centered, generous margins |\n\n### Whitespace Philosophy\n- **Enterprise breathing room**: Generous vertical spacing between sections (48px–80px+) communicates stability and seriousness.\n- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual \"weight at the top\" of each section.\n- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.\n\n### Border Radius Scale\n- Minimal (2px): Links, small inline elements\n- Subtle (3px): Checkboxes, small inputs\n- Standard (4px): Secondary buttons\n- Comfortable (5px): Primary buttons, badges, inputs\n- Card (8px): Cards, containers, images\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces, text blocks |\n| Whisper (Level 1) | `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px` | Cards, buttons, interactive surfaces |\n| Focus (Level 2) | `3px solid var(--mds-color-focus-action-external)` outline | Focus rings — color-matched to context |\n\n**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible — they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability — nothing floats, nothing is uncertain.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text\n- Enable `\"kern\"` on all HashiCorp Sans text\n- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)\n- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers\n- Keep shadows at the \"whisper\" level (0.05 opacity dual-layer)\n- Use the `--mds-color-*` token system for consistent color application\n- Maintain the tight-heading \u002F relaxed-body rhythm (1.17–1.21 vs 1.50–1.69 line-heights)\n- Use `3px solid` focus outlines for accessibility\n\n### Don't\n- Don't use product brand colors outside their product context (no Terraform purple on Vault content)\n- Don't increase shadow opacity above 0.1 — the whisper level is intentional\n- Don't use pill-shaped buttons (>8px radius) — the sharp, minimal radius is structural\n- Don't skip the `\"kern\"` feature on headings — the font requires it\n- Don't use HashiCorp Sans for small body text — it's designed for 17px+ heading use\n- Don't mix product colors in the same component — each product has one color\n- Don't use pure black (`#000000`) for dark backgrounds — use `#15181e` or `#0d0e12`\n- Don't forget the asymmetric button padding — 9px 9px 9px 15px is intentional\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 768–992px | 2-column grids, nav begins expanding |\n| Desktop | 992–1150px | Full layout, mega-menu nav |\n| Large | >1150px | Max-width centered, generous margins |\n\n### Collapsing Strategy\n- Hero: 82px → 52px → 42px heading sizes\n- Navigation: mega-menu → hamburger\n- Product cards: 3-column → 2-column → stacked\n- Dark sections maintain full-width but compress padding\n- Buttons: inline → full-width stacked on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Light bg: `#ffffff`, `#f1f2f3`\n- Dark bg: `#15181e`, `#0d0e12`\n- Text light: `#000000`, `#3b3d45`\n- Text dark: `#efeff1`, `#d5d7db`\n- Links: `#2264d6` (light), `#1060ff` (dark), `#2b89ff` (active)\n- Helper text: `#656a76`\n- Borders: `rgba(178, 182, 189, 0.4)`, `rgb(97, 104, 117)`\n- Focus: `3px solid` product-appropriate color\n\n### Example Component Prompts\n- \"Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding).\"\n- \"Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63.\"\n- \"Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color.\"\n- \"Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui.\"\n- \"Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline.\"\n\n### Iteration Guide\n1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero\u002Fproduct\n2. HashiCorp Sans for headings only (17px+), system-ui for everything else\n3. Shadows are at whisper level (0.05 opacity) — if visible, reduce\n4. Product colors are sacred — each product owns exactly one color\n5. Focus rings are always 3px solid, color-matched to product context\n6. Uppercase labels are the systematic wayfinding pattern — 13px, 600, 1.3px tracking\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: HashiCorp (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand Primary *\u002F\n    --color-black: #000000;\n    --color-dark-charcoal: #15181e;\n    --color-near-black: #0d0e12;\n\n    \u002F* Neutral Scale *\u002F\n    --color-light-gray: #f1f2f3;\n    --color-mid-gray: #d5d7db;\n    --color-cool-gray: #b2b6bd;\n    --color-dark-gray: #656a76;\n    --color-charcoal: #3b3d45;\n    --color-near-white: #efeff1;\n\n    \u002F* Product Brand Colors *\u002F\n    --color-terraform: #7b42bc;\n    --color-vault: #ffcf25;\n    --color-waypoint: #14c6cb;\n    --color-waypoint-hover: #12b6bb;\n    --color-vagrant: #1868f2;\n    --color-purple-accent: #911ced;\n    --color-visited-purple: #a737ff;\n\n    \u002F* Semantic Colors *\u002F\n    --color-action-blue: #1060ff;\n    --color-link-blue: #2264d6;\n    --color-bright-blue: #2b89ff;\n    --color-amber: #bb5a00;\n    --color-amber-light: #fbeabf;\n    --color-red: #731e25;\n    --color-navy: #101a59;\n    --color-orange: #a9722e;\n\n    \u002F* Shadows *\u002F\n    --shadow-whisper: rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px;\n\n    \u002F* Fonts *\u002F\n    --font-brand: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n\n    \u002F* Light mode *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-section: #f1f2f3;\n    --bg-nav: rgba(255, 255, 255, 0.95);\n    --text-primary: #000000;\n    --text-secondary: #3b3d45;\n    --text-muted: #656a76;\n    --border-color: rgba(178, 182, 189, 0.4);\n    --section-label-color: #656a76;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-system);\n    font-size: 16px;\n    line-height: 1.63;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-brand);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--text-primary);\n  }\n  .nav-brand .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-dark-charcoal);\n    border-radius: 5px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--color-near-white);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.60;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-link-blue); }\n  .nav-cta {\n    background: var(--color-dark-charcoal);\n    color: var(--color-mid-gray);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 5px;\n    font-size: 14px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-whisper);\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    background: var(--color-dark-charcoal);\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 800px;\n    height: 800px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(123, 66, 188, 0.12) 0%, rgba(20, 198, 203, 0.08) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero-label {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    line-height: 1.69;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--color-dark-gray);\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 {\n    font-family: var(--font-brand);\n    font-size: 82px;\n    font-weight: 600;\n    line-height: 1.17;\n    letter-spacing: normal;\n    font-feature-settings: \"kern\" 1;\n    color: #ffffff;\n    max-width: 900px;\n    margin: 0 auto 24px;\n    position: relative;\n  }\n  .hero p {\n    font-family: var(--font-system);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--color-mid-gray);\n    max-width: 600px;\n    margin: 0 auto 40px;\n    position: relative;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    position: relative;\n  }\n  .hero-buttons .btn-primary {\n    background: var(--color-dark-charcoal);\n    color: var(--color-mid-gray);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 5px;\n    font-size: 16px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-whisper);\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .hero-buttons .btn-secondary {\n    background: #ffffff;\n    color: var(--color-charcoal);\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  \u002F* SECTION SYSTEM *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1150px;\n    margin: 0 auto;\n  }\n  .section:nth-child(even of .section) {\n    background: var(--bg-section);\n    max-width: 100%;\n    padding-left: 40px;\n    padding-right: 40px;\n  }\n  .section:nth-child(even of .section) .section-inner {\n    max-width: 1150px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    line-height: 1.69;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-title {\n    font-family: var(--font-brand);\n    font-size: 42px;\n    font-weight: 700;\n    line-height: 1.19;\n    letter-spacing: -0.42px;\n    font-feature-settings: \"kern\" 1;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .section-desc {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.63;\n    color: var(--text-secondary);\n    margin-bottom: 48px;\n    max-width: 640px;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    line-height: 1.21;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    box-shadow: var(--shadow-whisper);\n  }\n  .color-swatch .swatch-block {\n    height: 72px;\n    width: 100%;\n  }\n  .color-swatch .swatch-info {\n    padding: 10px 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch .swatch-name {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n  .color-swatch .swatch-role {\n    font-family: var(--font-system);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-row {\n    display: flex;\n    align-items: baseline;\n    gap: 32px;\n    padding: 20px 0;\n    border-bottom: 1px solid var(--border-color);\n  }\n  .type-row:last-child { border-bottom: none; }\n  .type-meta {\n    flex-shrink: 0;\n    width: 200px;\n    text-align: right;\n  }\n  .type-meta .meta-role {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--section-label-color);\n  }\n  .type-meta .meta-spec {\n    font-family: var(--font-system);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 4px;\n  }\n  .type-sample {\n    flex: 1;\n    min-width: 0;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 32px;\n  }\n  .button-group-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    line-height: 1.21;\n    color: var(--text-primary);\n    margin-bottom: 12px;\n    margin-top: 24px;\n  }\n  .button-group-title:first-child { margin-top: 0; }\n  .btn {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n  }\n  .btn-dark {\n    background: var(--color-dark-charcoal);\n    color: var(--color-mid-gray);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 5px;\n    box-shadow: var(--shadow-whisper);\n  }\n  .btn-white {\n    background: #ffffff;\n    color: var(--color-charcoal);\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n    border-radius: 4px;\n  }\n  .btn-terraform {\n    background: var(--color-terraform);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-terraform);\n    border-radius: 5px;\n  }\n  .btn-vault {\n    background: var(--color-vault);\n    color: var(--color-dark-charcoal);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-vault);\n    border-radius: 5px;\n  }\n  .btn-waypoint {\n    background: var(--color-waypoint);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-waypoint);\n    border-radius: 5px;\n  }\n  .btn-vagrant {\n    background: var(--color-vagrant);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-vagrant);\n    border-radius: 5px;\n  }\n  .btn-badge {\n    background: #42225b;\n    color: var(--color-near-white);\n    padding: 3px 7px;\n    border: 1px solid rgb(180, 87, 255);\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  \u002F* Dark button showcase strip *\u002F\n  .btn-showcase-dark {\n    background: var(--color-dark-charcoal);\n    padding: 32px;\n    border-radius: 8px;\n    margin-bottom: 24px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: var(--shadow-whisper);\n    transition: box-shadow 0.2s;\n  }\n  .card:hover {\n    box-shadow: rgba(97, 104, 117, 0.08) 0px 2px 4px, rgba(97, 104, 117, 0.08) 0px 4px 8px;\n  }\n  .card-color-bar {\n    height: 4px;\n    width: 100%;\n  }\n  .card-body {\n    padding: 24px;\n  }\n  .card-title {\n    font-family: var(--font-brand);\n    font-size: 26px;\n    font-weight: 700;\n    line-height: 1.19;\n    font-feature-settings: \"kern\" 1;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .card-desc {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.63;\n    color: var(--text-secondary);\n    margin-bottom: 16px;\n  }\n  .card-link {\n    font-family: var(--font-system);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--color-link-blue);\n    text-decoration: none;\n  }\n  .card-link:hover { text-decoration: underline; }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 32px;\n  }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    display: block;\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n  }\n  .form-input {\n    width: 100%;\n    background: var(--bg-card);\n    border: 1px solid rgb(97, 104, 117);\n    border-radius: 5px;\n    padding: 11px;\n    font-family: var(--font-system);\n    font-size: 16px;\n    color: var(--text-primary);\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input:focus {\n    border-color: var(--color-link-blue);\n    box-shadow: 0 0 0 3px rgba(34, 100, 214, 0.2);\n  }\n  .form-input-error {\n    border-color: var(--color-red);\n  }\n  .form-error-msg {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: var(--color-red);\n    margin-top: 6px;\n  }\n  .form-helper {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: var(--text-muted);\n    margin-top: 6px;\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* Dark form area *\u002F\n  .form-dark-area {\n    background: var(--color-near-black);\n    padding: 32px;\n    border-radius: 8px;\n  }\n  .form-dark-area .form-label {\n    color: var(--color-dark-gray);\n  }\n  .form-dark-area .form-input {\n    background: var(--color-near-black);\n    border: 1px solid rgb(97, 104, 117);\n    color: var(--color-near-white);\n  }\n  .form-dark-area .form-input:focus {\n    border-color: var(--color-action-blue);\n    box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.3);\n  }\n  .form-dark-area .form-helper {\n    color: var(--color-dark-gray);\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    flex-wrap: wrap;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--color-link-blue);\n    border-radius: 3px;\n    opacity: 0.7;\n  }\n  .spacing-label {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 24px;\n    flex-wrap: wrap;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-section);\n    border: 2px solid var(--color-dark-charcoal);\n  }\n  .radius-label {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n  }\n  .radius-name {\n    font-family: var(--font-system);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 32px;\n  }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 32px;\n    text-align: center;\n  }\n  .elevation-card .elev-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .elevation-card .elev-desc {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n  }\n  .elevation-card .elev-code {\n    font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 11px;\n    color: var(--text-muted);\n    background: var(--bg-section);\n    padding: 6px 10px;\n    border-radius: 4px;\n    display: inline-block;\n    word-break: break-all;\n    text-align: left;\n    max-width: 100%;\n  }\n\n  \u002F* Footer *\u002F\n  .footer {\n    text-align: center;\n    padding: 48px 40px;\n    border-top: 1px solid var(--border-color);\n    color: var(--text-muted);\n    font-size: 13px;\n  }\n  .footer a {\n    color: var(--color-link-blue);\n    text-decoration: none;\n  }\n  .footer a:hover { text-decoration: underline; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">awesome-design-md\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started →\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-label\">Design System Preview\u003C\u002Fdiv>\n  \u003Ch1>Design System Inspired by HashiCorp\u003C\u002Fh1>\n  \u003Cp>Enterprise infrastructure typography, product color systems, and whisper-level shadows — all distilled into a single-page design reference.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Get Started →\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Section 1\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">A multi-product color system using CSS custom properties. The parent brand is black-and-white with blue accents; each child product injects its own chromatic identity.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Brand Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary brand, text on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#15181e\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#15181e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark mode backgrounds, hero\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#0d0e12\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#0d0e12\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Deepest dark surface, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutral Scale\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#f1f2f3\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#f1f2f3\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Light backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#d5d7db\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#d5d7db\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Borders, dark button text\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#b2b6bd\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b2b6bd\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Border accents (0.1-0.4 opacity)\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#656a76\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#656a76\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Helper text, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#3b3d45\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b3d45\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#efeff1\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#efeff1\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary text on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Product Brand Colors\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#7b42bc\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Terraform Purple\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#7b42bc\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Terraform brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#ffcf25\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Vault Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#ffcf25\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Vault brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#14c6cb\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Waypoint Teal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#14c6cb\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Waypoint brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#1868f2\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Vagrant Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1868f2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Vagrant brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#911ced\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Purple Accent\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#911ced\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Accent purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#a737ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Visited Purple\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#a737ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Visited links\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic Colors\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#1060ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Action Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1060ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary action on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#2264d6\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#2264d6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary links on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#2b89ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Bright Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#2b89ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Active links, hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#bb5a00\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#bb5a00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Warning states\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#fbeabf\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber Light\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#fbeabf\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Warning backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#731e25\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#731e25\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Error states\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#a9722e\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#a9722e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Unified core orange\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#101a59\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Navy\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#101a59\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Unified core blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY SCALE -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 2\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Brand headings use DM Sans (standing in for HashiCorp Sans) with tight line-heights and kern enabled. Body text uses the system-ui stack for maximum readability.\u003C\u002Fp>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Display Hero\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">82px \u002F 600 \u002F 1.17\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:82px;font-weight:600;line-height:1.17;font-feature-settings:'kern' 1;\">Infrastructure\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Section Heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">52px \u002F 600 \u002F 1.19\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:52px;font-weight:600;line-height:1.19;font-feature-settings:'kern' 1;\">Cloud at Scale\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Feature Heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">42px \u002F 700 \u002F 1.19 \u002F -0.42px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:42px;font-weight:700;line-height:1.19;letter-spacing:-0.42px;font-feature-settings:'kern' 1;\">Automate Everything\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Sub-heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">34px \u002F 600 \u002F 1.18\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:34px;font-weight:600;line-height:1.18;font-feature-settings:'kern' 1;\">Provision and Manage\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Card Title\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">26px \u002F 700 \u002F 1.19\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:26px;font-weight:700;line-height:1.19;font-feature-settings:'kern' 1;\">Multi-Cloud Platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Small Title\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">19px \u002F 700 \u002F 1.21\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:19px;font-weight:700;line-height:1.21;font-feature-settings:'kern' 1;\">Zero Trust Security\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body Emphasis\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">17px \u002F 600 \u002F 1.35\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:17px;font-weight:600;line-height:1.35;font-feature-settings:'kern' 1;\">HashiCorp provides infrastructure automation to provision, secure, connect, and run any infrastructure for any application.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body Large\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">20px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:20px;font-weight:400;line-height:1.50;\">Automate your multi-cloud infrastructure provisioning workflows with declarative configuration files.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">16px \u002F 400 \u002F 1.63\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:16px;font-weight:400;line-height:1.63;\">Infrastructure as code lets you manage your infrastructure across multiple providers with one consistent workflow. Define infrastructure as code to increase operator productivity and transparency.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Nav Link\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">15px \u002F 500 \u002F 1.60\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:15px;font-weight:500;line-height:1.60;\">Products   Solutions   Partners   Resources   Pricing\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Small Body\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">14px \u002F 400 \u002F 1.71\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:14px;font-weight:400;line-height:1.71;\">Learn how to deploy applications across cloud providers with a standardized workflow.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Caption\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">13px \u002F 400 \u002F 1.69\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:13px;font-weight:400;line-height:1.69;\">Updated 2 days ago · 5 min read · Infrastructure Automation\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Uppercase Label\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">13px \u002F 600 \u002F 1.69 \u002F 1.3px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;line-height:1.69;letter-spacing:1.3px;text-transform:uppercase;\">Infrastructure Lifecycle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTON VARIANTS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Section 3\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Asymmetric padding (9px 9px 9px 15px) on primary buttons is intentional. Product-colored buttons follow the same structural pattern but inject their brand color.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-group-title\">Core Buttons\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-dark\">Primary Dark →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-white\">Secondary White\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"button-group-title\">Product-Colored Buttons\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-terraform\">Terraform →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-vault\">Vault →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-waypoint\">Waypoint →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-vagrant\">Vagrant →\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"button-group-title\">Badges \u002F Pills\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cspan class=\"btn btn-badge\">New Feature\u003C\u002Fspan>\n      \u003Cspan class=\"btn btn-badge\">Beta\u003C\u002Fspan>\n      \u003Cspan class=\"btn btn-badge\">HCP\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARD EXAMPLES -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 4\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">White background cards with 8px radius and dual-layer micro-shadow at 0.05 opacity. Product accent bars indicate chromatic ownership.\u003C\u002Fp>\n\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-terraform)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-terraform);margin-bottom:8px;\">Terraform\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Infrastructure as Code\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Define and provision data center infrastructure using a declarative configuration language. Manage multi-cloud deployments with a single workflow.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-vault)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-amber);margin-bottom:8px;\">Vault\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Secrets Management\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Centrally store, access, and deploy secrets across applications, systems, and infrastructure. Dynamic secrets, encryption, and identity-based access.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-waypoint)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-waypoint);margin-bottom:8px;\">Waypoint\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Application Delivery\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Build, deploy, and release applications across any platform with a consistent workflow. Simplify the developer experience for Kubernetes and beyond.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORM ELEMENTS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Section 5\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark mode inputs use #0d0e12 background with 5px radius. Focus rings are 3px solid with product-appropriate color. Light mode uses white backgrounds with subtle borders.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Ch3 class=\"button-group-title\" style=\"margin-top:0\">Light Mode Inputs\u003C\u002Fh3>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your email address\" \u002F>\n        \u003Cdiv class=\"form-helper\">We'll never share your email with anyone.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" value=\"terraform@hashicorp.com\" style=\"border-color:#2264d6;box-shadow:0 0 0 3px rgba(34,100,214,0.2);\" \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-email\" \u002F>\n        \u003Cdiv class=\"form-error-msg\">Please enter a valid email address.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your infrastructure needs...\">\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Ch3 class=\"button-group-title\" style=\"margin-top:0\">Dark Mode Inputs\u003C\u002Fh3>\n      \u003Cdiv class=\"form-dark-area\">\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n          \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your email address\" \u002F>\n          \u003Cdiv class=\"form-helper\">We'll never share your email with anyone.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n          \u003Cinput type=\"text\" class=\"form-input\" value=\"vault@hashicorp.com\" style=\"border-color:#1060ff;box-shadow:0 0 0 3px rgba(16,96,255,0.3);\" \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n          \u003Cinput type=\"text\" class=\"form-input\" value=\"invalid-input\" style=\"border-color:#731e25;\" \u002F>\n          \u003Cdiv class=\"form-error-msg\" style=\"color:#ff6b6b;\">This field is required.\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n          \u003Ctextarea class=\"form-input\" placeholder=\"Describe your infrastructure needs...\">\u003C\u002Ftextarea>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING SCALE -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 6\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Base unit of 8px. The scale provides granular control for component spacing while maintaining rhythm across the layout.\u003C\u002Fp>\n\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:2px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:3px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">3px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:4px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:6px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:8px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:20px;height:12px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:24px;height:16px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:28px;height:20px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:32px;height:24px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:40px;height:32px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:48px;height:40px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:56px;height:48px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS SCALE -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Section 7\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Nothing pill-shaped or circular. Tight, minimal radii from 2px to 8px communicate structural precision. The system is deliberately restrained.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Minimal\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:3px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">3px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Subtle\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Standard\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:5px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">5px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Comfortable\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Card\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 8\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Arguably the subtlest shadow system in modern web design. Dual-layer shadows at 5% opacity signal interactivity without visual noise. If you can see the shadow, it is too strong.\u003C\u002Fp>\n\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;border:1px solid var(--border-color);\">\n        \u003Cdiv class=\"elev-title\">Level 0 — Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Default surfaces, text blocks. No shadow applied.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">box-shadow: none\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(97,104,117,0.05) 0px 1px 1px, rgba(97,104,117,0.05) 0px 2px 2px;border:1px solid var(--border-color);\">\n        \u003Cdiv class=\"elev-title\">Level 1 — Whisper\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Cards, buttons, interactive surfaces. Barely visible micro-shadow.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">rgba(97,104,117,0.05) 0px 1px 1px, rgba(97,104,117,0.05) 0px 2px 2px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;border:1px solid var(--border-color);outline:3px solid #2264d6;outline-offset:1px;\">\n        \u003Cdiv class=\"elev-title\">Level 2 — Focus\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Focus rings for keyboard navigation. 3px solid, color-matched to context.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">outline: 3px solid var(--focus-color)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system tokens extracted from the public \u003Ca href=\"https:\u002F\u002Fhashicorp.com\" target=\"_blank\">hashicorp.com\u003C\u002Fa> website. This is not the official HashiCorp design system.\u003Cbr>Built for \u003Cstrong>awesome-design-md\u003C\u002Fstrong> — a curated collection of design system references.\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: HashiCorp (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand Primary *\u002F\n    --color-black: #000000;\n    --color-dark-charcoal: #15181e;\n    --color-near-black: #0d0e12;\n\n    \u002F* Neutral Scale *\u002F\n    --color-light-gray: #f1f2f3;\n    --color-mid-gray: #d5d7db;\n    --color-cool-gray: #b2b6bd;\n    --color-dark-gray: #656a76;\n    --color-charcoal: #3b3d45;\n    --color-near-white: #efeff1;\n\n    \u002F* Product Brand Colors *\u002F\n    --color-terraform: #7b42bc;\n    --color-vault: #ffcf25;\n    --color-waypoint: #14c6cb;\n    --color-waypoint-hover: #12b6bb;\n    --color-vagrant: #1868f2;\n    --color-purple-accent: #911ced;\n    --color-visited-purple: #a737ff;\n\n    \u002F* Semantic Colors *\u002F\n    --color-action-blue: #1060ff;\n    --color-link-blue: #2264d6;\n    --color-bright-blue: #2b89ff;\n    --color-amber: #bb5a00;\n    --color-amber-light: #fbeabf;\n    --color-red: #731e25;\n    --color-navy: #101a59;\n    --color-orange: #a9722e;\n\n    \u002F* Shadows *\u002F\n    --shadow-whisper: rgba(0, 0, 0, 0.15) 0px 1px 1px, rgba(0, 0, 0, 0.15) 0px 2px 2px;\n\n    \u002F* Fonts *\u002F\n    --font-brand: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n\n    \u002F* Dark mode *\u002F\n    --bg-page: #0d0e12;\n    --bg-card: #15181e;\n    --bg-section: #111318;\n    --bg-nav: rgba(13, 14, 18, 0.92);\n    --text-primary: #efeff1;\n    --text-secondary: #d5d7db;\n    --text-muted: #656a76;\n    --border-color: rgba(178, 182, 189, 0.15);\n    --border-subtle: rgba(178, 182, 189, 0.08);\n    --section-label-color: #656a76;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-system);\n    font-size: 16px;\n    line-height: 1.63;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--color-action-blue);\n    color: #ffffff;\n    padding: 6px 14px;\n    border-radius: 5px;\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-brand);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--text-primary);\n  }\n  .nav-brand .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-near-white);\n    border-radius: 5px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--color-near-black);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.60;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-bright-blue); }\n  .nav-cta {\n    background: var(--color-near-white);\n    color: var(--color-near-black);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.3);\n    border-radius: 5px;\n    font-size: 14px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-whisper);\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    background: var(--color-dark-charcoal);\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 900px;\n    height: 900px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(123, 66, 188, 0.15) 0%, rgba(20, 198, 203, 0.10) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero-label {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    line-height: 1.69;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--color-dark-gray);\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 {\n    font-family: var(--font-brand);\n    font-size: 82px;\n    font-weight: 600;\n    line-height: 1.17;\n    letter-spacing: normal;\n    font-feature-settings: \"kern\" 1;\n    color: #ffffff;\n    max-width: 900px;\n    margin: 0 auto 24px;\n    position: relative;\n  }\n  .hero p {\n    font-family: var(--font-system);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--color-mid-gray);\n    max-width: 600px;\n    margin: 0 auto 40px;\n    position: relative;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    position: relative;\n  }\n  .hero-buttons .btn-primary {\n    background: rgba(239, 239, 241, 0.1);\n    color: var(--color-near-white);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 5px;\n    font-size: 16px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-whisper);\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .hero-buttons .btn-secondary {\n    background: transparent;\n    color: var(--color-near-white);\n    padding: 8px 12px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-system);\n    font-weight: 500;\n    cursor: pointer;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  \u002F* SECTION SYSTEM *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1150px;\n    margin: 0 auto;\n  }\n  .section:nth-child(even of .section) {\n    background: var(--bg-section);\n    max-width: 100%;\n    padding-left: 40px;\n    padding-right: 40px;\n  }\n  .section:nth-child(even of .section) .section-inner {\n    max-width: 1150px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    line-height: 1.69;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-title {\n    font-family: var(--font-brand);\n    font-size: 42px;\n    font-weight: 700;\n    line-height: 1.19;\n    letter-spacing: -0.42px;\n    font-feature-settings: \"kern\" 1;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .section-desc {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.63;\n    color: var(--text-secondary);\n    margin-bottom: 48px;\n    max-width: 640px;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    line-height: 1.21;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    box-shadow: var(--shadow-whisper);\n  }\n  .color-swatch .swatch-block {\n    height: 72px;\n    width: 100%;\n  }\n  .color-swatch .swatch-info {\n    padding: 10px 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch .swatch-name {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n  .color-swatch .swatch-role {\n    font-family: var(--font-system);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-row {\n    display: flex;\n    align-items: baseline;\n    gap: 32px;\n    padding: 20px 0;\n    border-bottom: 1px solid var(--border-color);\n  }\n  .type-row:last-child { border-bottom: none; }\n  .type-meta {\n    flex-shrink: 0;\n    width: 200px;\n    text-align: right;\n  }\n  .type-meta .meta-role {\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--section-label-color);\n  }\n  .type-meta .meta-spec {\n    font-family: var(--font-system);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 4px;\n  }\n  .type-sample {\n    flex: 1;\n    min-width: 0;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 32px;\n  }\n  .button-group-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    line-height: 1.21;\n    color: var(--text-primary);\n    margin-bottom: 12px;\n    margin-top: 24px;\n  }\n  .button-group-title:first-child { margin-top: 0; }\n  .btn {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n  }\n  .btn-dark {\n    background: rgba(239, 239, 241, 0.08);\n    color: var(--color-mid-gray);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 5px;\n    box-shadow: var(--shadow-whisper);\n  }\n  .btn-white {\n    background: transparent;\n    color: var(--color-near-white);\n    padding: 8px 12px;\n    border: 1px solid rgba(178, 182, 189, 0.4);\n    border-radius: 4px;\n  }\n  .btn-terraform {\n    background: var(--color-terraform);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-terraform);\n    border-radius: 5px;\n  }\n  .btn-vault {\n    background: var(--color-vault);\n    color: var(--color-dark-charcoal);\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-vault);\n    border-radius: 5px;\n  }\n  .btn-waypoint {\n    background: var(--color-waypoint);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-waypoint);\n    border-radius: 5px;\n  }\n  .btn-vagrant {\n    background: var(--color-vagrant);\n    color: #ffffff;\n    padding: 9px 9px 9px 15px;\n    border: 1px solid var(--color-vagrant);\n    border-radius: 5px;\n  }\n  .btn-badge {\n    background: #42225b;\n    color: var(--color-near-white);\n    padding: 3px 7px;\n    border: 1px solid rgb(180, 87, 255);\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  \u002F* Button showcase strip *\u002F\n  .btn-showcase-dark {\n    background: rgba(255, 255, 255, 0.03);\n    padding: 32px;\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n    margin-bottom: 24px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: var(--shadow-whisper);\n    transition: box-shadow 0.2s;\n  }\n  .card:hover {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 4px 8px;\n  }\n  .card-color-bar {\n    height: 4px;\n    width: 100%;\n  }\n  .card-body {\n    padding: 24px;\n  }\n  .card-title {\n    font-family: var(--font-brand);\n    font-size: 26px;\n    font-weight: 700;\n    line-height: 1.19;\n    font-feature-settings: \"kern\" 1;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .card-desc {\n    font-family: var(--font-system);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.63;\n    color: var(--text-secondary);\n    margin-bottom: 16px;\n  }\n  .card-link {\n    font-family: var(--font-system);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--color-bright-blue);\n    text-decoration: none;\n  }\n  .card-link:hover { text-decoration: underline; }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 32px;\n  }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    display: block;\n    font-family: var(--font-brand);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 1.3px;\n    text-transform: uppercase;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n  }\n  .form-input {\n    width: 100%;\n    background: var(--color-near-black);\n    border: 1px solid rgb(97, 104, 117);\n    border-radius: 5px;\n    padding: 11px;\n    font-family: var(--font-system);\n    font-size: 16px;\n    color: var(--color-near-white);\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input::placeholder {\n    color: var(--color-dark-gray);\n  }\n  .form-input:focus {\n    border-color: var(--color-action-blue);\n    box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.3);\n  }\n  .form-input-error {\n    border-color: var(--color-red);\n  }\n  .form-error-msg {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: #ff6b6b;\n    margin-top: 6px;\n  }\n  .form-helper {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: var(--text-muted);\n    margin-top: 6px;\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* Both dark form areas on dark *\u002F\n  .form-dark-area {\n    background: rgba(255, 255, 255, 0.02);\n    padding: 32px;\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n  }\n  .form-light-area {\n    background: rgba(255, 255, 255, 0.04);\n    padding: 32px;\n    border-radius: 8px;\n    border: 1px solid var(--border-color);\n  }\n  .form-light-area .form-input {\n    background: rgba(255, 255, 255, 0.06);\n    border: 1px solid rgba(178, 182, 189, 0.3);\n    color: var(--color-near-white);\n  }\n  .form-light-area .form-input:focus {\n    border-color: var(--color-action-blue);\n    box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.3);\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    flex-wrap: wrap;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--color-action-blue);\n    border-radius: 3px;\n    opacity: 0.6;\n  }\n  .spacing-label {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 24px;\n    flex-wrap: wrap;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: rgba(255, 255, 255, 0.05);\n    border: 2px solid var(--color-near-white);\n  }\n  .radius-label {\n    font-family: var(--font-system);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n  }\n  .radius-name {\n    font-family: var(--font-system);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 32px;\n  }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 32px;\n    text-align: center;\n  }\n  .elevation-card .elev-title {\n    font-family: var(--font-brand);\n    font-size: 19px;\n    font-weight: 700;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .elevation-card .elev-desc {\n    font-family: var(--font-system);\n    font-size: 13px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n  }\n  .elevation-card .elev-code {\n    font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 11px;\n    color: var(--text-muted);\n    background: rgba(255, 255, 255, 0.04);\n    padding: 6px 10px;\n    border-radius: 4px;\n    display: inline-block;\n    word-break: break-all;\n    text-align: left;\n    max-width: 100%;\n  }\n\n  \u002F* Footer *\u002F\n  .footer {\n    text-align: center;\n    padding: 48px 40px;\n    border-top: 1px solid var(--border-color);\n    color: var(--text-muted);\n    font-size: 13px;\n  }\n  .footer a {\n    color: var(--color-bright-blue);\n    text-decoration: none;\n  }\n  .footer a:hover { text-decoration: underline; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    awesome-design-md\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started →\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-label\">Design System Preview\u003C\u002Fdiv>\n  \u003Ch1>Design System Inspired by HashiCorp\u003C\u002Fh1>\n  \u003Cp>Enterprise infrastructure typography, product color systems, and whisper-level shadows — all distilled into a single-page design reference.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Get Started →\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Section 1\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">A multi-product color system using CSS custom properties. The parent brand is black-and-white with blue accents; each child product injects its own chromatic identity.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Brand Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary brand, text on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#15181e\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#15181e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark mode backgrounds, hero\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#0d0e12\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#0d0e12\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Deepest dark surface, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutral Scale\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#f1f2f3\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#f1f2f3\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Light backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#d5d7db\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#d5d7db\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Borders, dark button text\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#b2b6bd\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b2b6bd\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Border accents (0.1-0.4 opacity)\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#656a76\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#656a76\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Helper text, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#3b3d45\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b3d45\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#efeff1\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#efeff1\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary text on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Product Brand Colors\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#7b42bc\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Terraform Purple\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#7b42bc\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Terraform brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#ffcf25\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Vault Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#ffcf25\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Vault brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#14c6cb\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Waypoint Teal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#14c6cb\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Waypoint brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#1868f2\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Vagrant Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1868f2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Vagrant brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#911ced\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Purple Accent\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#911ced\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Accent purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#a737ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Visited Purple\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#a737ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Visited links\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic Colors\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#1060ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Action Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1060ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary action on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#2264d6\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#2264d6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary links on light\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#2b89ff\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Bright Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#2b89ff\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Active links, hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#bb5a00\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#bb5a00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Warning states\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#fbeabf\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber Light\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#fbeabf\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Warning backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#731e25\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#731e25\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Error states\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#a9722e\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#a9722e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Unified core orange\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-block\" style=\"background:#101a59\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Navy\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#101a59\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Unified core blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY SCALE -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 2\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Brand headings use DM Sans (standing in for HashiCorp Sans) with tight line-heights and kern enabled. Body text uses the system-ui stack for maximum readability.\u003C\u002Fp>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Display Hero\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">82px \u002F 600 \u002F 1.17\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:82px;font-weight:600;line-height:1.17;font-feature-settings:'kern' 1;\">Infrastructure\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Section Heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">52px \u002F 600 \u002F 1.19\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:52px;font-weight:600;line-height:1.19;font-feature-settings:'kern' 1;\">Cloud at Scale\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Feature Heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">42px \u002F 700 \u002F 1.19 \u002F -0.42px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:42px;font-weight:700;line-height:1.19;letter-spacing:-0.42px;font-feature-settings:'kern' 1;\">Automate Everything\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Sub-heading\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">34px \u002F 600 \u002F 1.18\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:34px;font-weight:600;line-height:1.18;font-feature-settings:'kern' 1;\">Provision and Manage\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Card Title\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">26px \u002F 700 \u002F 1.19\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:26px;font-weight:700;line-height:1.19;font-feature-settings:'kern' 1;\">Multi-Cloud Platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Small Title\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">19px \u002F 700 \u002F 1.21\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:19px;font-weight:700;line-height:1.21;font-feature-settings:'kern' 1;\">Zero Trust Security\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body Emphasis\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">17px \u002F 600 \u002F 1.35\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:17px;font-weight:600;line-height:1.35;font-feature-settings:'kern' 1;\">HashiCorp provides infrastructure automation to provision, secure, connect, and run any infrastructure for any application.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body Large\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">20px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:20px;font-weight:400;line-height:1.50;\">Automate your multi-cloud infrastructure provisioning workflows with declarative configuration files.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Body\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">16px \u002F 400 \u002F 1.63\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:16px;font-weight:400;line-height:1.63;\">Infrastructure as code lets you manage your infrastructure across multiple providers with one consistent workflow. Define infrastructure as code to increase operator productivity and transparency.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Nav Link\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">15px \u002F 500 \u002F 1.60\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:15px;font-weight:500;line-height:1.60;\">Products   Solutions   Partners   Resources   Pricing\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Small Body\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">14px \u002F 400 \u002F 1.71\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:14px;font-weight:400;line-height:1.71;\">Learn how to deploy applications across cloud providers with a standardized workflow.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Caption\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">13px \u002F 400 \u002F 1.69\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-system);font-size:13px;font-weight:400;line-height:1.69;\">Updated 2 days ago · 5 min read · Infrastructure Automation\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cdiv class=\"meta-role\">Uppercase Label\u003C\u002Fdiv>\n        \u003Cdiv class=\"meta-spec\">13px \u002F 600 \u002F 1.69 \u002F 1.3px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;line-height:1.69;letter-spacing:1.3px;text-transform:uppercase;\">Infrastructure Lifecycle\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTON VARIANTS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Section 3\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Asymmetric padding (9px 9px 9px 15px) on primary buttons is intentional. Product-colored buttons follow the same structural pattern but inject their brand color.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-group-title\">Core Buttons\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-dark\">Primary Dark →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-white\">Secondary White\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"button-group-title\">Product-Colored Buttons\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-terraform\">Terraform →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-vault\">Vault →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-waypoint\">Waypoint →\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-vagrant\">Vagrant →\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"button-group-title\">Badges \u002F Pills\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn-showcase-dark\">\n    \u003Cdiv class=\"button-grid\">\n      \u003Cspan class=\"btn btn-badge\">New Feature\u003C\u002Fspan>\n      \u003Cspan class=\"btn btn-badge\">Beta\u003C\u002Fspan>\n      \u003Cspan class=\"btn btn-badge\">HCP\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARD EXAMPLES -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 4\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Dark surface cards with 8px radius and subtle border separation. Product accent bars indicate chromatic ownership.\u003C\u002Fp>\n\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-terraform)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-terraform);margin-bottom:8px;\">Terraform\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Infrastructure as Code\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Define and provision data center infrastructure using a declarative configuration language. Manage multi-cloud deployments with a single workflow.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-vault)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-vault);margin-bottom:8px;\">Vault\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Secrets Management\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Centrally store, access, and deploy secrets across applications, systems, and infrastructure. Dynamic secrets, encryption, and identity-based access.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-color-bar\" style=\"background:var(--color-waypoint)\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">\n          \u003Cdiv style=\"font-family:var(--font-brand);font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-waypoint);margin-bottom:8px;\">Waypoint\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Application Delivery\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-desc\">Build, deploy, and release applications across any platform with a consistent workflow. Simplify the developer experience for Kubernetes and beyond.\u003C\u002Fdiv>\n          \u003Ca class=\"card-link\" href=\"#\">Learn more →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORM ELEMENTS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Section 5\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark mode inputs use #0d0e12 background with 5px radius. Focus rings are 3px solid with product-appropriate color.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Ch3 class=\"button-group-title\" style=\"margin-top:0\">Default Inputs\u003C\u002Fh3>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your email address\" \u002F>\n        \u003Cdiv class=\"form-helper\">We'll never share your email with anyone.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" value=\"terraform@hashicorp.com\" style=\"border-color:#1060ff;box-shadow:0 0 0 3px rgba(16,96,255,0.3);\" \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-email\" \u002F>\n        \u003Cdiv class=\"form-error-msg\">Please enter a valid email address.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Ch3 class=\"button-group-title\" style=\"margin-top:0\">Textarea\u003C\u002Fh3>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your infrastructure needs...\">\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">With Content\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" style=\"border-color:#1060ff;box-shadow:0 0 0 3px rgba(16,96,255,0.3);\">We need to provision 50+ microservices across three cloud providers with centralized secrets management.\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING SCALE -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 6\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Base unit of 8px. The scale provides granular control for component spacing while maintaining rhythm across the layout.\u003C\u002Fp>\n\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:2px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:3px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">3px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:4px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:6px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:8px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:20px;height:12px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:24px;height:16px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:28px;height:20px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:32px;height:24px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:40px;height:32px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:48px;height:40px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-item\">\n        \u003Cdiv class=\"spacing-box\" style=\"width:56px;height:48px;\">\u003C\u002Fdiv>\n        \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS SCALE -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Section 7\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Nothing pill-shaped or circular. Tight, minimal radii from 2px to 8px communicate structural precision. The system is deliberately restrained.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Minimal\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:3px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">3px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Subtle\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Standard\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:5px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">5px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Comfortable\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-name\">Card\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-inner\">\n    \u003Cdiv class=\"section-label\">Section 8\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Arguably the subtlest shadow system in modern web design. On dark surfaces, shadows shift to higher-opacity blacks to maintain the whisper effect against dark backgrounds.\u003C\u002Fp>\n\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;border:1px solid var(--border-color);\">\n        \u003Cdiv class=\"elev-title\">Level 0 — Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Default surfaces, text blocks. No shadow applied.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">box-shadow: none\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.15) 0px 1px 1px, rgba(0,0,0,0.15) 0px 2px 2px;border:1px solid var(--border-color);\">\n        \u003Cdiv class=\"elev-title\">Level 1 — Whisper\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Cards, buttons, interactive surfaces. Barely visible micro-shadow.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">rgba(0,0,0,0.15) 0px 1px 1px, rgba(0,0,0,0.15) 0px 2px 2px\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;border:1px solid var(--border-color);outline:3px solid #1060ff;outline-offset:1px;\">\n        \u003Cdiv class=\"elev-title\">Level 2 — Focus\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-desc\">Focus rings for keyboard navigation. 3px solid, color-matched to context.\u003C\u002Fdiv>\n        \u003Cdiv class=\"elev-code\">outline: 3px solid var(--focus-color)\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system tokens extracted from the public \u003Ca href=\"https:\u002F\u002Fhashicorp.com\" target=\"_blank\">hashicorp.com\u003C\u002Fa> website. This is not the official HashiCorp design system.\u003Cbr>Built for \u003Cstrong>awesome-design-md\u003C\u002Fstrong> — a curated collection of design system references.\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# HashiCorp Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fhashicorp\u002FDESIGN.md) extracted from the public [HashiCorp](https:\u002F\u002Fhashicorp.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fhashicorp\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the HashiCorp design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![HashiCorp Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fhashicorp\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![HashiCorp Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fhashicorp\u002Fpreview-screenshot.png)\n",{"slug":138,"name":139,"category":7,"designMd":140,"previewHtml":141,"previewDarkHtml":142,"readme":143},"ibm","Ibm","# Design System Inspiration of IBM\n\n## 1. Visual Theme & Atmosphere\n\nIBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (`#ffffff`) canvas with near-black (`#161616`) text, punctuated by a single, unwavering accent — IBM Blue 60 (`#0f62fe`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.\n\nThe IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.\n\nWhat defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with `--cds-` (Carbon Design System). Buttons don't have hardcoded colors; they reference `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.\n\n**Key Characteristics:**\n- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint\n- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes\n- Single accent color: IBM Blue 60 (`#0f62fe`) — every interactive element, every CTA, every link\n- Carbon token system (`--cds-*`) driving all semantic colors, enabling theme-switching at the variable level\n- 8px spacing grid with strict adherence — no arbitrary values, everything aligns\n- Flat, borderless cards on `#f4f4f4` Gray 10 surface — depth through background-color layering, not shadows\n- Bottom-border inputs (not boxed) — the signature Carbon form pattern\n- 0px border-radius on primary buttons — unapologetically rectangular, no softening\n\n## 2. Color Palette & Roles\n\n### Primary\n- **IBM Blue 60** (`#0f62fe`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.\n- **White** (`#ffffff`): Page background, card surfaces, button text on blue, `--cds-background`.\n- **Gray 100** (`#161616`): Primary text, headings, dark surface backgrounds, nav bar, footer. `--cds-text-primary`.\n\n### Neutral Scale (Gray Family)\n- **Gray 100** (`#161616`): Primary text, headings, dark UI chrome, footer background.\n- **Gray 90** (`#262626`): Secondary dark surfaces, hover states on dark backgrounds.\n- **Gray 80** (`#393939`): Tertiary dark, active states.\n- **Gray 70** (`#525252`): Secondary text, helper text, descriptions. `--cds-text-secondary`.\n- **Gray 60** (`#6f6f6f`): Placeholder text, disabled text.\n- **Gray 50** (`#8d8d8d`): Disabled icons, muted labels.\n- **Gray 30** (`#c6c6c6`): Borders, divider lines, input bottom-borders. `--cds-border-subtle`.\n- **Gray 20** (`#e0e0e0`): Subtle borders, card outlines.\n- **Gray 10** (`#f4f4f4`): Secondary surface background, card fills, alternating rows. `--cds-layer-01`.\n- **Gray 10 Hover** (`#e8e8e8`): Hover state for Gray 10 surfaces.\n\n### Interactive\n- **Blue 60** (`#0f62fe`): Primary interactive — buttons, links, focus. `--cds-link-primary`, `--cds-button-primary`.\n- **Blue 70** (`#0043ce`): Link hover state. `--cds-link-primary-hover`.\n- **Blue 80** (`#002d9c`): Active\u002Fpressed state for blue elements.\n- **Blue 10** (`#edf5ff`): Blue tint surface, selected row background.\n- **Focus Blue** (`#0f62fe`): `--cds-focus` — 2px inset border on focused elements.\n- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — white inner ring for focus on dark backgrounds.\n\n### Support & Status\n- **Red 60** (`#da1e28`): Error, danger. `--cds-support-error`.\n- **Green 50** (`#24a148`): Success. `--cds-support-success`.\n- **Yellow 30** (`#f1c21b`): Warning. `--cds-support-warning`.\n- **Blue 60** (`#0f62fe`): Informational. `--cds-support-info`.\n\n### Dark Theme (Gray 100 Theme)\n- **Background**: Gray 100 (`#161616`). `--cds-background`.\n- **Layer 01**: Gray 90 (`#262626`). Card and container surfaces.\n- **Layer 02**: Gray 80 (`#393939`). Elevated surfaces.\n- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.\n- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.\n- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.\n- **Interactive**: Blue 40 (`#78a9ff`). Links and interactive elements shift lighter for contrast.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `IBM Plex Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`\n- **Monospace**: `IBM Plex Mono`, with fallbacks: `Menlo, Courier, monospace`\n- **Serif** (limited use): `IBM Plex Serif`, for editorial\u002Fexpressive contexts\n- **Icon Font**: `ibm_icons` — proprietary icon glyphs at 20px\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |\n| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |\n| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |\n| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |\n| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |\n| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |\n| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |\n| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |\n| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |\n| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |\n| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |\n| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |\n| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |\n| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |\n| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |\n\n### Principles\n- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.\n- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.\n- **Three functional weights**: 300 (display\u002Fexpressive), 400 (body\u002Freading), 600 (emphasis\u002FUI labels). Weight 700 is intentionally absent from the production type scale.\n- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Button (Blue)**\n- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`\n- Text: `#ffffff` (White)\n- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)\n- Border: 1px solid transparent\n- Border-radius: 0px (sharp rectangle — the Carbon signature)\n- Height: 48px (default), 40px (compact), 64px (expressive)\n- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`\n- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`\n- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner\n\n**Secondary Button (Gray)**\n- Background: `#393939` (Gray 80)\n- Text: `#ffffff`\n- Hover: `#4c4c4c` (Gray 70)\n- Active: `#6f6f6f` (Gray 60)\n- Same padding\u002Fradius as primary\n\n**Tertiary Button (Ghost Blue)**\n- Background: transparent\n- Text: `#0f62fe` (Blue 60)\n- Border: 1px solid `#0f62fe`\n- Hover: `#0353e9` text + Blue 10 background tint\n- Border-radius: 0px\n\n**Ghost Button**\n- Background: transparent\n- Text: `#0f62fe` (Blue 60)\n- Padding: 14px 16px\n- Border: none\n- Hover: `#e8e8e8` background tint\n\n**Danger Button**\n- Background: `#da1e28` (Red 60)\n- Text: `#ffffff`\n- Hover: `#b81921` (Red 70)\n\n### Cards & Containers\n- Background: `#ffffff` on white theme, `#f4f4f4` (Gray 10) for elevated cards\n- Border: none (flat design — no border or shadow on most cards)\n- Border-radius: 0px (matching the rectangular button aesthetic)\n- Hover: background shifts to `#e8e8e8` (Gray 10 Hover) for clickable cards\n- Content padding: 16px\n- Separation: background-color layering (white → gray 10 → white) rather than shadows\n\n### Inputs & Forms\n- Background: `#f4f4f4` (Gray 10) — `--cds-field`\n- Text: `#161616` (Gray 100)\n- Padding: 0px 16px (horizontal only)\n- Height: 40px (default), 48px (large)\n- Border: none on sides\u002Ftop — `2px solid transparent` bottom\n- Bottom-border active: `2px solid #161616` (Gray 100)\n- Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`\n- Error: `2px solid #da1e28` (Red 60) bottom-border\n- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70\n- Helper text: 12px, Gray 60\n- Placeholder: Gray 60 (`#6f6f6f`)\n- Border-radius: 0px (top) — inputs are sharp-cornered\n\n### Navigation\n- Background: `#161616` (Gray 100) — full-width dark masthead\n- Height: 48px\n- Logo: IBM 8-bar logo, white on dark, left-aligned\n- Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default\n- Link hover: `#ffffff` text\n- Active link: `#ffffff` with bottom-border indicator\n- Platform switcher: left-aligned horizontal tabs\n- Search: icon-triggered slide-out search field\n- Mobile: hamburger with left-sliding panel\n\n### Links\n- Default: `#0f62fe` (Blue 60) with no underline\n- Hover: `#0043ce` (Blue 70) with underline\n- Visited: remains Blue 60 (no visited state change)\n- Inline links: underlined by default in body copy\n\n### Distinctive Components\n\n**Content Block (Hero\u002FFeature)**\n- Full-width alternating white\u002Fgray-10 background bands\n- Headline left-aligned with 60px or 48px display type\n- CTA as blue primary button with arrow icon\n- Image\u002Fillustration right-aligned or below on mobile\n\n**Tile (Clickable Card)**\n- Background: `#f4f4f4` or `#ffffff`\n- Full-width bottom-border or background-shift hover\n- Arrow icon bottom-right on hover\n- No shadow — flatness is the identity\n\n**Tag \u002F Label**\n- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)\n- Text: corresponding 60-grade color\n- Padding: 4px 8px\n- Border-radius: 24px (pill — exception to the 0px rule)\n- Font: 12px weight 400\n\n**Notification Banner**\n- Full-width bar, typically Blue 60 or Gray 100 background\n- White text, 14px\n- Close\u002Fdismiss icon right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px (Carbon 2x grid)\n- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px\n- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px\n- Mini unit: 8px (smallest usable spacing)\n- Padding within components: typically 16px\n- Gap between cards\u002Ftiles: 1px (hairline) or 16px (standard)\n\n### Grid & Container\n- 16-column grid (Carbon's 2x grid system)\n- Max content width: 1584px (max breakpoint)\n- Column gutters: 32px (16px on mobile)\n- Margin: 16px (mobile), 32px (tablet+)\n- Content typically spans 8-12 columns for readable line lengths\n- Full-bleed sections alternate with contained content\n\n### Whitespace Philosophy\n- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.\n- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.\n- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.\n\n### Border Radius Scale\n- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.\n- **2px**: Occasionally on small interactive elements (tags)\n- **24px**: Tags\u002Flabels (pill shape — the sole rounded exception)\n- **50%**: Avatar circles, icon containers\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, `#ffffff` background | Default page surface |\n| Layer 01 | No shadow, `#f4f4f4` background | Cards, tiles, alternating sections |\n| Layer 02 | No shadow, `#e0e0e0` background | Elevated panels within Layer 01 |\n| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Dropdowns, tooltips, overflow menus |\n| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + dark scrim | Modal dialogs, side panels |\n| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Keyboard focus ring |\n| Bottom-border | `2px solid #161616` on bottom edge | Active input, active tab indicator |\n\n**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional\n- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions\n- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system\n- Reference `--cds-*` token names when implementing (e.g., `--cds-button-primary`, `--cds-text-primary`)\n- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows\n- Use bottom-border (not box) for input field indicators\n- Maintain the 48px default button height and asymmetric padding for icon accommodation\n- Apply Blue 60 (`#0f62fe`) as the sole accent — one blue to rule them all\n\n### Don't\n- Don't round button corners — 0px radius is the Carbon identity\n- Don't use shadows on cards or tiles — flatness is the point\n- Don't introduce additional accent colors — IBM's system is monochromatic + blue\n- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)\n- Don't add letter-spacing to display-size text — tracking is only for 14px and below\n- Don't box inputs with full borders — Carbon inputs use bottom-border only\n- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors\n- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small (sm) | 320px | Single column, hamburger nav, 16px margins |\n| Medium (md) | 672px | 2-column grids begin, expanded content |\n| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |\n| X-Large (xlg) | 1312px | Maximum content density, wide layouts |\n| Max | 1584px | Maximum content width, centered with margins |\n\n### Touch Targets\n- Button height: 48px default, minimum 40px (compact)\n- Navigation links: 48px row height for touch\n- Input height: 40px default, 48px large\n- Icon buttons: 48px square touch target\n- Mobile menu items: full-width 48px rows\n\n### Collapsing Strategy\n- Hero: 60px display → 42px → 32px heading as viewport narrows\n- Navigation: full horizontal masthead → hamburger with slide-out panel\n- Grid: 4-column → 2-column → single column\n- Tiles\u002Fcards: horizontal grid → vertical stack\n- Images: maintain aspect ratio, max-width 100%\n- Footer: multi-column link groups → stacked single column\n- Section padding: 48px → 32px → 16px\n\n### Image Behavior\n- Responsive images with `max-width: 100%`\n- Product illustrations scale proportionally\n- Hero images may shift from side-by-side to stacked below\n- Data visualizations maintain aspect ratio with horizontal scroll on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: IBM Blue 60 (`#0f62fe`)\n- Background: White (`#ffffff`)\n- Heading text: Gray 100 (`#161616`)\n- Body text: Gray 100 (`#161616`)\n- Secondary text: Gray 70 (`#525252`)\n- Surface\u002FCard: Gray 10 (`#f4f4f4`)\n- Border: Gray 30 (`#c6c6c6`)\n- Link: Blue 60 (`#0f62fe`)\n- Link hover: Blue 70 (`#0043ce`)\n- Focus ring: Blue 60 (`#0f62fe`)\n- Error: Red 60 (`#da1e28`)\n- Success: Green 50 (`#24a148`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding).\"\n- \"Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8.\"\n- \"Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f.\"\n- \"Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border.\"\n- \"Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400.\"\n\n### Iteration Guide\n1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon\n2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text\n3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold\n4. Blue 60 is the only accent color — do not introduce secondary accent hues\n5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows\n6. Inputs have bottom-border only, never fully boxed\n7. Use `--cds-` prefix for token naming to stay Carbon-compatible\n8. 48px is the universal interactive element height\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: IBM (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #ffffff;\n    --gray-10: #f4f4f4;\n    --gray-10-hover: #e8e8e8;\n    --gray-20: #e0e0e0;\n    --gray-30: #c6c6c6;\n    --gray-50: #8d8d8d;\n    --gray-60: #6f6f6f;\n    --gray-70: #525252;\n    --gray-80: #393939;\n    --gray-90: #262626;\n    --gray-100: #161616;\n    --blue-10: #edf5ff;\n    --blue-60: #0f62fe;\n    --blue-70: #0043ce;\n    --blue-80: #002d9c;\n    --red-60: #da1e28;\n    --green-50: #24a148;\n    --yellow-30: #f1c21b;\n    --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;\n    --font-mono: 'IBM Plex Mono', Menlo, Courier, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--gray-100);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 32px;\n    height: 48px;\n    background: var(--gray-100);\n    color: var(--white);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--gray-30); text-decoration: none; letter-spacing: 0.16px; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--white); }\n  .nav-cta {\n    display: inline-flex; align-items: center; background: var(--blue-60); color: var(--white);\n    padding: 0 16px; height: 32px; border-radius: 0; font-size: 14px; font-weight: 400;\n    text-decoration: none; letter-spacing: 0.16px; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: #0353e9; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 80px 32px 64px; background: var(--white); }\n  .hero-inner { max-width: 1200px; margin: 0 auto; }\n  .hero h1 {\n    font-size: 60px; font-weight: 300; line-height: 1.17;\n    color: var(--gray-100); margin-bottom: 16px; max-width: 800px;\n  }\n  .hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--gray-70); max-width: 640px; margin-bottom: 32px; }\n  .hero-buttons { display: flex; gap: 1px; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-flex; align-items: center; justify-content: space-between;\n    background: var(--blue-60); color: var(--white);\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-primary:hover { background: #0353e9; }\n  .btn-secondary {\n    display: inline-flex; align-items: center; justify-content: space-between;\n    background: var(--gray-80); color: var(--white);\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-secondary:hover { background: #4c4c4c; }\n  .btn-tertiary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--blue-60);\n    padding: 14px 16px; height: 48px;\n    border-radius: 0; border: 1px solid var(--blue-60);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-tertiary:hover { background: #0353e9; color: var(--white); border-color: #0353e9; }\n  .btn-ghost {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--blue-60);\n    padding: 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-ghost:hover { background: var(--gray-10-hover); }\n  .btn-danger {\n    display: inline-flex; align-items: center;\n    background: var(--red-60); color: var(--white);\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-danger:hover { background: #b81921; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 48px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-alt { background: var(--gray-10); }\n  .section-alt .section { max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-60); letter-spacing: 0.32px; margin-bottom: 8px; }\n  .section-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--gray-20); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--gray-20); }\n  .color-swatch { background: var(--white); overflow: hidden; }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-60); font-family: var(--font-mono); letter-spacing: 0.32px; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-50); margin-top: 3px; letter-spacing: 0.16px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-70); margin: 24px 0 10px; letter-spacing: 0.16px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--gray-20); }\n  .card { background: var(--gray-10); padding: 16px; transition: background 0.15s; cursor: pointer; }\n  .card:hover { background: var(--gray-10-hover); }\n  .card h3 { font-size: 20px; font-weight: 600; line-height: 1.40; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-70); line-height: 1.29; letter-spacing: 0.16px; }\n  .card-tag { display: inline-block; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: 24px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 24px; max-width: 400px; }\n  .form-label { display: block; font-size: 12px; font-weight: 400; color: var(--gray-70); margin-bottom: 8px; letter-spacing: 0.32px; }\n  .form-input {\n    width: 100%; background: var(--gray-10); color: var(--gray-100);\n    border: none; border-bottom: 2px solid transparent;\n    padding: 0 16px; height: 40px;\n    font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;\n    outline: none; border-radius: 0;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-bottom-color: var(--blue-60); }\n  .form-input--active { border-bottom-color: var(--gray-100); }\n  .form-input--focus { border-bottom-color: var(--blue-60); }\n  .form-input--error { border-bottom-color: var(--red-60); }\n  .form-helper { font-size: 12px; color: var(--gray-60); margin-top: 4px; letter-spacing: 0.32px; }\n  .form-helper--error { color: var(--red-60); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--gray-10); color: var(--gray-100);\n    border: none; border-bottom: 2px solid transparent;\n    padding: 11px 16px; border-radius: 0;\n    font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;\n    resize: vertical; outline: none;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--blue-60); margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--blue-60); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }\n  .radius-context { font-size: 10px; color: var(--gray-50); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { background: var(--white); padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-50); letter-spacing: 0.32px; }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: var(--gray-100); color: var(--gray-30); font-size: 12px; letter-spacing: 0.32px; }\n  .footer a { color: var(--blue-60); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 42px; }\n    .nav-links { display: none; }\n    .section { padding: 32px 16px; }\n    .card-grid { grid-template-columns: 1fr; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-inner\">\n    \u003Ch1>Design System Inspired by IBM\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value from the Carbon Design System — visualized.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-primary\" href=\"#\">Explore tokens\u003C\u002Fa>\n      \u003Ca class=\"btn-secondary\" href=\"#\">View documentation\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f62fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f62fe\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary interactive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e0e0e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#161616\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#161616\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, nav\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Blue Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#edf5ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#edf5ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tint surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f62fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f62fe\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary action\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0043ce\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 70\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0043ce\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Link hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#002d9c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 80\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#002d9c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active\u002Fpressed\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f4f4f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Layer 01 surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e0e0e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 20\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e0e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c6c6c6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c6c6c6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8d8d8d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8d8d8d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled icons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6f6f6f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6f6f6f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholder text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#525252\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 70\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#525252\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#393939\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 80\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#393939\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#262626\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 90\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#161616\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#161616\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Support & Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#da1e28\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#da1e28\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error \u002F Danger\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#24a148\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#24a148\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f1c21b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f1c21b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f62fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f62fe\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Informational\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:60px; font-weight:300; line-height:1.17;\">Display 01\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display 01 — 60px \u002F 300 \u002F 1.17 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.17;\">Display 02\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display 02 — 48px \u002F 300 \u002F 1.17 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:42px; font-weight:300; line-height:1.19;\">Heading 01\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 01 — 42px \u002F 300 \u002F 1.19 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.25;\">Heading 02\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 02 — 32px \u002F 400 \u002F 1.25 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.33;\">Heading 03\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 03 — 24px \u002F 400 \u002F 1.33 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40;\">Heading 04 — Semibold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 04 — 20px \u002F 600 \u002F 1.40 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Long 01 — Build smarter business workflows with AI and hybrid cloud solutions that scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Long 01 — 16px \u002F 400 \u002F 1.50 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.29; letter-spacing:0.16px;\">Body Short 01 — Compact text for UI elements and captions with micro-tracking.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Short 01 — 14px \u002F 400 \u002F 1.29 \u002F 0.16px \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.33; letter-spacing:0.32px;\">Caption 01 — Metadata, timestamps, helper text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption 01 — 12px \u002F 400 \u002F 1.33 \u002F 0.32px \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.16px;\">const config = { theme: 'g100', prefix: 'cds' };\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code 01 — 14px \u002F 400 \u002F 1.43 \u002F 0.16px \u002F IBM Plex Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:42px; font-weight:400; line-height:1.19;\">Mono Display\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Display — 42px \u002F 400 \u002F 1.19 \u002F IBM Plex Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom: 24px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Primary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary (Blue 60)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">Secondary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary (Gray 80)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-tertiary\" href=\"#\">Tertiary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Tertiary (Ghost Blue)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Ghost button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-danger\" href=\"#\">Delete resource\u003C\u002Fa>\u003Cdiv class=\"button-label\">Danger (Red 60)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--blue-10); color:var(--blue-60); font-size:12px; font-weight:400; padding:4px 8px; border-radius:24px;\">AI Ready\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Tag \u002F Label\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card & Tile Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:var(--blue-10); color:var(--blue-60);\">Hybrid Cloud\u003C\u002Fdiv>\n      \u003Ch3>IBM Cloud Pak\u003C\u002Fh3>\n      \u003Cp>Modernize and build cloud-native applications anywhere with an open, faster, and more secure foundation.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:#fff1f1; color:var(--red-60);\">AI Platform\u003C\u002Fdiv>\n      \u003Ch3>watsonx\u003C\u002Fh3>\n      \u003Cp>Scale and accelerate the impact of AI across your business with a next-generation enterprise studio.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:#defbe6; color:var(--green-50);\">Automation\u003C\u002Fdiv>\n      \u003Ch3>Business Automation\u003C\u002Fh3>\n      \u003Cp>Automate business and IT operations with AI-powered decision-making and intelligent workflows.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Project name\u003C\u002Flabel>\n    \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"e.g. my-cloud-project\">\n    \u003Cdiv class=\"form-helper\">Default state (bottom-border)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">API endpoint\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.ibm.com\u002Fv1\">\n    \u003Cdiv class=\"form-helper\">Focus state (Blue 60 bottom-border)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Region\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-region\">\n    \u003Cdiv class=\"form-helper form-helper--error\">Error: Region not found\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n    \u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workload...\">\u003C\u002Ftextarea>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--gray-60); letter-spacing:0.16px; line-height:1.29;\">Layout spacing: 16, 24, 32, 48, 64, 80, 96, 160px. Base unit: 8px (Carbon 2x grid).\u003C\u002Fp>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small elements\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags \u002F Labels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars, icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--white); border:1px solid var(--gray-20);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">White surface, no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--gray-10);\">\u003Cdiv class=\"elevation-label\">Layer 01\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Gray 10 (#f4f4f4)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--gray-20);\">\u003Cdiv class=\"elevation-label\">Layer 02\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Gray 20 (#e0e0e0)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 2px 6px rgba(0,0,0,0.3);\">\u003Cdiv class=\"elevation-label\">Raised\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dropdowns, tooltips\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 2px 6px rgba(0,0,0,0.3); border:2px solid var(--blue-60);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px inset Blue 60\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border-bottom: 2px solid var(--gray-100);\">\u003Cdiv class=\"elevation-label\">Bottom-border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Active input \u002F tab\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fibm.com\u002F\">ibm.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: IBM (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white: #161616;\n    --gray-10: #262626;\n    --gray-10-hover: #333333;\n    --gray-20: #393939;\n    --gray-30: #525252;\n    --gray-50: #8d8d8d;\n    --gray-60: #a8a8a8;\n    --gray-70: #c6c6c6;\n    --gray-80: #e0e0e0;\n    --gray-90: #f4f4f4;\n    --gray-100: #f4f4f4;\n    --text-primary: #f4f4f4;\n    --text-secondary: #c6c6c6;\n    --blue-10: #001d6c;\n    --blue-40: #78a9ff;\n    --blue-60: #0f62fe;\n    --blue-hover: #4589ff;\n    --blue-70: #0043ce;\n    --blue-80: #002d9c;\n    --red-40: #ff8389;\n    --red-60: #da1e28;\n    --green-40: #42be65;\n    --green-50: #24a148;\n    --yellow-30: #f1c21b;\n    --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;\n    --font-mono: 'IBM Plex Mono', Menlo, Courier, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--text-primary); color: var(--white);\n    font-size: 11px; font-weight: 600; padding: 4px 10px;\n    border-radius: 0;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0 32px;\n    height: 48px;\n    background: #262626;\n    border-bottom: 1px solid var(--gray-20);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--gray-60); text-decoration: none; letter-spacing: 0.16px; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    display: inline-flex; align-items: center; background: var(--blue-60); color: #ffffff;\n    padding: 0 16px; height: 32px; border-radius: 0; font-size: 14px; font-weight: 400;\n    text-decoration: none; letter-spacing: 0.16px; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: var(--blue-hover); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 80px 32px 64px; background: var(--white); }\n  .hero-inner { max-width: 1200px; margin: 0 auto; }\n  .hero h1 {\n    font-size: 60px; font-weight: 300; line-height: 1.17;\n    color: var(--text-primary); margin-bottom: 16px; max-width: 800px;\n  }\n  .hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 640px; margin-bottom: 32px; }\n  .hero-buttons { display: flex; gap: 1px; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-flex; align-items: center; justify-content: space-between;\n    background: var(--blue-60); color: #ffffff;\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-primary:hover { background: var(--blue-hover); }\n  .btn-secondary {\n    display: inline-flex; align-items: center; justify-content: space-between;\n    background: #6f6f6f; color: #ffffff;\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-secondary:hover { background: #8d8d8d; }\n  .btn-tertiary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--blue-40);\n    padding: 14px 16px; height: 48px;\n    border-radius: 0; border: 1px solid var(--blue-40);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-tertiary:hover { background: var(--blue-hover); color: #ffffff; border-color: var(--blue-hover); }\n  .btn-ghost {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--blue-40);\n    padding: 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-ghost:hover { background: var(--gray-10-hover); }\n  .btn-danger {\n    display: inline-flex; align-items: center;\n    background: var(--red-60); color: #ffffff;\n    padding: 14px 63px 14px 16px; height: 48px;\n    border-radius: 0; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 400;\n    letter-spacing: 0.16px;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-danger:hover { background: #b81921; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 48px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-alt { background: var(--gray-10); }\n  .section-alt .section { max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-60); letter-spacing: 0.32px; margin-bottom: 8px; }\n  .section-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin-bottom: 32px; color: var(--text-primary); }\n  .section-divider { border: none; border-top: 1px solid var(--gray-20); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--gray-20); }\n  .color-swatch { background: var(--white); overflow: hidden; }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-60); font-family: var(--font-mono); letter-spacing: 0.32px; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-50); margin-top: 3px; letter-spacing: 0.16px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 24px 0 10px; letter-spacing: 0.16px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 400; color: var(--gray-50); margin-top: 8px; letter-spacing: 0.32px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--gray-20); }\n  .card { background: var(--gray-10); padding: 16px; transition: background 0.15s; cursor: pointer; }\n  .card:hover { background: var(--gray-10-hover); }\n  .card h3 { font-size: 20px; font-weight: 600; line-height: 1.40; margin-bottom: 8px; color: var(--text-primary); }\n  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.29; letter-spacing: 0.16px; }\n  .card-tag { display: inline-block; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: 24px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 24px; max-width: 400px; }\n  .form-label { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: 0.32px; }\n  .form-input {\n    width: 100%; background: var(--gray-10); color: var(--text-primary);\n    border: none; border-bottom: 2px solid transparent;\n    padding: 0 16px; height: 40px;\n    font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;\n    outline: none; border-radius: 0;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-bottom-color: var(--blue-40); }\n  .form-input--active { border-bottom-color: var(--text-primary); }\n  .form-input--focus { border-bottom-color: var(--blue-40); }\n  .form-input--error { border-bottom-color: var(--red-40); }\n  .form-helper { font-size: 12px; color: var(--gray-60); margin-top: 4px; letter-spacing: 0.32px; }\n  .form-helper--error { color: var(--red-40); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--gray-10); color: var(--text-primary);\n    border: none; border-bottom: 2px solid transparent;\n    padding: 11px 16px; border-radius: 0;\n    font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.16px;\n    resize: vertical; outline: none;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--blue-40); margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--blue-60); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gray-50); letter-spacing: 0.32px; }\n  .radius-context { font-size: 10px; color: var(--gray-50); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-50); letter-spacing: 0.32px; }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: #000000; color: var(--gray-60); font-size: 12px; letter-spacing: 0.32px; }\n  .footer a { color: var(--blue-40); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 42px; }\n    .nav-links { display: none; }\n    .section { padding: 32px 16px; }\n    .card-grid { grid-template-columns: 1fr; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-inner\">\n    \u003Ch1>Design System Inspired by IBM\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value from the Carbon Design System — visualized.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-primary\" href=\"#\">Explore tokens\u003C\u002Fa>\n      \u003Ca class=\"btn-secondary\" href=\"#\">View documentation\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary (Dark Theme)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#78a9ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 40\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#78a9ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Interactive (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f62fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f62fe\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#161616\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#161616\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Blue Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#001d6c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 90\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#001d6c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tint surface (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f62fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f62fe\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary action\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#78a9ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 40\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#78a9ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4589ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4589ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale (Dark Theme)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#161616; border:1px solid #393939\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#161616\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#262626\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 90\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Layer 01\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#393939\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 80\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#393939\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Layer 02 \u002F Border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#525252\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 70\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#525252\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6f6f6f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6f6f6f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholder\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8d8d8d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8d8d8d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c6c6c6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c6c6c6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f4f4f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Support & Status (Dark)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff8389\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 40\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff8389\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#42be65\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 40\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#42be65\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f1c21b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f1c21b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4589ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4589ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Info (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:60px; font-weight:300; line-height:1.17;\">Display 01\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display 01 — 60px \u002F 300 \u002F 1.17 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.17;\">Display 02\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display 02 — 48px \u002F 300 \u002F 1.17 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:42px; font-weight:300; line-height:1.19;\">Heading 01\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 01 — 42px \u002F 300 \u002F 1.19 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.25;\">Heading 02\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 02 — 32px \u002F 400 \u002F 1.25 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.33;\">Heading 03\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 03 — 24px \u002F 400 \u002F 1.33 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40;\">Heading 04 — Semibold\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 04 — 20px \u002F 600 \u002F 1.40 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Long 01 — Build smarter business workflows with AI and hybrid cloud solutions that scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Long 01 — 16px \u002F 400 \u002F 1.50 \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.29; letter-spacing:0.16px;\">Body Short 01 — Compact text for UI elements and captions with micro-tracking.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Short 01 — 14px \u002F 400 \u002F 1.29 \u002F 0.16px \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.33; letter-spacing:0.32px;\">Caption 01 — Metadata, timestamps, helper text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption 01 — 12px \u002F 400 \u002F 1.33 \u002F 0.32px \u002F IBM Plex Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.43; letter-spacing:0.16px;\">const config = { theme: 'g100', prefix: 'cds' };\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code 01 — 14px \u002F 400 \u002F 1.43 \u002F 0.16px \u002F IBM Plex Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:42px; font-weight:400; line-height:1.19;\">Mono Display\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Display — 42px \u002F 400 \u002F 1.19 \u002F IBM Plex Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom: 24px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Primary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary (Blue 60)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">Secondary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-tertiary\" href=\"#\">Tertiary button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Tertiary (Blue 40)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Ghost button\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-danger\" href=\"#\">Delete resource\u003C\u002Fa>\u003Cdiv class=\"button-label\">Danger (Red 60)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:#001d6c; color:#78a9ff; font-size:12px; font-weight:400; padding:4px 8px; border-radius:24px;\">AI Ready\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Tag \u002F Label\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card & Tile Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:#001d6c; color:#78a9ff;\">Hybrid Cloud\u003C\u002Fdiv>\n      \u003Ch3>IBM Cloud Pak\u003C\u002Fh3>\n      \u003Cp>Modernize and build cloud-native applications anywhere with an open, faster, and more secure foundation.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:#3a1111; color:#ff8389;\">AI Platform\u003C\u002Fdiv>\n      \u003Ch3>watsonx\u003C\u002Fh3>\n      \u003Cp>Scale and accelerate the impact of AI across your business with a next-generation enterprise studio.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\" style=\"background:#0e2218; color:#42be65;\">Automation\u003C\u002Fdiv>\n      \u003Ch3>Business Automation\u003C\u002Fh3>\n      \u003Cp>Automate business and IT operations with AI-powered decision-making and intelligent workflows.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Project name\u003C\u002Flabel>\n    \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"e.g. my-cloud-project\">\n    \u003Cdiv class=\"form-helper\">Default state (bottom-border)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">API endpoint\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.ibm.com\u002Fv1\">\n    \u003Cdiv class=\"form-helper\">Focus state (Blue 40 bottom-border)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Region\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-region\">\n    \u003Cdiv class=\"form-helper form-helper--error\">Error: Region not found\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n    \u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workload...\">\u003C\u002Ftextarea>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--gray-60); letter-spacing:0.16px; line-height:1.29;\">Layout spacing: 16, 24, 32, 48, 64, 80, 96, 160px. Base unit: 8px (Carbon 2x grid).\u003C\u002Fp>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small elements\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags \u002F Labels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars, icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section-alt\">\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"background:#161616; border:1px solid var(--gray-20);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Gray 100 background\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:#262626;\">\u003Cdiv class=\"elevation-label\">Layer 01\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Gray 90 (#262626)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:#393939;\">\u003Cdiv class=\"elevation-label\">Layer 02\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Gray 80 (#393939)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:#262626; box-shadow: 0 2px 6px rgba(0,0,0,0.6);\">\u003Cdiv class=\"elevation-label\">Raised\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dropdowns, tooltips\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:#262626; box-shadow: 0 0 0 2px #78a9ff;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px Blue 40 ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:#262626; border-bottom: 2px solid var(--text-primary);\">\u003Cdiv class=\"elevation-label\">Bottom-border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Active input \u002F tab\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fibm.com\u002F\">ibm.com\u003C\u002Fa> DESIGN.md — awesome-design-md — Dark Mode\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# IBM Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fibm\u002FDESIGN.md) extracted from the public [IBM](https:\u002F\u002Fibm.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fibm\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the IBM design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![IBM Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fibm\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![IBM Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fibm\u002Fpreview-screenshot.png)\n",{"slug":145,"name":146,"category":15,"designMd":147,"previewHtml":148,"previewDarkHtml":149,"readme":150},"intercom","Intercom","# Design System Inspiration of Intercom\n\n## 1. Visual Theme & Atmosphere\n\nIntercom's website is a warm, confident customer service platform that communicates \"AI-first helpdesk\" through a clean, editorial design language. The page operates on a warm off-white canvas (`#faf9f6`) with off-black (`#111111`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (`#ff5600`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.\n\nThe typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.\n\nWhat distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use `scale(1.1)` expansion, creating a physical \"growing\" interaction. The border system uses warm oat tones (`#dedbd6`) and oklab-based opacity values for sophisticated color management.\n\n**Key Characteristics:**\n- Warm off-white canvas (`#faf9f6`) with oat-toned borders (`#dedbd6`)\n- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height\n- Fin Orange (`#ff5600`) as singular brand accent\n- Sharp 4px border-radius — near-rectangular buttons and elements\n- Scale(1.1) hover with scale(0.85) active — physical button interaction\n- SaansMono uppercase labels with wide tracking (0.6px–1.2px)\n- Rich multi-color report palette (blue, green, red, pink, lime, orange)\n- oklab color values for sophisticated opacity management\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Off Black** (`#111111`): `--color-off-black`, primary text, button backgrounds\n- **Pure White** (`#ffffff`): `--wsc-color-content-primary`, primary surface\n- **Warm Cream** (`#faf9f6`): Button backgrounds, card surfaces\n- **Fin Orange** (`#ff5600`): `--color-fin`, primary brand accent\n- **Report Orange** (`#fe4c02`): `--color-report-orange`, data visualization\n\n### Report Palette\n- **Report Blue** (`#65b5ff`): `--color-report-blue`\n- **Report Green** (`#0bdf50`): `--color-report-green`\n- **Report Red** (`#c41c1c`): `--color-report-red`\n- **Report Pink** (`#ff2067`): `--color-report-pink`\n- **Report Lime** (`#b3e01c`): `--color-report-lime-300`\n- **Green** (`#00da00`): `--color-green`\n- **Deep Blue** (`#0007cb`): Deep blue accent\n\n### Neutral Scale (Warm)\n- **Black 80** (`#313130`): `--wsc-color-black-80`, dark neutral\n- **Black 60** (`#626260`): `--wsc-color-black-60`, mid neutral\n- **Black 50** (`#7b7b78`): `--wsc-color-black-50`, muted text\n- **Content Tertiary** (`#9c9fa5`): `--wsc-color-content-tertiary`\n- **Oat Border** (`#dedbd6`): Warm border color\n- **Warm Sand** (`#d3cec6`): Light warm neutral\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Saans`, fallbacks: `Saans Fallback, ui-sans-serif, system-ui`\n- **Serif**: `Serrif`, fallbacks: `Serrif Fallback, ui-serif, Georgia`\n- **Monospace**: `SaansMono`, fallbacks: `SaansMono Fallback, ui-monospace`\n- **UI**: `MediumLL` \u002F `LLMedium`, fallbacks: `system-ui, -apple-system`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |\n| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |\n| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |\n| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |\n| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |\n| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |\n| Nav \u002F UI | Saans | 18px | 400 | 1.00 | normal |\n| Body | Saans | 16px | 400 | 1.50 | normal |\n| Body Light | Saans | 14px | 300 | 1.40 | normal |\n| Button | Saans | 16px \u002F 14px | 400 | 1.50 \u002F 1.43 | normal |\n| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |\n| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |\n| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#111111`\n- Text: `#ffffff`\n- Padding: 0px 14px\n- Radius: 4px\n- Hover: white background, dark text, scale(1.1)\n- Active: green background (`#2c6415`), scale(0.85)\n\n**Outlined**\n- Background: transparent\n- Text: `#111111`\n- Border: `1px solid #111111`\n- Radius: 4px\n- Same scale hover\u002Factive behavior\n\n**Warm Card Button**\n- Background: `#faf9f6`\n- Text: `#111111`\n- Padding: 16px\n- Border: `1px solid oklab(... \u002F 0.1)`\n\n### Cards & Containers\n- Background: `#faf9f6` (warm cream)\n- Border: `1px solid #dedbd6` (warm oat)\n- Radius: 8px\n- No visible shadows\n\n### Navigation\n- Saans 16px for links\n- Off-black text on white\n- Small 4px–6px radius buttons\n- Orange Fin accent for AI features\n\n## 5. Layout Principles\n\n### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px\n### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)\n\n## 6. Depth & Elevation\nMinimal shadows. Depth through warm border colors and surface tints.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Saans with 1.00 line-height and negative tracking on all headings\n- Apply 4px radius on buttons — sharp geometry is the identity\n- Use Fin Orange (#ff5600) for AI\u002Fbrand accent only\n- Apply scale(1.1) hover on buttons\n- Use warm neutrals (#faf9f6, #dedbd6)\n\n### Don't\n- Don't round buttons beyond 4px\n- Don't use Fin Orange decoratively\n- Don't use cool gray borders — always warm oat tones\n- Don't skip the negative tracking on headings\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 530px, 600px, 640px, 768px, 896px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Off Black (`#111111`)\n- Background: Warm Cream (`#faf9f6`)\n- Accent: Fin Orange (`#ff5600`)\n- Border: Oat (`#dedbd6`)\n- Muted: `#7b7b78`\n\n### Example Component Prompts\n- \"Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg.\"\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Intercom (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --cream:#faf9f6; --black:#111111; --white:#ffffff; --orange:#ff5600; --oat:#dedbd6; --gray50:#7b7b78; --gray60:#626260; --gray80:#313130; --sand:#d3cec6; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }\n  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }\n  .nav-links a:hover { color:var(--black); }\n  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }\n  .nav-cta:hover { transform:scale(1.05); }\n\n  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }\n  .hero h1 span { color:var(--orange); }\n  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }\n  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }\n  .btn-dark:active { transform:scale(0.85); }\n  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }\n  .btn-outline:hover { transform:scale(1.1); }\n  .btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }\n  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--black); }\n  .form-input--focus { border-color:var(--black); }\n  .form-input--error { border-color:var(--orange); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }\n  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }\n  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; margin-bottom:4px; }\n  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }\n  .footer a { color:var(--orange); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Start free trial\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Intercom\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with warm precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-dark\" href=\"#\">Get a demo\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Start free trial\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#111111\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#111111\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#faf9f6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#faf9f6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff5600\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fin Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff5600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Report Palette\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#65b5ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#65b5ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0bdf50\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0bdf50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c41c1c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c41c1c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report red\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff2067\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff2067\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b3e01c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lime\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b3e01c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report lime\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7b7b78\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7b7b78\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#626260\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#626260\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dedbd6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dedbd6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d3cec6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d3cec6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light neutral\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 80px \u002F 400 \u002F 1.00 \u002F -2.4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 54px \u002F 400 \u002F 1.00 \u002F -1.6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 40px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 24px \u002F 400 \u002F 1.00 \u002F -0.48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);\">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 16px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);\">Body Light — Updated 3 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 14px \u002F 300 \u002F 1.40\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);\">MONO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">SaansMono — 12px \u002F 500 \u002F uppercase \u002F +1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get a demo\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Start free trial\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-cream\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Warm Cream\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp style=\"font-size:12px; color:var(--gray50); margin-top:12px;\">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Fin AI Agent\u003C\u002Fh3>\u003Cp>Resolve 50% of support questions instantly with AI. No training needed.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Help Center\u003C\u002Fh3>\u003Cp>Help customers help themselves. Build a knowledge base with AI-powered search.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Workflows\u003C\u002Fh3>\u003Cp>Automate repetitive tasks. Route, assign, and resolve at scale.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default (oat border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Company\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Acme Inc\">\u003Cdiv class=\"form-state-label\">Focus (black border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Website\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (orange border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"How can we help?\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp style=\"font-size:11px; color:var(--gray50); margin-top:8px;\">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — warm borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"border-color:var(--black);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Black border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwww.intercom.com\u002F\">intercom.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Intercom (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --cream:#111111; --black:#faf9f6; --white:#1a1a1a; --orange:#ff5600; --oat:#313130; --gray50:#9c9c98; --gray60:#9c9c98; --gray80:#313130; --sand:#3a3835; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }\n  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }\n  .nav-links a:hover { color:var(--black); }\n  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }\n  .nav-cta:hover { transform:scale(1.05); }\n\n  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }\n  .hero h1 span { color:var(--orange); }\n  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }\n  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }\n  .btn-dark:active { transform:scale(0.85); }\n  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }\n  .btn-outline:hover { transform:scale(1.1); }\n  .btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }\n  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--black); }\n  .form-input--focus { border-color:var(--black); }\n  .form-input--error { border-color:var(--orange); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }\n  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }\n  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; margin-bottom:4px; }\n  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }\n\n  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }\n  .footer a { color:var(--orange); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Start free trial\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#ff5600;color:#ffffff;font-size:10px;font-weight:400;padding:4px 10px;border-radius:4px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Intercom\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with warm precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-dark\" href=\"#\">Get a demo\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Start free trial\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#111111\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#111111\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#faf9f6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#faf9f6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff5600\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fin Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff5600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Report Palette\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#65b5ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#65b5ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0bdf50\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0bdf50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c41c1c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c41c1c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report red\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff2067\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff2067\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b3e01c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lime\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b3e01c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Report lime\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7b7b78\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7b7b78\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#626260\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 60\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#626260\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dedbd6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Oat Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dedbd6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d3cec6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d3cec6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light neutral\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 80px \u002F 400 \u002F 1.00 \u002F -2.4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 54px \u002F 400 \u002F 1.00 \u002F -1.6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 40px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 24px \u002F 400 \u002F 1.00 \u002F -0.48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);\">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 16px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);\">Body Light — Updated 3 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Saans — 14px \u002F 300 \u002F 1.40\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);\">MONO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">SaansMono — 12px \u002F 500 \u002F uppercase \u002F +1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get a demo\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Start free trial\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-cream\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Warm Cream\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp style=\"font-size:12px; color:var(--gray50); margin-top:12px;\">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Fin AI Agent\u003C\u002Fh3>\u003Cp>Resolve 50% of support questions instantly with AI. No training needed.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Help Center\u003C\u002Fh3>\u003Cp>Help customers help themselves. Build a knowledge base with AI-powered search.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Workflows\u003C\u002Fh3>\u003Cp>Automate repetitive tasks. Route, assign, and resolve at scale.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default (oat border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Company\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Acme Inc\">\u003Cdiv class=\"form-state-label\">Focus (black border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Website\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (orange border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"How can we help?\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp style=\"font-size:11px; color:var(--gray50); margin-top:8px;\">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — warm borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"border-color:var(--black);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Black border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwww.intercom.com\u002F\">intercom.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Intercom Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fintercom\u002FDESIGN.md) extracted from the public [Intercom](https:\u002F\u002Fintercom.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fintercom\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Intercom design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Intercom Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fintercom\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Intercom Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fintercom\u002Fpreview-screenshot.png)\n",{"slug":152,"name":153,"category":75,"designMd":154,"previewHtml":155,"previewDarkHtml":156,"readme":157},"kraken","Kraken","# Design System Inspiration of Kraken\n\n## 1. Visual Theme & Atmosphere\n\nKraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.\n\n**Key Characteristics:**\n- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)\n- Kraken-Brand (display) + Kraken-Product (UI) dual font system\n- Near-black (`#101114`) text with cool blue-gray neutral scale\n- 12px radius buttons (rounded but not pill)\n- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level\n- Green accent (`#149e61`) for positive\u002Fsuccess states\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links\n- **Purple Dark** (`#5741d8`): Button borders, outlined variants\n- **Purple Deep** (`#5b1ecf`): Deepest purple\n- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds\n- **Near Black** (`#101114`): Primary text\n\n### Neutral\n- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity\n- **Silver Blue** (`#9497a9`): Secondary text, muted elements\n- **White** (`#ffffff`): Primary surface\n- **Border Gray** (`#dedee5`): Divider borders\n\n### Semantic\n- **Green** (`#149e61`): Success\u002Fpositive at 16% opacity for badges\n- **Green Dark** (`#026b3f`): Badge text\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`\n- **UI \u002F Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |\n| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |\n| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |\n| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |\n| Body | Kraken-Product | 16px | 400 | 1.38 | normal |\n| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |\n| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |\n| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |\n| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |\n| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Purple**\n- Background: `#7132f5`\n- Text: `#ffffff`\n- Padding: 13px 16px\n- Radius: 12px\n\n**Purple Outlined**\n- Background: `#ffffff`\n- Text: `#5741d8`\n- Border: `1px solid #5741d8`\n- Radius: 12px\n\n**Purple Subtle**\n- Background: `rgba(133,91,251,0.16)`\n- Text: `#7132f5`\n- Padding: 8px\n- Radius: 12px\n\n**White Button**\n- Background: `#ffffff`\n- Text: `#101114`\n- Radius: 10px\n- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`\n\n**Secondary Gray**\n- Background: `rgba(148,151,169,0.08)`\n- Text: `#101114`\n- Radius: 12px\n\n### Badges\n- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius\n- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius\n\n## 5. Layout Principles\n\n### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px\n### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%\n\n## 6. Depth & Elevation\n- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`\n- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Kraken Purple (#7132f5) for CTAs and links\n- Apply 12px radius on all buttons\n- Use Kraken-Brand for headings, Kraken-Product for body\n\n### Don't\n- Don't use pill buttons — 12px is the max radius for buttons\n- Don't use other purples outside the defined scale\n\n## 8. Responsive Behavior\nBreakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Kraken Purple (`#7132f5`)\n- Dark variant: `#5741d8`\n- Text: Near Black (`#101114`)\n- Secondary text: `#9497a9`\n- Background: White (`#ffffff`)\n\n### Example Component Prompts\n- \"Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding).\"\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Kraken (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#fff; --black:#101114; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#686b82; --silver:#9497a9; --border:#dedee5; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }\n\n  .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(--border); }\n  .nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }\n  .nav-links a:hover { color:var(--purple); }\n  .nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }\n  .hero h1 span { color:var(--purple); }\n  .hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }\n  .btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }\n  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--silver); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }\n  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--silver); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }\n  .form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }\n  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }\n  .footer a { color:var(--purple); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign Up\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Kraken\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with crypto-exchange precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-purple\" href=\"#\">Create Account\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Explore\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7132f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Kraken Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7132f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5741d8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5741d8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b1ecf\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Deep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b1ecf\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deepest variant\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(133,91,251,0.16)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Subtle\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(133,91,251,0.16)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle button bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#101114\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#101114\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#686b82\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#686b82\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9497a9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9497a9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Brand — 48px \u002F 700 \u002F 1.17 \u002F -1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Brand — 36px \u002F 700 \u002F 1.22 \u002F -0.5px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.20;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 22px \u002F 600 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);\">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 16px \u002F 400 \u002F 1.38\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);\">Caption — Last updated 2 min ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 14px \u002F 600 \u002F 1.71\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-purple\" href=\"#\">Create Account\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Purple Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-subtle\" href=\"#\">Learn\u003C\u002Fa>\u003Cdiv class=\"button-label\">Purple Subtle\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Details\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Bitcoin (BTC)\u003C\u002Fh3>\u003Cp>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Ethereum (ETH)\u003C\u002Fh3>\u003Cp>Smart contracts and DeFi. Trade ETH and hundreds of tokens.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Staking\u003C\u002Fh3>\u003Cp>Earn rewards by staking your crypto. Flexible and bonded options available.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@email.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"0.25 BTC\">\u003Cdiv class=\"form-state-label\">Focus (purple ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;\">\u003Cdiv class=\"elevation-label\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">4px 24px at 0.03\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--purple);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Purple ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fkraken.com\u002F\">kraken.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Kraken (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#101114; --black:#e8e8ec; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#9497a9; --silver:#686b82; --border:#2a2c34; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }\n\n  .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(--border); }\n  .nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }\n  .nav-links a:hover { color:var(--purple); }\n  .nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }\n  .hero h1 span { color:var(--purple); }\n  .hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }\n  .btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }\n  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:60px; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--silver); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }\n  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }\n  .card p { font-size:14px; color:var(--silver); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }\n  .form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }\n  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }\n  .footer a { color:var(--purple); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign Up\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#7132f5;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:12px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Kraken\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with crypto-exchange precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-purple\" href=\"#\">Create Account\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Explore\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7132f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Kraken Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7132f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5741d8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5741d8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b1ecf\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Deep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b1ecf\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deepest variant\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(133,91,251,0.16)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Subtle\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(133,91,251,0.16)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle button bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#101114\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#101114\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#686b82\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#686b82\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9497a9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9497a9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Brand — 48px \u002F 700 \u002F 1.17 \u002F -1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Brand — 36px \u002F 700 \u002F 1.22 \u002F -0.5px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.20;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 22px \u002F 600 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);\">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 16px \u002F 400 \u002F 1.38\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);\">Caption — Last updated 2 min ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Kraken-Product — 14px \u002F 600 \u002F 1.71\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-purple\" href=\"#\">Create Account\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Purple Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-subtle\" href=\"#\">Learn\u003C\u002Fa>\u003Cdiv class=\"button-label\">Purple Subtle\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Details\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Bitcoin (BTC)\u003C\u002Fh3>\u003Cp>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Ethereum (ETH)\u003C\u002Fh3>\u003Cp>Smart contracts and DeFi. Trade ETH and hundreds of tokens.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Staking\u003C\u002Fh3>\u003Cp>Earn rewards by staking your crypto. Flexible and bonded options available.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@email.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"0.25 BTC\">\u003Cdiv class=\"form-state-label\">Focus (purple ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;\">\u003Cdiv class=\"elevation-label\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">4px 24px at 0.03\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--purple);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Purple ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fkraken.com\u002F\">kraken.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Kraken Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fkraken\u002FDESIGN.md) extracted from the public [Kraken](https:\u002F\u002Fkraken.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fkraken\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Kraken design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Kraken Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fkraken\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Kraken Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fkraken\u002Fpreview-screenshot.png)\n",{"slug":159,"name":160,"category":30,"designMd":161,"previewHtml":162,"previewDarkHtml":163,"readme":164},"lamborghini","Lamborghini","# Design System Inspiration of Lamborghini\n\n## 1. Visual Theme & Atmosphere\n\nLamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.\n\nThe hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a \"MENU\" hamburger on the left, and search\u002Fbookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.\n\nTypography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus\u002FUI components, the technical infrastructure is substantial beneath the theatrical surface.\n\n**Key Characteristics:**\n- True black (`#000000`) dominant surfaces with white and gold as the only relief colors\n- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines\n- Lamborghini Gold (`#FFC000`) as the sole accent color — used exclusively for primary CTA buttons\n- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights\n- Full-viewport video heroes with cinematic event\u002Fvehicle content\n- Zero border-radius on buttons — sharp, angular, uncompromising rectangles\n- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry\n- Bootstrap grid system + Element Plus\u002FUI 68 components underneath\n- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Lamborghini Gold** (`#FFC000`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons (\"Discover More\", \"Tickets\", \"Start Configuration\"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night\n- **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness\n\n### Secondary & Accent\n- **Dark Gold** (`#917300`): Hover\u002Fpressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction\n- **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels\n- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight\n- **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors\n\n### Surface & Background\n- **Absolute Black** (`#000000`): The dominant surface color — used for page background, hero sections, header, footer, and most containers\n- **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) — the primary \"dark gray\" for cards, panels, and text containers sitting above the black canvas\n- **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections\n- **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming\n- **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections\n- **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers\n\n### Neutrals & Text\n- **Pure White** (`#FFFFFF`): Primary text on dark backgrounds — headlines, body, nav labels\n- **Smoke** (`#F5F5F5`): Secondary text on dark surfaces — slightly softer than pure white\n- **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)\n- **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)\n- **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)\n- **Slate** (`#666666`): Alternative mid-gray for secondary content\n- **Iron** (`#555555`): Dark mid-gray for body text variants\n- **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong\n\n### Semantic & Accent\n- **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback\n- **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks\n- **Teal Action** (`#1EAEDB`): Button hover background for transparent\u002Fghost variants (rgb 30, 174, 219)\n\n### Gradient System\n- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: `#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`\n- Video heroes use natural atmospheric gradients from the content itself\n- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek\n- **Fallback\u002FUI**: `Open Sans` — used for some button\u002Fform contexts as system fallback\n- **No italic variants** observed on the marketing site — the brand voice is always upright\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |\n| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |\n| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |\n| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |\n| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |\n| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |\n| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |\n| Body \u002F UI | 16px (1.00rem) | 400\u002F700 | 1.50 | normal\u002F0.16px | LamboType, primary body text |\n| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |\n| Button Standard | 14.4px (0.90rem) | 300\u002F700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |\n| Button Small | 13px (0.81rem) | 300\u002F500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |\n| Caption | 14px (0.88rem) | 600\u002F700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |\n| Label | 12px (0.75rem) | 400\u002F500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |\n| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |\n\n### Principles\n- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression\n- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy\n- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset\n- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation\n- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic\n- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes\n- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes\n\n## 4. Component Stylings\n\n### Buttons\nAll buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.\n\n**Gold Accent CTA** — The primary action:\n- Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border\n- Hover: bg `#917300` (Dark Gold), darkens significantly\n- Class: `btn-accent btn-large`\n- Used for: \"Discover More\", \"Tickets\", \"Start Configuration\"\n\n**Transparent Ghost** — The secondary action on dark backgrounds:\n- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5\n- Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7\n- Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`\n- Used for: secondary CTAs on hero sections and dark panels\n\n**White Filled** — Light-mode primary:\n- Default: bg `#FFFFFF`, text `#202020`, no border\n- Used for: CTAs on dark sections where gold isn't appropriate\n\n**Black Filled** — Dark filled variant:\n- Default: bg `#000000`, text `#202020`\n- Used for: Inverted CTA on light sections\n\n**Gray Neutral** — Subtle action:\n- Default: bg `#969696`, text `#202020`\n- Used for: secondary\u002Ftertiary actions, badge-like buttons\n\n### Cards & Containers\n- Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections\n- Border: `0px 1px solid #202020` bottom borders for section dividers\n- Border-radius: 0px (completely sharp corners)\n- Shadow: minimal, uses overlay opacity for depth\n- Content: full-bleed photography + overlaid text in white\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`\n- Cookie banner input style: white text on black with `#7D7D7D` borders\n\n### Navigation\n- **Desktop**: Centered bull logo, \"MENU\" hamburger with icon on left, search icon + bookmarks icon on right\n- **Background**: Transparent (inherits black page background)\n- **Sticky**: Fixed to top, floats above content\n- **No visible borders or shadows** — elements float in the darkness\n- **\"MENU\" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon\n- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape\n\n### Image Treatment\n- **Hero**: Full-viewport video sections (100vh) with cinematic event\u002Fvehicle footage\n- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events\n- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width\n- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel\n- **Dark gradient overlays**: Subtle darkening at top\u002Fbottom edges of video to ensure text legibility\n\n### Distinctive Components\n- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections\n- **Progress Bar**: Thin white line at bottom of hero sections indicating video\u002Fslide progress\n- **Badge\u002FTag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px\n- **Button padding**: 16px (ghost), 24px (gold accent)\n- **Section padding**: 48–56px vertical, 40px horizontal\n- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)\n\n### Grid & Container\n- **Framework**: Bootstrap grid system (container + row + col)\n- **Max width**: 1440px (largest breakpoint)\n- **Columns**: Standard 12-column Bootstrap grid\n- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge\n- **Content areas**: Centered within 1200px max-width containers\n\n### Whitespace Philosophy\nLamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | Default for everything — buttons, cards, containers, images |\n| 1px | Subtle span elements |\n| 2px | Badges, close buttons, cookie elements — barely perceptible |\n| 20px | Toggle switches only — the sole rounded element |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |\n| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |\n| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |\n| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |\n| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |\n\n### Shadow Philosophy\nLamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This \"darkness gradient\" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.\n\n### Decorative Depth\n- Full-bleed video provides atmospheric depth through cinematic lighting\n- The hexagonal pause button floats with a thin white outline stroke\n- Progress bars at hero section bottoms create a subtle horizon line\n- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness\n\n## 7. Do's and Don'ts\n\n### Do\n- Use absolute black (`#000000`) as the primary background — never dark gray as a substitute\n- Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons — never for decorative purposes\n- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING\n- Use zero border-radius on buttons and cards — sharp angles are non-negotiable\n- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks\n- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds\n- Let full-viewport video\u002Fphotography carry emotional weight — UI is infrastructure, not decoration\n- Reserve hexagonal geometry for UI icons and the video control button\n- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis\n- Keep the gray palette achromatic — all neutrals are pure gray without color tinting\n\n### Don't\n- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred\n- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic\n- Use LamboType in italic or decorative styles — the brand is always upright and direct\n- Add gradients to buttons or surfaces — depth comes from surface layering, not blending\n- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception\n- Mix lowercase into display headings — the uppercase convention communicates authority and power\n- Add hover animations with scale or translate — interactions should be color-only (background\u002Fopacity shifts)\n- Use Open Sans for display text — LamboType must handle all visible typography\n- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements\n- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C425px | Single column, reduced type scale, stacked buttons |\n| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |\n| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |\n| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |\n| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |\n| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |\n| Wide | >1440px | Content centered, margins expand, hero fills viewport |\n\n### Touch Targets\n- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)\n- Ghost buttons: 48px+ with 16px padding\n- Hamburger menu: large touch target (~48px square)\n- Hexagonal pause button: approximately 48px diameter\n\n### Collapsing Strategy\n- **Navigation**: Always hamburger-based (\"MENU\" + icon) — no horizontal nav expansion on any breakpoint\n- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit\n- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px\u002F40px (mobile)\n- **Button layout**: Side-by-side on desktop, stacks vertically on mobile\n- **Grid columns**: 3-column → 2-column → 1-column progression\n- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding\n\n### Image Behavior\n- Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes\n- Vehicle images scale within their containers with maintained aspect ratios\n- Event photography crops to viewport width on narrow screens\n- Background images darken at edges to maintain text contrast on all viewports\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Lamborghini Gold (#FFC000)\"\n- Background: \"Absolute Black (#000000)\"\n- Surface: \"Charcoal (#202020)\"\n- Heading text: \"Pure White (#FFFFFF)\"\n- Body text: \"Ash (#7D7D7D)\"\n- Link hover: \"Link Blue (#3860BE)\"\n- Accent: \"Cyan Pulse (#29ABE2)\"\n- Border: \"Pure White (#FFFFFF) at 50% opacity\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text\"\n- \"Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity\"\n- \"Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position\"\n- \"Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover\"\n- \"Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive\n2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors\n3. Use natural language descriptions, not CSS values — \"sharp-cut golden rectangle\" not \"border-radius: 0px; background: #FFC000\"\n4. Describe the desired \"feel\" alongside specific measurements — \"floating in total darkness\" communicates the black canvas better than \"background: #000000\"\n5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Lamborghini\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --lambo-gold: #FFC000;\n    --dark-gold: #917300;\n    --gold-text: #FFCE3E;\n    --pure-white: #FFFFFF;\n    --absolute-black: #000000;\n    --charcoal: #202020;\n    --dark-iron: #181818;\n    --graphite: #494949;\n    --ash: #7D7D7D;\n    --steel: #969696;\n    --slate: #666666;\n    --mist: #E6E6E6;\n    --near-white: #F8F8F8;\n    --cyan-pulse: #29ABE2;\n    --link-blue: #3860BE;\n    --teal-action: #1EAEDB;\n    --font-primary: 'Roboto', Helvetica Neue, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font-primary);\n    background: var(--absolute-black);\n    color: var(--pure-white);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--absolute-black);\n    border-bottom: 1px solid var(--charcoal);\n  }\n  .nav-brand {\n    font-size: 13px; font-weight: 500; color: var(--pure-white);\n    text-decoration: none; letter-spacing: 2px; text-transform: uppercase;\n  }\n  .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }\n  .nav-links a {\n    font-size: 14px; font-weight: 400; color: var(--pure-white);\n    text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px;\n    transition: color 0.3s;\n  }\n  .nav-links a:hover { color: var(--link-blue); }\n  .nav-cta {\n    background: var(--lambo-gold); color: var(--absolute-black);\n    padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 500;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px;\n    transition: background 0.3s;\n  }\n  .nav-cta:hover { background: var(--dark-gold); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    min-height: 100vh; display: flex; flex-direction: column;\n    align-items: center; justify-content: center; padding: 80px 40px;\n    background: var(--absolute-black); text-align: center;\n    position: relative;\n  }\n  .hero::before {\n    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n    background: radial-gradient(ellipse at center, rgba(255,192,0,0.03) 0%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-size: 80px; font-weight: 400; line-height: 0.92;\n    letter-spacing: normal; color: var(--pure-white); text-transform: uppercase;\n    margin-bottom: 16px; position: relative;\n  }\n  .hero .subtitle {\n    font-size: 16px; font-weight: 300; color: var(--ash);\n    margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.2px;\n  }\n  .hero-buttons { display: flex; gap: 16px; position: relative; }\n  .btn-gold {\n    background: var(--lambo-gold); color: var(--absolute-black);\n    border: none; border-radius: 0; padding: 16px 32px;\n    font-family: var(--font-primary); font-size: 16px; font-weight: 400;\n    cursor: pointer; text-decoration: none; text-transform: uppercase;\n    transition: background 0.3s;\n  }\n  .btn-gold:hover { background: var(--dark-gold); }\n  .btn-ghost {\n    background: transparent; color: var(--pure-white);\n    border: 1px solid var(--pure-white); border-radius: 0;\n    padding: 16px 32px; font-family: var(--font-primary);\n    font-size: 14.4px; font-weight: 300; opacity: 0.5;\n    cursor: pointer; text-decoration: none; text-transform: uppercase;\n    letter-spacing: 0.2px; transition: background 0.3s, opacity 0.3s;\n  }\n  .btn-ghost:hover { background: var(--teal-action); opacity: 0.7; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px; max-width: 1200px; margin: 0 auto;\n  }\n  .section-title {\n    font-size: 40px; font-weight: 400; color: var(--pure-white);\n    margin-bottom: 8px; text-transform: uppercase; line-height: 1.15;\n  }\n  .section-desc {\n    font-size: 16px; color: var(--ash); margin-bottom: 40px; line-height: 1.50;\n  }\n  .section-divider {\n    border: none; border-top: 1px solid var(--charcoal);\n    max-width: 1200px; margin: 0 auto;\n  }\n\n  \u002F* COLORS *\u002F\n  .color-group-label {\n    font-size: 12px; font-weight: 500; color: var(--steel);\n    margin-bottom: 16px; margin-top: 24px; text-transform: uppercase;\n    letter-spacing: 0.96px;\n  }\n  .color-grid {\n    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px; margin-bottom: 32px;\n  }\n  .color-swatch { overflow: hidden; }\n  .color-swatch .swatch-block { height: 80px; }\n  .color-swatch .swatch-info {\n    padding: 12px; background: var(--charcoal);\n    border: 1px solid var(--graphite); border-top: none;\n  }\n  .color-swatch .swatch-name { font-size: 13px; font-weight: 500; color: var(--pure-white); margin-bottom: 2px; }\n  .color-swatch .swatch-hex { font-size: 12px; color: var(--ash); margin-bottom: 4px; font-family: monospace; }\n  .color-swatch .swatch-role { font-size: 11px; color: var(--steel); line-height: 1.3; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--charcoal); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 12px; color: var(--ash); margin-top: 8px; font-family: monospace; text-transform: none; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }\n  .btn-white { background: var(--pure-white); color: var(--charcoal); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }\n  .btn-black { background: var(--absolute-black); color: var(--pure-white); border: 1px solid var(--pure-white); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }\n  .btn-gray { background: var(--steel); color: var(--charcoal); border: none; border-radius: 0; padding: 12px 24px; font-family: var(--font-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-transform: uppercase; letter-spacing: 0.13px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; }\n  .card { background: var(--charcoal); overflow: hidden; }\n  .card-image { height: 200px; background: var(--dark-iron); display: flex; align-items: center; justify-content: center; }\n  .card-image-placeholder { font-size: 48px; font-weight: 400; color: var(--graphite); text-transform: uppercase; }\n  .card-body { padding: 24px; }\n  .card-title { font-size: 27px; font-weight: 400; color: var(--pure-white); margin-bottom: 8px; text-transform: uppercase; line-height: 1.37; }\n  .card-desc { font-size: 16px; color: var(--ash); line-height: 1.50; margin-bottom: 16px; }\n  .card-link { font-size: 14px; color: var(--pure-white); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }\n  .card-link:hover { color: var(--link-blue); }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 12px; font-weight: 500; color: var(--steel); text-transform: uppercase; letter-spacing: 0.96px; }\n  .form-input {\n    font-family: var(--font-primary); font-size: 16px; color: var(--pure-white);\n    background: var(--dark-iron); border: 1px solid var(--graphite);\n    border-radius: 0; padding: 12px 16px; min-height: 48px; outline: none;\n    transition: border-color 0.3s;\n  }\n  .form-input::placeholder { color: var(--ash); }\n  .form-input:focus { border-color: var(--lambo-gold); }\n  .form-input.error { border-color: #E74C3C; }\n  .form-textarea {\n    font-family: var(--font-primary); font-size: 16px; color: var(--pure-white);\n    background: var(--dark-iron); border: 1px solid var(--graphite);\n    border-radius: 0; padding: 12px 16px; min-height: 100px; outline: none;\n    resize: vertical; transition: border-color 0.3s;\n  }\n  .form-textarea::placeholder { color: var(--ash); }\n  .form-textarea:focus { border-color: var(--lambo-gold); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }\n  .spacing-box { height: 32px; background: var(--lambo-gold); opacity: 0.6; }\n  .spacing-label { font-size: 12px; color: var(--ash); font-family: monospace; min-width: 80px; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 80px; height: 80px; background: var(--charcoal); border: 2px solid var(--graphite); margin-bottom: 8px; }\n  .radius-value { font-size: 12px; font-weight: 500; color: var(--pure-white); font-family: monospace; }\n  .radius-context { font-size: 11px; color: var(--ash); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }\n  .elevation-card { width: 200px; padding: 24px; text-align: center; }\n  .elevation-name { font-size: 13px; font-weight: 500; color: var(--pure-white); margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--ash); }\n\n  footer { padding: 40px; text-align: center; border-top: 1px solid var(--charcoal); }\n  footer p { font-size: 12px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.96px; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    nav { padding: 12px 20px; }\n    .section { padding: 60px 20px; }\n    .nav-links { display: none; }\n    .section-title { font-size: 27px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#\">Models\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Motorsport\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Ownership\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Discover\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Configure\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Lamborghini\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog generated from DESIGN.md — darkness, gold, and uncompromising angles.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#\" class=\"btn-gold\">Discover More\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-ghost\">View Models\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Monochrome darkness punctuated by Lamborghini Gold. The only chromatic color in the system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#FFC000;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Lamborghini Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFC000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary CTA accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Text, logo, nav elements\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#917300;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#917300\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Gold hover\u002Fpressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#000000; border:1px solid #202020;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Page background, deepest layer\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#181818;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Iron\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#181818\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Footer, deep sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#202020;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#202020\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Cards, elevated panels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#F8F8F8;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F8F8F8\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Rare light-mode surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutrals & Text\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#494949;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Graphite\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#494949\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Text on light surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#7D7D7D;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Ash\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#7D7D7D\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Muted text, metadata\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#969696;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Steel\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#969696\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Disabled text, badges\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#E6E6E6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Mist\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#E6E6E6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Light gray containers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#29ABE2;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Cyan Pulse\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#29ABE2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Informational accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#3860BE;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3860BE\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Link hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#1EAEDB;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Teal Action\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1EAEDB\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Ghost button hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">LamboType for everything — shown with Roboto as the closest available fallback. All display text is uppercase.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:80px;font-weight:400;line-height:0.92;text-transform:uppercase;color:var(--pure-white);\">TEMERARIO\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Hero Display — 120px→80px \u002F 400 \u002F 0.92 LH \u002F uppercase \u002F LamboType\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px;font-weight:400;line-height:1.19;text-transform:uppercase;color:var(--pure-white);\">YOU CAN'T HIDE\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Section Title — 54px \u002F 400 \u002F 1.19 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px;font-weight:400;line-height:1.15;text-transform:uppercase;color:var(--pure-white);\">DEALER LOCATOR\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Sub-section — 40px \u002F 400 \u002F 1.15 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:27px;font-weight:400;line-height:1.37;text-transform:uppercase;color:var(--pure-white);\">NEWS LAMBORGHINI WORLD\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Feature Heading — 27px \u002F 400 \u002F 1.37 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px;font-weight:400;line-height:1.56;color:var(--pure-white);\">The arena of emotions. Where power meets precision, and every detail tells a story of relentless innovation.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Large — 18px \u002F 400 \u002F 1.56 LH \u002F mixed case\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px;font-weight:400;line-height:1.50;color:var(--ash);\">Standard paragraph text for descriptions, captions, and secondary content throughout the interface.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body — 16px \u002F 400 \u002F 1.50 LH\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px;font-weight:500;line-height:1.83;text-transform:uppercase;letter-spacing:0.96px;color:var(--steel);\">LABEL   BADGE   MICRO\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Label — 12px \u002F 500 \u002F 1.83 LH \u002F uppercase \u002F +0.96px tracking\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Zero border-radius. Sharp, angular rectangles. Gold for primary, ghost for secondary.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-gold\">Discover More\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--ash);font-family:monospace;\">Gold Accent — bg #FFC000, 0px radius, 24px padding\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-ghost\">View Models\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--ash);font-family:monospace;\">Ghost — transparent, white border, 50% opacity\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-white\">Configure\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--ash);font-family:monospace;\">White Filled — bg #FFFFFF, text #202020\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-black\">Explore\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--ash);font-family:monospace;\">Black — bg #000000, white border\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-gray\">Details\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--ash);font-family:monospace;\">Gray — bg #969696, 13px, compact\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp-edged cards on charcoal surfaces. No radius, no shadow — just surface color shifts.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">T\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Temerario\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">The new V8 hybrid super sports car. Uncompromising power meets visionary design.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">R\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Revuelto\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">The first V12 hybrid plug-in HPEV. A new era of Lamborghini performance.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">U\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Urus SE\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">The world's first Super SUV. Beyond the concept of luxury.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp-edged inputs on dark backgrounds. Focus triggers gold border.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter your name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Focus Input\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Focused\" style=\"border-color:var(--lambo-gold);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Error Input\u003C\u002Flabel>\u003Cinput class=\"form-input error\" type=\"text\" value=\"Invalid entry\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Your message...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit with a comprehensive scale from 2px to 56px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Fine adjustments\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Base unit\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:64px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Ghost button padding, card gap\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:96px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Gold CTA padding, card body\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:160px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Section horizontal padding\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">56px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:224px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--ash);\">Section vertical padding\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Almost entirely zero. Sharp angles are fundamental to the Lamborghini DNA.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Everything (default)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges, close buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Toggle switches only\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" style=\"background:var(--dark-iron);max-width:100%;padding:80px 40px;\">\n  \u003Cdiv style=\"max-width:1200px;margin:0 auto;\">\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">No shadows — depth through surface color layering. Lighter = closer.\u003C\u002Fp>\n    \u003Cdiv class=\"elevation-row\">\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--absolute-black);border:1px solid var(--charcoal);\">\u003Cdiv class=\"elevation-name\">Level 0 — Abyss\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#000000 flat black\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark-iron);border:1px solid var(--graphite);\">\u003Cdiv class=\"elevation-name\">Level 1 — Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#181818 elevated\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--charcoal);border:1px solid var(--graphite);\">\u003Cdiv class=\"elevation-name\">Level 2 — Panel\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#202020 cards\u002Fpanels\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.7);border:1px solid var(--charcoal);\">\u003Cdiv class=\"elevation-name\">Level 3 — Overlay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.7)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\u003Cp>Design System Inspired by Lamborghini — Generated from DESIGN.md by awesome-design-md\u003C\u002Fp>\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Lamborghini — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --lambo-gold: #FFC000;\n    --dark-gold: #917300;\n    --gold-text: #FFCE3E;\n    --pure-white: #FFFFFF;\n    --absolute-black: #000000;\n    --charcoal: #202020;\n    --dark-iron: #181818;\n    --graphite: #494949;\n    --ash: #7D7D7D;\n    --steel: #969696;\n    --mist: #E6E6E6;\n    --near-white: #F8F8F8;\n    --cyan-pulse: #29ABE2;\n    --link-blue: #3860BE;\n    --teal-action: #1EAEDB;\n    --surface-deep: #0A0A0A;\n    --surface-mid: #141414;\n    --text-primary: #F0F0F0;\n    --text-muted: #888888;\n    --border-dark: #1A1A1A;\n    --font-primary: 'Roboto', Helvetica Neue, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font-primary);\n    background: var(--surface-deep);\n    color: var(--text-primary);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--lambo-gold); color: var(--absolute-black);\n    padding: 6px 14px; border-radius: 0; font-size: 11px; font-weight: 500;\n    letter-spacing: 1px; text-transform: uppercase;\n  }\n\n  nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 16px 40px; background: var(--surface-deep);\n    border-bottom: 1px solid var(--border-dark);\n  }\n  .nav-brand { font-size: 13px; font-weight: 500; color: var(--text-primary); text-decoration: none; letter-spacing: 2px; text-transform: uppercase; }\n  .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }\n  .nav-links a:hover { color: var(--link-blue); }\n  .nav-cta { background: var(--lambo-gold); color: var(--absolute-black); padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: background 0.3s; }\n  .nav-cta:hover { background: var(--dark-gold); }\n\n  .hero {\n    min-height: 100vh; display: flex; flex-direction: column;\n    align-items: center; justify-content: center; padding: 80px 40px;\n    background: var(--absolute-black); text-align: center; position: relative;\n  }\n  .hero::before {\n    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n    background: radial-gradient(ellipse at center, rgba(255,192,0,0.04) 0%, transparent 60%);\n    pointer-events: none;\n  }\n  .hero h1 { font-size: 80px; font-weight: 400; line-height: 0.92; color: var(--text-primary); text-transform: uppercase; margin-bottom: 16px; position: relative; }\n  .hero .subtitle { font-size: 16px; font-weight: 300; color: var(--text-muted); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.2px; }\n  .hero-buttons { display: flex; gap: 16px; position: relative; }\n  .btn-gold { background: var(--lambo-gold); color: var(--absolute-black); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 16px; font-weight: 400; cursor: pointer; text-decoration: none; text-transform: uppercase; transition: background 0.3s; }\n  .btn-gold:hover { background: var(--dark-gold); }\n  .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 300; opacity: 0.5; cursor: pointer; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; transition: background 0.3s, opacity 0.3s; }\n  .btn-ghost:hover { background: var(--teal-action); opacity: 0.7; }\n\n  .section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }\n  .section-title { font-size: 40px; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; text-transform: uppercase; line-height: 1.15; }\n  .section-desc { font-size: 16px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.50; }\n  .section-divider { border: none; border-top: 1px solid var(--border-dark); max-width: 1200px; margin: 0 auto; }\n\n  .color-group-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 16px; margin-top: 24px; text-transform: uppercase; letter-spacing: 0.96px; }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }\n  .color-swatch { overflow: hidden; }\n  .color-swatch .swatch-block { height: 80px; }\n  .color-swatch .swatch-info { padding: 12px; background: var(--surface-mid); border: 1px solid var(--border-dark); border-top: none; }\n  .color-swatch .swatch-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }\n  .color-swatch .swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-family: monospace; }\n  .color-swatch .swatch-role { font-size: 11px; color: var(--ash); line-height: 1.3; }\n\n  .type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border-dark); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-family: monospace; text-transform: none; }\n\n  .button-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }\n  .btn-white { background: var(--pure-white); color: var(--charcoal); border: none; border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }\n  .btn-black { background: var(--absolute-black); color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 0; padding: 16px 32px; font-family: var(--font-primary); font-size: 14.4px; font-weight: 400; cursor: pointer; text-transform: uppercase; }\n  .btn-gray { background: var(--steel); color: var(--charcoal); border: none; border-radius: 0; padding: 12px 24px; font-family: var(--font-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-transform: uppercase; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; }\n  .card { background: var(--surface-mid); overflow: hidden; border: 1px solid var(--border-dark); }\n  .card-image { height: 200px; background: var(--absolute-black); display: flex; align-items: center; justify-content: center; }\n  .card-image-placeholder { font-size: 48px; font-weight: 400; color: var(--charcoal); text-transform: uppercase; }\n  .card-body { padding: 24px; }\n  .card-title { font-size: 27px; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; text-transform: uppercase; line-height: 1.37; }\n  .card-desc { font-size: 16px; color: var(--text-muted); line-height: 1.50; margin-bottom: 16px; }\n  .card-link { font-size: 14px; color: var(--text-primary); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.2px; transition: color 0.3s; }\n  .card-link:hover { color: var(--link-blue); }\n\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.96px; }\n  .form-input { font-family: var(--font-primary); font-size: 16px; color: var(--text-primary); background: var(--absolute-black); border: 1px solid var(--charcoal); border-radius: 0; padding: 12px 16px; min-height: 48px; outline: none; transition: border-color 0.3s; }\n  .form-input::placeholder { color: var(--ash); }\n  .form-input:focus { border-color: var(--lambo-gold); }\n  .form-input.error { border-color: #E74C3C; }\n  .form-textarea { font-family: var(--font-primary); font-size: 16px; color: var(--text-primary); background: var(--absolute-black); border: 1px solid var(--charcoal); border-radius: 0; padding: 12px 16px; min-height: 100px; outline: none; resize: vertical; transition: border-color 0.3s; }\n  .form-textarea::placeholder { color: var(--ash); }\n  .form-textarea:focus { border-color: var(--lambo-gold); }\n\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }\n  .spacing-box { height: 32px; background: var(--lambo-gold); opacity: 0.5; }\n  .spacing-label { font-size: 12px; color: var(--text-muted); font-family: monospace; min-width: 80px; }\n\n  .radius-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 80px; height: 80px; background: var(--surface-mid); border: 2px solid var(--charcoal); margin-bottom: 8px; }\n  .radius-value { font-size: 12px; font-weight: 500; color: var(--text-primary); font-family: monospace; }\n  .radius-context { font-size: 11px; color: var(--text-muted); }\n\n  .elevation-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }\n  .elevation-card { width: 200px; padding: 24px; text-align: center; }\n  .elevation-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--text-muted); }\n\n  footer { padding: 40px; text-align: center; border-top: 1px solid var(--border-dark); }\n  footer p { font-size: 12px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.96px; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    nav { padding: 12px 20px; }\n    .section { padding: 60px 20px; }\n    .nav-links { display: none; }\n    .section-title { font-size: 27px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#\">Models\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Motorsport\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Ownership\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Discover\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Configure\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Lamborghini\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog generated from DESIGN.md — darkness, gold, and uncompromising angles.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#\" class=\"btn-gold\">Discover More\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-ghost\">View Models\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Monochrome darkness punctuated by Lamborghini Gold.\u003C\u002Fp>\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#FFC000;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Lamborghini Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFC000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary CTA accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Text, logo, nav\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#917300;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#917300\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Gold hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#000000;border:1px solid #1A1A1A;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#181818;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Dark Iron\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#181818\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Deep sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#202020;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#202020\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Cards, panels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#494949;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Graphite\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#494949\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Text on light\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#7D7D7D;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Ash\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#7D7D7D\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#969696;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Steel\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#969696\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Disabled, badges\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#29ABE2;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Cyan Pulse\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#29ABE2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Informational\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#3860BE;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3860BE\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Link hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#1EAEDB;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Teal Action\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1EAEDB\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Ghost btn hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">LamboType — shown with Roboto fallback. All display text uppercase.\u003C\u002Fp>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:80px;font-weight:400;line-height:0.92;text-transform:uppercase;color:var(--text-primary);\">TEMERARIO\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Hero Display — 120px→80px \u002F 400 \u002F 0.92 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px;font-weight:400;line-height:1.19;text-transform:uppercase;color:var(--text-primary);\">YOU CAN'T HIDE\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Section Title — 54px \u002F 400 \u002F 1.19 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:27px;font-weight:400;line-height:1.37;text-transform:uppercase;color:var(--text-primary);\">NEWS LAMBORGHINI WORLD\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Feature Heading — 27px \u002F 400 \u002F 1.37 LH \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px;font-weight:400;line-height:1.56;color:var(--text-primary);\">The arena of emotions. Power meets precision, every detail tells a story.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Large — 18px \u002F 400 \u002F 1.56 LH\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px;font-weight:500;line-height:1.83;text-transform:uppercase;letter-spacing:0.96px;color:var(--text-muted);\">LABEL   BADGE   MICRO\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Label — 12px \u002F 500 \u002F uppercase \u002F +0.96px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Zero radius. Sharp angles. Gold primary, ghost secondary.\u003C\u002Fp>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-gold\">Discover More\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--text-muted);font-family:monospace;\">Gold Accent — #FFC000, 0px radius\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-ghost\">View Models\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--text-muted);font-family:monospace;\">Ghost — transparent, white border, 50% opacity\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-white\">Configure\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--text-muted);font-family:monospace;\">White Filled\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-black\">Explore\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--text-muted);font-family:monospace;\">Black with border\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\u003Ca href=\"#\" class=\"btn-gray\">Details\u003C\u002Fa>\u003Cspan style=\"font-size:12px;color:var(--text-muted);font-family:monospace;\">Gray neutral\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp-edged cards on deep dark surfaces.\u003C\u002Fp>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">T\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Temerario\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">The new V8 hybrid super sports car.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">R\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Revuelto\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">First V12 hybrid plug-in HPEV.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-image\">\u003Cspan class=\"card-image-placeholder\">U\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Cdiv class=\"card-title\">Urus SE\u003C\u002Fdiv>\u003Cdiv class=\"card-desc\">The world's first Super SUV.\u003C\u002Fdiv>\u003Ca href=\"#\" class=\"card-link\">Discover\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp inputs on black. Gold focus border.\u003C\u002Fp>\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Default\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Focus\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Focused\" style=\"border-color:var(--lambo-gold);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Error\u003C\u002Flabel>\u003Cinput class=\"form-input error\" type=\"text\" value=\"Invalid\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Message...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base. From fine 4px to section 56px.\u003C\u002Fp>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Fine\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Base\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:64px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Button pad\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:96px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Gold CTA pad\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:160px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Section H-pad\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-label\">56px\u003C\u002Fdiv>\u003Cdiv class=\"spacing-box\" style=\"width:224px;\">\u003C\u002Fdiv>\u003Cspan style=\"font-size:11px;color:var(--text-muted);\">Section V-pad\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Zero is default. Sharp angles are the Lamborghini DNA.\u003C\u002Fp>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Switches\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" style=\"background:var(--absolute-black);max-width:100%;padding:80px 40px;\">\n  \u003Cdiv style=\"max-width:1200px;margin:0 auto;\">\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">No shadows. Surface color layering only.\u003C\u002Fp>\n    \u003Cdiv class=\"elevation-row\">\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--absolute-black);border:1px solid var(--border-dark);\">\u003Cdiv class=\"elevation-name\">Level 0 — Abyss\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#000000\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--dark-iron);border:1px solid var(--charcoal);\">\u003Cdiv class=\"elevation-name\">Level 1 — Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#181818\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:var(--charcoal);border:1px solid var(--graphite);\">\u003Cdiv class=\"elevation-name\">Level 2 — Panel\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#202020\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.7);border:1px solid var(--border-dark);\">\u003Cdiv class=\"elevation-name\">Level 3 — Overlay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.7)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\u003Cp>Design System Inspired by Lamborghini — Generated from DESIGN.md by awesome-design-md\u003C\u002Fp>\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Lamborghini Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flamborghini\u002FDESIGN.md) extracted from the public [Lamborghini](https:\u002F\u002Flamborghini.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flamborghini\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lamborghini design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Lamborghini Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flamborghini\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Lamborghini Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flamborghini\u002Fpreview-screenshot.png)\n",{"slug":166,"name":167,"category":90,"designMd":168,"previewHtml":169,"previewDarkHtml":170,"readme":171},"linear.app","Linear App","# Design System Inspiration of Linear\n\n## 1. Visual Theme & Atmosphere\n\nLinear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.\n\nThe typography system is built entirely on Inter Variable with OpenType features `\"cv01\"` and `\"ss03\"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.\n\nThe color system is almost entirely achromatic — dark backgrounds with white\u002Fgray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.\n\n**Key Characteristics:**\n- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces\n- Inter Variable with `\"cv01\", \"ss03\"` globally — geometric alternates for a cleaner aesthetic\n- Signature weight 510 (between regular and medium) for most UI text\n- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Brand indigo-violet: `#5e6ad2` (bg) \u002F `#7170ff` (accent) \u002F `#828fff` (hover) — the only chromatic color in the system\n- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`\n- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`\n- Multi-layered shadows with inset variants for depth on dark surfaces\n- Radix UI primitives as the component foundation (6 detected primitives)\n- Success green (`#27a644`, `#10b981`) used only for status indicators\n\n## 2. Color Palette & Roles\n\n### Background Surfaces\n- **Marketing Black** (`#010102` \u002F `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.\n- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.\n- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.\n- **Secondary Surface** (`#28282c`): The lightest dark surface — used for hover states and slightly elevated components.\n\n### Text & Content\n- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.\n- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.\n- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.\n- **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.\n\n### Brand & Accent\n- **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.\n- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.\n- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.\n- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.\n\n### Status Colors\n- **Green** (`#27a644`): Primary success\u002Factive status. Used for \"in progress\" indicators.\n- **Emerald** (`#10b981`): Secondary success — pill badges, completion states.\n\n### Border & Divider\n- **Border Primary** (`#23252a`): Solid dark border for prominent separations.\n- **Border Secondary** (`#34343a`): Slightly lighter solid border.\n- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.\n- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.\n- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.\n- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.\n- **Line Tertiary** (`#18191a`): Slightly more visible divider line.\n\n### Light Mode Neutrals (for light theme contexts)\n- **Light Background** (`#f7f8f8`): Page background in light mode.\n- **Light Surface** (`#f3f4f5` \u002F `#f5f6f7`): Subtle surface tinting.\n- **Light Border** (`#d0d6e0`): Visible border in light contexts.\n- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.\n- **Pure White** (`#ffffff`): Card surfaces, highlights.\n\n### Overlay\n- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal\u002Fdialog backdrop — extremely dark for focus isolation.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`\n- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`\n- **OpenType Features**: `\"cv01\", \"ss03\"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |\n| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |\n| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |\n| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |\n| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |\n| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |\n| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |\n| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |\n| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |\n| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |\n| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |\n| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |\n| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |\n| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |\n| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |\n| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |\n| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |\n| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |\n| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |\n| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |\n| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |\n| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |\n| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |\n| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |\n| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |\n| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |\n\n### Principles\n- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.\n- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.\n- **OpenType as identity**: `\"cv01\", \"ss03\"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.\n- **Three-tier weight system**: 400 (reading), 510 (emphasis\u002FUI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button (Default)**\n- Background: `rgba(255,255,255,0.02)`\n- Text: `#e2e4e7` (near-white)\n- Padding: comfortable\n- Radius: 6px\n- Border: `1px solid rgb(36, 40, 44)`\n- Outline: none\n- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`\n- Use: Standard actions, secondary CTAs\n\n**Subtle Button**\n- Background: `rgba(255,255,255,0.04)`\n- Text: `#d0d6e0` (silver-gray)\n- Padding: 0px 6px\n- Radius: 6px\n- Use: Toolbar actions, contextual buttons\n\n**Primary Brand Button (Inferred)**\n- Background: `#5e6ad2` (brand indigo)\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 6px\n- Hover: `#828fff` shift\n- Use: Primary CTAs (\"Start building\", \"Sign up\")\n\n**Icon Button (Circle)**\n- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`\n- Text: `#f7f8f8` or `#ffffff`\n- Radius: 50%\n- Border: `1px solid rgba(255,255,255,0.08)`\n- Use: Close, menu toggle, icon-only actions\n\n**Pill Button**\n- Background: transparent\n- Text: `#d0d6e0`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: `1px solid rgb(35, 37, 42)`\n- Use: Filter chips, tags, status indicators\n\n**Small Toolbar Button**\n- Background: `rgba(255,255,255,0.05)`\n- Text: `#62666d` (muted)\n- Radius: 2px\n- Border: `1px solid rgba(255,255,255,0.05)`\n- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`\n- Font: 12px weight 510\n- Use: Toolbar actions, quick-access controls\n\n### Cards & Containers\n- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid — always translucent)\n- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)\n- Radius: 8px (standard), 12px (featured), 22px (large panels)\n- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks\n- Hover: subtle background opacity increase\n\n### Inputs & Forms\n\n**Text Area**\n- Background: `rgba(255,255,255,0.02)`\n- Text: `#d0d6e0`\n- Border: `1px solid rgba(255,255,255,0.08)`\n- Padding: 12px 14px\n- Radius: 6px\n\n**Search Input**\n- Background: transparent\n- Text: `#f7f8f8`\n- Padding: 1px 32px (icon-aware)\n\n**Button-style Input**\n- Text: `#8a8f98`\n- Padding: 1px 6px\n- Radius: 5px\n- Focus shadow: multi-layer stack\n\n### Badges & Pills\n\n**Success Pill**\n- Background: `#10b981`\n- Text: `#f7f8f8`\n- Radius: 50% (circular)\n- Font: 10px weight 510\n- Use: Status dots, completion indicators\n\n**Neutral Pill**\n- Background: transparent\n- Text: `#d0d6e0`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: `1px solid rgb(35, 37, 42)`\n- Font: 12px weight 510\n- Use: Tags, filter chips, category labels\n\n**Subtle Badge**\n- Background: `rgba(255,255,255,0.05)`\n- Text: `#f7f8f8`\n- Padding: 0px 8px 0px 2px\n- Radius: 2px\n- Border: `1px solid rgba(255,255,255,0.05)`\n- Font: 10px weight 510\n- Use: Inline labels, version tags\n\n### Navigation\n- Dark sticky header on near-black background\n- Linear logomark left-aligned (SVG icon)\n- Links: Inter Variable 13–14px weight 510, `#d0d6e0` text\n- Active\u002Fhover: text lightens to `#f7f8f8`\n- CTA: Brand indigo button or ghost button\n- Mobile: hamburger collapse\n- Search: command palette trigger (`\u002F` or `Cmd+K`)\n\n### Image Treatment\n- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)\n- Top-rounded images: `12px 12px 0px 0px` radius\n- Dashboard\u002Fissue previews dominate feature sections\n- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px\n- The 7px and 11px values suggest micro-adjustments for optical alignment\n- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous vertical padding\n- Feature sections: 2–3 column grids for feature cards\n- Full-width dark sections with internal max-width constraints\n- Changelog: single-column timeline layout\n\n### Whitespace Philosophy\n- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.\n- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.\n- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.\n\n### Border Radius Scale\n- Micro (2px): Inline badges, toolbar buttons, subtle tags\n- Standard (4px): Small containers, list items\n- Comfortable (6px): Buttons, inputs, functional elements\n- Card (8px): Cards, dropdowns, popovers\n- Panel (12px): Panels, featured cards, section containers\n- Large (22px): Large panel elements\n- Full Pill (9999px): Chips, filter pills, status tags\n- Circle (50%): Icon buttons, avatars, status dots\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |\n| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |\n| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |\n| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |\n| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |\n| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |\n| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |\n| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |\n\n**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique \"sunken\" effect for recessed panels, adding dimensional depth that traditional dark themes lack.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Inter Variable with `\"cv01\", \"ss03\"` on ALL text — these features are fundamental to Linear's typeface identity\n- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight\n- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces\n- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders\n- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`\n- Reserve brand indigo (`#5e6ad2` \u002F `#7170ff`) for primary CTAs and interactive accents only\n- Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh\n- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg\n\n### Don't\n- Don't use pure white (`#ffffff`) as primary text — `#f7f8f8` prevents eye strain\n- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)\n- Don't apply the brand indigo decoratively — it's reserved for interactive\u002FCTA elements only\n- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative\n- Don't use visible\u002Fopaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white\n- Don't skip the OpenType features (`\"cv01\", \"ss03\"`) — without them, it's generic Inter, not Linear's Inter\n- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse\n- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only\n- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C600px | Single column, compact padding |\n| Mobile | 600–640px | Standard mobile layout |\n| Tablet | 640–768px | Two-column grids begin |\n| Desktop Small | 768–1024px | Full card grids, expanded padding |\n| Desktop | 1024–1280px | Standard desktop, full navigation |\n| Large Desktop | >1280px | Full layout, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding with 6px radius minimum\n- Navigation links at 13–14px with adequate spacing\n- Pill tags have 10px horizontal padding for touch accessibility\n- Icon buttons at 50% radius ensure circular, easy-to-tap targets\n- Search trigger is prominently placed with generous hit area\n\n### Collapsing Strategy\n- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally\n- Navigation: horizontal links + CTAs → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Product screenshots: maintain aspect ratio, may reduce padding\n- Changelog: timeline maintains single-column through all sizes\n- Footer: multi-column → stacked single column\n- Section spacing: 80px+ → 48px on mobile\n\n### Image Behavior\n- Dashboard screenshots maintain border treatment at all sizes\n- Hero visuals simplify on mobile (fewer floating UI elements)\n- Product screenshots use responsive sizing with consistent radius\n- Dark background ensures screenshots blend naturally at any viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Brand Indigo (`#5e6ad2`)\n- Page Background: Marketing Black (`#08090a`)\n- Panel Background: Panel Dark (`#0f1011`)\n- Surface: Level 3 (`#191a1b`)\n- Heading text: Primary White (`#f7f8f8`)\n- Body text: Silver Gray (`#d0d6e0`)\n- Muted text: Tertiary Gray (`#8a8f98`)\n- Subtle text: Quaternary Gray (`#62666d`)\n- Accent: Violet (`#7170ff`)\n- Accent Hover: Light Violet (`#828fff`)\n- Border (default): `rgba(255,255,255,0.08)`\n- Border (subtle): `rgba(255,255,255,0.05)`\n- Focus ring: Multi-layer shadow stack\n\n### Example Component Prompts\n- \"Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius).\"\n- \"Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px.\"\n- \"Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510.\"\n- \"Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`.\"\n- \"Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`.\"\n\n### Iteration Guide\n1. Always set font-feature-settings `\"cv01\", \"ss03\"` on all Inter text — this is non-negotiable for Linear's look\n2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px\n3. Three weights: 400 (read), 510 (emphasize\u002Fnavigate), 590 (announce)\n4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark\n5. Brand indigo (`#5e6ad2` \u002F `#7170ff`) is the only chromatic color — everything else is grayscale\n6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds\n7. Berkeley Mono for any code or technical content, Inter Variable for everything else\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Linear (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg-page: #f7f8f8;\n    --bg-surface: #ffffff;\n    --bg-panel: #f3f4f5;\n    --text-primary: #1a1a1e;\n    --text-secondary: #3c3c43;\n    --text-tertiary: #62666d;\n    --text-quaternary: #8a8f98;\n    --brand: #5e6ad2;\n    --accent: #7170ff;\n    --accent-hover: #828fff;\n    --success: #27a644;\n    --emerald: #10b981;\n    --border-primary: #d0d6e0;\n    --border-subtle: #e6e6e6;\n    --border-light: rgba(0,0,0,0.08);\n    --shadow-ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;\n    --shadow-subtle: rgba(0,0,0,0.04) 0px 2px 4px 0px;\n    --shadow-card: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px 0px;\n    --shadow-elevated: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 4px 12px 0px;\n    --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(247,248,248,0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    display: inline-block; background: var(--brand); color: #ffffff;\n    padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;\n    text-decoration: none; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: var(--accent); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 510; line-height: 1.00;\n    letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-brand {\n    display: inline-block; background: var(--brand); color: #ffffff;\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 510;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .btn-brand:hover { background: var(--accent); }\n  .btn-ghost {\n    display: inline-block; background: var(--bg-surface); color: var(--text-primary);\n    padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 510;\n    text-decoration: none; cursor: pointer; transition: border-color 0.15s;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .btn-ghost:hover { border-color: var(--text-quaternary); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-ring); background: var(--bg-surface); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--bg-surface); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-elevated); }\n  .card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }\n  .card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.182px; }\n  .form-input {\n    width: 100%; background: var(--bg-surface); color: var(--text-primary);\n    border: 1px solid var(--border-primary); padding: 10px 14px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }\n  .form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.2); }\n  .form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.2); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--bg-surface); color: var(--text-primary);\n    border: 1px solid var(--border-primary); padding: 12px 14px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }\n  .radius-context { font-size: 10px; color: var(--text-quaternary); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--bg-surface); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Building\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Linear\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Background Surfaces\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#08090a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Marketing Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#08090a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hero backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f1011\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Panel Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f1011\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Sidebar, panels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#191a1b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Level 3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#191a1b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Elevated surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#28282c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#28282c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text & Content\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f8f8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Primary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f8f8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings, primary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d0d6e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d0d6e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8a8f98\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Tertiary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8a8f98\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#62666d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Quaternary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#62666d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled, timestamps\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5e6ad2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Indigo\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5e6ad2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7170ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Violet\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7170ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links, active states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#828fff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#828fff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7a7fad\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Security Lavender\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7a7fad\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Security UI\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#27a644\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#27a644\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success, active\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#10b981\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Emerald\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#10b981\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badges, completion\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Dividers\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#23252a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Primary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#23252a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Strong borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#34343a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#34343a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Medium borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3e3e44\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Tertiary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3e3e44\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Lighter borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6e6e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6e6e6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light mode borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Light Mode Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f8f8; border-bottom:1px solid #e6e6e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Bg\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f8f8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f3f4f5; border-bottom:1px solid #e6e6e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f3f4f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Surface tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e6e6e6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d0d6e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d0d6e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light mode dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;\">Display Headline\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F 510 \u002F 1.00 \u002F -1.056px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;\">Heading One\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 1 — 32px \u002F 400 \u002F 1.13 \u002F -0.704px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;\">Heading Two\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 2 — 24px \u002F 400 \u002F 1.33 \u002F -0.288px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;\">Heading Three\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 3 — 20px \u002F 590 \u002F 1.33 \u002F -0.24px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;\">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.60 \u002F -0.165px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:510; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 510 \u002F 1.50 \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px;\">Small — Secondary body content and descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small — 15px \u002F 400 \u002F 1.60 \u002F -0.165px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;\">Caption — Sub-labels and category headers\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 510 \u002F 1.50 \u002F -0.182px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px;\">Meta — Timestamps and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Meta — 13px \u002F 510 \u002F 1.50 \u002F -0.13px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:510; line-height:1.40;\">Label — Small button text and tags\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label — 12px \u002F 510 \u002F 1.40 \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50;\">const issue = await linear.createIssue({title});\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body — 14px \u002F 400 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase;\">ISSUE STATUS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Label — 12px \u002F 400 \u002F uppercase \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(94,106,210,0.1); color:var(--brand); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;\">In Progress\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Status Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(16,185,129,0.1); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;\">Done\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--bg-panel); color:var(--text-tertiary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid var(--border-subtle);\">v2.4\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Subtle Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);\">Filter\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Pill Chip\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(94,106,210,0.1); color:var(--brand);\">Issues\u003C\u002Fdiv>\n      \u003Ch3>Issue Tracking\u003C\u002Fh3>\n      \u003Cp>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-elevated);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(16,185,129,0.1); color:var(--emerald);\">Cycles\u003C\u002Fdiv>\n      \u003Ch3>Sprint Cycles\u003C\u002Fh3>\n      \u003Cp>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(113,112,255,0.1); color:var(--accent);\">Roadmaps\u003C\u002Fdiv>\n      \u003Ch3>Product Roadmaps\u003C\u002Fh3>\n      \u003Cp>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Issue Title\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter issue title...\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Assignee\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"@alice\">\u003Cdiv class=\"form-state-label\">Focus (accent ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Priority\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid priority\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe the issue...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">35\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:22px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">22px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Circles\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Micro-elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 2: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + subtle lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-elevated);\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + deeper shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--accent);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accent ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: inset rgba(0,0,0,0.1) 0px 0px 12px 0px;\">\u003Cdiv class=\"elevation-label\">Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Sunken panel\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Flinear.app\u002F\">linear.app\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Linear (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg-page: #08090a;\n    --bg-surface: #0f1011;\n    --bg-elevated: #191a1b;\n    --bg-hover: #28282c;\n    --text-primary: #f7f8f8;\n    --text-secondary: #d0d6e0;\n    --text-tertiary: #8a8f98;\n    --text-quaternary: #62666d;\n    --brand: #5e6ad2;\n    --accent: #7170ff;\n    --accent-hover: #828fff;\n    --success: #27a644;\n    --emerald: #10b981;\n    --border-primary: #23252a;\n    --border-secondary: #34343a;\n    --border-subtle: rgba(255,255,255,0.05);\n    --border-standard: rgba(255,255,255,0.08);\n    --shadow-ring: rgba(0,0,0,0.2) 0px 0px 0px 1px;\n    --shadow-subtle: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;\n    --shadow-card: rgba(0,0,0,0.2) 0px 0px 0px 1px, rgba(0,0,0,0.3) 0px 2px 4px 0px;\n    --shadow-elevated: rgba(0,0,0,0.4) 0px 2px 4px 0px, rgba(0,0,0,0.2) 0px 0px 0px 1px;\n    --shadow-dialog: rgba(0,0,0,0) 0px 8px 2px 0px, rgba(0,0,0,0.01) 0px 5px 2px 0px, rgba(0,0,0,0.04) 0px 3px 2px 0px, rgba(0,0,0,0.07) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 0px 1px 0px;\n    --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--text-primary); color: var(--bg-page);\n    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(8,9,10,0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 14px; font-weight: 510; color: var(--text-primary); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 13px; font-weight: 510; color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    display: inline-block; background: var(--brand); color: #ffffff;\n    padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 510;\n    text-decoration: none; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: var(--accent); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 510; line-height: 1.00;\n    letter-spacing: -1.056px; color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.60; color: var(--text-tertiary); max-width: 560px; margin: 0 auto 32px; letter-spacing: -0.165px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-brand {\n    display: inline-block; background: var(--brand); color: #ffffff;\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 510;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .btn-brand:hover { background: var(--accent); }\n  .btn-ghost {\n    display: inline-block; background: rgba(255,255,255,0.02); color: var(--text-secondary);\n    padding: 10px 20px; border-radius: 6px; border: 1px solid var(--border-primary);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 510;\n    text-decoration: none; cursor: pointer; transition: border-color 0.15s;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .btn-ghost:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 510; line-height: 1.13; letter-spacing: -0.704px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-subtle); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 510; margin-bottom: 2px; letter-spacing: -0.13px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-quaternary); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 510; color: var(--text-tertiary); letter-spacing: -0.182px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-quaternary); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 510; color: var(--text-quaternary); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 24px; border: 1px solid var(--border-standard); transition: border-color 0.2s, background 0.2s; }\n  .card:hover { border-color: var(--border-secondary); background: rgba(255,255,255,0.04); }\n  .card h3 { font-size: 20px; font-weight: 590; letter-spacing: -0.24px; margin-bottom: 8px; }\n  .card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.60; letter-spacing: -0.165px; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 510; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 510; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: -0.182px; }\n  .form-input {\n    width: 100%; background: rgba(255,255,255,0.02); color: var(--text-secondary);\n    border: 1px solid var(--border-standard); padding: 10px 14px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }\n  .form-input--focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(113,112,255,0.25); }\n  .form-input--error { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229,72,77,0.25); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: rgba(255,255,255,0.02); color: var(--text-secondary);\n    border: 1px solid var(--border-standard); padding: 12px 14px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n    font-feature-settings: \"cv01\" 1, \"ss03\" 1;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-quaternary); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--brand); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--brand); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-quaternary); }\n  .radius-context { font-size: 10px; color: var(--text-quaternary); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--bg-elevated); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 510; letter-spacing: -0.182px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text-quaternary); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-quaternary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Building\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Linear\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Background Surfaces\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#08090a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Marketing Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#08090a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hero backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0f1011\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Panel Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0f1011\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Sidebar, panels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#191a1b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Level 3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#191a1b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Elevated surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#28282c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#28282c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text & Content\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f8f8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Primary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f8f8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings, primary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d0d6e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Secondary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d0d6e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8a8f98\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Tertiary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8a8f98\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#62666d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Quaternary Text\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#62666d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled, timestamps\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5e6ad2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Indigo\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5e6ad2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7170ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Violet\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7170ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links, active states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#828fff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#828fff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7a7fad\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Security Lavender\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7a7fad\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Security UI\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#27a644\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#27a644\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success, active\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#10b981\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Emerald\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#10b981\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badges, completion\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Dividers\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#23252a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Primary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#23252a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Strong borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#34343a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#34343a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Medium borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3e3e44\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Tertiary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3e3e44\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Lighter borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#141516\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Line Tint\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#141516\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semi-transparent Borders\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Subtle Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.05)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Default borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Standard Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.08)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:510; line-height:1.00; letter-spacing:-1.056px;\">Display Headline\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F 510 \u002F 1.00 \u002F -1.056px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:400; line-height:1.13; letter-spacing:-0.704px;\">Heading One\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 1 — 32px \u002F 400 \u002F 1.13 \u002F -0.704px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:400; line-height:1.33; letter-spacing:-0.288px;\">Heading Two\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 2 — 24px \u002F 400 \u002F 1.33 \u002F -0.288px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:590; line-height:1.33; letter-spacing:-0.24px;\">Heading Three\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 3 — 20px \u002F 590 \u002F 1.33 \u002F -0.24px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);\">Body Large — Linear helps streamline software projects, sprints, tasks, and bug tracking.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.60 \u002F -0.165px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:510; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 510 \u002F 1.50 \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.60; letter-spacing:-0.165px; color:var(--text-tertiary);\">Small — Secondary body content and descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small — 15px \u002F 400 \u002F 1.60 \u002F -0.165px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:510; line-height:1.50; letter-spacing:-0.182px;\">Caption — Sub-labels and category headers\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 510 \u002F 1.50 \u002F -0.182px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:510; line-height:1.50; letter-spacing:-0.13px; color:var(--text-secondary);\">Meta — Timestamps and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Meta — 13px \u002F 510 \u002F 1.50 \u002F -0.13px \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:510; line-height:1.40;\">Label — Small button text and tags\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label — 12px \u002F 510 \u002F 1.40 \u002F Inter Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);\">const issue = await linear.createIssue({title});\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body — 14px \u002F 400 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.40; text-transform:uppercase; color:var(--text-quaternary);\">ISSUE STATUS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Label — 12px \u002F 400 \u002F uppercase \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Brand\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(94,106,210,0.15); color:var(--accent); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;\">In Progress\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Status Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(16,185,129,0.15); color:var(--emerald); padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:510;\">Done\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(255,255,255,0.05); color:var(--text-primary); padding:2px 8px; border-radius:2px; font-size:10px; font-weight:510; border:1px solid rgba(255,255,255,0.05);\">v2.4\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Subtle Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--text-secondary); padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:510; border:1px solid var(--border-primary);\">Filter\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Pill Chip\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(94,106,210,0.15); color:var(--accent);\">Issues\u003C\u002Fdiv>\n      \u003Ch3>Issue Tracking\u003C\u002Fh3>\n      \u003Cp>Plan and track work across teams. Linear's issue tracker is designed for speed, with keyboard shortcuts for every action.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--border-secondary); background: rgba(255,255,255,0.04);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(16,185,129,0.15); color:var(--emerald);\">Cycles\u003C\u002Fdiv>\n      \u003Ch3>Sprint Cycles\u003C\u002Fh3>\n      \u003Cp>Time-boxed work periods that keep teams focused. Automatic rollover and progress tracking built in.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(113,112,255,0.15); color:var(--accent);\">Roadmaps\u003C\u002Fdiv>\n      \u003Ch3>Product Roadmaps\u003C\u002Fh3>\n      \u003Cp>Visualize direction and progress. Connect issues to projects and track milestones across your entire product.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Issue Title\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter issue title...\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Assignee\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"@alice\">\u003Cdiv class=\"form-state-label\">Focus (accent ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Priority\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid priority\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe the issue...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">35\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:22px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">22px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Circles\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.03) 0px 1.2px 0px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Micro-elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-standard);\">\u003Cdiv class=\"elevation-label\">Level 2: Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Border-defined depth\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-elevated);\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Floating elements\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--accent);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accent ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: inset rgba(0,0,0,0.2) 0px 0px 12px 0px;\">\u003Cdiv class=\"elevation-label\">Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Sunken panel\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Flinear.app\u002F\">linear.app\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Linear Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flinear.app\u002FDESIGN.md) extracted from the public [Linear](https:\u002F\u002Flinear.app\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flinear.app\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Linear design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Linear Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flinear.app\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Linear Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flinear.app\u002Fpreview-screenshot.png)\n",{"slug":173,"name":174,"category":90,"designMd":175,"previewHtml":176,"previewDarkHtml":177,"readme":178},"lovable","Lovable","# Design System Inspiration of Lovable\n\n## 1. Visual Theme & Atmosphere\n\nLovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.\n\nThe custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal \"tech company,\" Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses `ui-sans-serif, system-ui` as fallbacks, acknowledging that the custom typeface carries the brand personality.\n\nWhat makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries.\n\n**Key Characteristics:**\n- Warm parchment background (`#f7f4ed`) — not white, not beige, a deliberate cream that feels hand-selected\n- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes\n- Opacity-driven color system: all grays derived from `#1c1c1c` at varying transparency levels\n- Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`\n- Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements\n- Full-pill radius (`9999px`) used extensively for action buttons and icon containers\n- Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis\n- shadcn\u002Fui + Radix UI component primitives with Tailwind CSS utility styling\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Cream** (`#f7f4ed`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.\n- **Charcoal** (`#1c1c1c`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.\n- **Off-White** (`#fcfbf8`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.\n\n### Neutral Scale (Opacity-Based)\n- **Charcoal 100%** (`#1c1c1c`): Primary text, headings, dark surfaces.\n- **Charcoal 83%** (`rgba(28,28,28,0.83)`): Strong secondary text.\n- **Charcoal 82%** (`rgba(28,28,28,0.82)`): Body copy.\n- **Muted Gray** (`#5f5f5d`): Secondary text, descriptions, captions.\n- **Charcoal 40%** (`rgba(28,28,28,0.4)`): Interactive borders, button outlines.\n- **Charcoal 4%** (`rgba(28,28,28,0.04)`): Subtle hover backgrounds, micro-tints.\n- **Charcoal 3%** (`rgba(28,28,28,0.03)`): Barely-visible overlays, background depth.\n\n### Surface & Border\n- **Light Cream** (`#eceae4`): Card borders, dividers, image outlines. The warm divider line.\n- **Cream Surface** (`#f7f4ed`): Card backgrounds, section fills — same as page background for seamless integration.\n\n### Interactive\n- **Ring Blue** (`#3b82f6` at 50% opacity): `--tw-ring-color`, Tailwind focus ring.\n- **Focus Shadow** (`rgba(0,0,0,0.1) 0px 4px 12px`): Focus and active state shadow — soft, warm, diffused.\n\n### Inset Shadows\n- **Button Inset** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Camera Plain Variable`, with fallbacks: `ui-sans-serif, system-ui`\n- **Weight range**: 400 (body\u002Freading), 480 (special display), 600 (headings\u002Femphasis)\n- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |\n| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |\n| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |\n| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |\n| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |\n| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |\n| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |\n| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |\n| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |\n| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |\n| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |\n\n### Principles\n- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.\n- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.\n- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.\n- **Two weights, clear roles**: 400 (body\u002FUI\u002Flinks\u002Fbuttons) and 600 (headings\u002Femphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark (Inset Shadow)**\n- Background: `#1c1c1c`\n- Text: `#fcfbf8`\n- Padding: 8px 16px\n- Radius: 6px\n- Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`\n- Active: opacity 0.8\n- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow\n- Use: Primary CTA (\"Start Building\", \"Get Started\")\n\n**Ghost \u002F Outline**\n- Background: transparent\n- Text: `#1c1c1c`\n- Padding: 8px 16px\n- Radius: 6px\n- Border: `1px solid rgba(28,28,28,0.4)`\n- Active: opacity 0.8\n- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow\n- Use: Secondary actions (\"Log In\", \"Documentation\")\n\n**Cream Surface**\n- Background: `#f7f4ed`\n- Text: `#1c1c1c`\n- Padding: 8px 16px\n- Radius: 6px\n- No border\n- Active: opacity 0.8\n- Use: Tertiary actions, toolbar buttons\n\n**Pill \u002F Icon Button**\n- Background: `#f7f4ed`\n- Text: `#1c1c1c`\n- Radius: 9999px (full pill)\n- Shadow: same inset pattern as primary dark\n- Opacity: 0.5 (default), 0.8 (active)\n- Use: Additional actions, plan mode toggle, voice recording\n\n### Cards & Containers\n- Background: `#f7f4ed` (matches page)\n- Border: `1px solid #eceae4`\n- Radius: 12px (standard), 16px (featured), 8px (compact)\n- No box-shadow by default — borders define boundaries\n- Image cards: `1px solid #eceae4` with 12px radius\n\n### Inputs & Forms\n- Background: `#f7f4ed`\n- Text: `#1c1c1c`\n- Border: `1px solid #eceae4`\n- Radius: 6px\n- Focus: ring blue (`rgba(59,130,246,0.5)`) outline\n- Placeholder: `#5f5f5d`\n\n### Navigation\n- Clean horizontal nav on cream background, fixed\n- Logo\u002Fwordmark left-aligned (128.75 x 22px)\n- Links: Camera Plain 14–16px weight 400, `#1c1c1c` text\n- CTA: dark button with inset shadow, 6px radius\n- Mobile: hamburger menu with 6px radius button\n- Subtle border or no border on scroll\n\n### Links\n- Color: `#1c1c1c`\n- Decoration: underline (default)\n- Hover: primary accent (via CSS variable `hsl(var(--primary))`)\n- No color change on hover — decoration carries the interactive signal\n\n### Image Treatment\n- Showcase\u002Fportfolio images with `1px solid #eceae4` border\n- Consistent 12px border radius on all image containers\n- Soft gradient backgrounds behind hero content (warm multi-color wash)\n- Gallery-style presentation for template\u002Fproject showcases\n\n### Distinctive Components\n\n**AI Chat Input**\n- Large prompt input area with soft borders\n- Suggestion pills with `#eceae4` borders\n- Voice recording \u002F plan mode toggle buttons as pill shapes (9999px)\n- Warm, inviting input area — not clinical\n\n**Template Gallery**\n- Card grid showing project templates\n- Each card: image + title, `1px solid #eceae4` border, 12px radius\n- Hover: subtle shadow or border darkening\n- Category labels as text links\n\n**Stats Bar**\n- Large metrics: \"0M+\" pattern in 48px+ weight 600\n- Descriptive text below in muted gray\n- Horizontal layout with generous spacing\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px\n- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room\n\n### Grid & Container\n- Max content width: approximately 1200px (centered)\n- Hero: centered single-column with massive vertical padding (96px+)\n- Feature sections: 2–3 column grids\n- Full-width footer with multi-column link layout\n- Showcase sections with centered card grids\n\n### Whitespace Philosophy\n- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.\n- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.\n- **Section separation**: Footer uses `1px solid #eceae4` border and 16px radius container. Sections defined by generous spacing rather than border lines.\n\n### Border Radius Scale\n- Micro (4px): Small buttons, interactive elements\n- Standard (6px): Buttons, inputs, navigation menu\n- Comfortable (8px): Compact cards, divs\n- Card (12px): Standard cards, image containers, templates\n- Container (16px): Large containers, footer sections\n- Full Pill (9999px): Action pills, icon buttons, toggles\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream background | Page surface, most content |\n| Bordered (Level 1) | `1px solid #eceae4` | Cards, images, dividers |\n| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |\n| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active\u002Ffocus states |\n| Ring (Accessibility) | `rgba(59,130,246,0.5)` 2px ring | Keyboard focus on inputs |\n\n**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (`#eceae4`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (`rgba(0,0,0,0.1) 0px 4px 12px`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.\n\n### Decorative Depth\n- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible\n- Footer: gradient background with warm tones transitioning to the bottom\n- No harsh section dividers — spacing and background warmth handle transitions\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the warm cream background (`#f7f4ed`) as the page foundation — it's the brand's signature warmth\n- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)\n- Derive all grays from `#1c1c1c` at varying opacity levels for tonal unity\n- Use the inset shadow technique on dark buttons for tactile depth\n- Use `#eceae4` borders instead of shadows for card containment\n- Keep the weight system narrow: 400 for body\u002FUI, 600 for headings\n- Use full-pill radius (9999px) only for action pills and icon buttons\n- Apply opacity 0.8 on active states for responsive tactile feedback\n\n### Don't\n- Don't use pure white (`#ffffff`) as a page background — the cream is intentional\n- Don't use heavy box-shadows for cards — borders are the containment mechanism\n- Don't introduce saturated accent colors — the palette is intentionally warm-neutral\n- Don't use weight 700 (bold) — 600 is the maximum weight in the system\n- Don't apply 9999px radius on rectangular buttons — pills are for icon\u002Faction toggles\n- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators\n- Don't mix border styles — `#eceae4` for passive, `rgba(28,28,28,0.4)` for interactive\n- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C600px | Tight single column, reduced padding |\n| Mobile | 600–640px | Standard mobile layout |\n| Tablet Small | 640–700px | 2-column grids begin |\n| Tablet | 700–768px | Card grids expand |\n| Desktop Small | 768–1024px | Multi-column layouts |\n| Desktop | 1024–1280px | Full feature layout |\n| Large Desktop | 1280–1536px | Maximum content width, generous margins |\n\n### Touch Targets\n- Buttons: 8px 16px padding (comfortable touch)\n- Navigation: adequate spacing between items\n- Pill buttons: 9999px radius creates large tap-friendly targets\n- Menu toggle: 6px radius button with adequate sizing\n\n### Collapsing Strategy\n- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing\n- Navigation: horizontal links → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Template gallery: grid → stacked vertical cards\n- Stats bar: horizontal → stacked vertical\n- Footer: multi-column → stacked single column\n- Section spacing: 128px+ → 64px on mobile\n\n### Image Behavior\n- Template screenshots maintain `1px solid #eceae4` border at all sizes\n- 12px border radius preserved across breakpoints\n- Gallery images responsive with consistent aspect ratios\n- Hero gradient softens\u002Fsimplifies on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Charcoal (`#1c1c1c`)\n- Background: Cream (`#f7f4ed`)\n- Heading text: Charcoal (`#1c1c1c`)\n- Body text: Muted Gray (`#5f5f5d`)\n- Border: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)\n- Focus: `rgba(0,0,0,0.1) 0px 4px 12px`\n- Button text on dark: `#fcfbf8`\n\n### Example Component Prompts\n- \"Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius).\"\n- \"Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d.\"\n- \"Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening.\"\n- \"Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius.\"\n- \"Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap.\"\n\n### Iteration Guide\n1. Always use cream (`#f7f4ed`) as the base — never pure white\n2. Derive grays from `#1c1c1c` at opacity levels rather than using distinct hex values\n3. Use `#eceae4` borders for containment, not shadows\n4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px\n5. Two weights: 400 (everything except headings) and 600 (headings)\n6. The inset shadow on dark buttons is the signature detail — don't skip it\n7. Camera Plain Variable at weight 480 is for special display moments only\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Lovable (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;480;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cream: #f7f4ed;\n    --charcoal: #1c1c1c;\n    --off-white: #fcfbf8;\n    --border-light: #eceae4;\n    --muted: #5f5f5d;\n    --charcoal-40: rgba(28,28,28,0.4);\n    --charcoal-83: rgba(28,28,28,0.83);\n    --charcoal-04: rgba(28,28,28,0.04);\n    --charcoal-03: rgba(28,28,28,0.03);\n    --ring-blue: rgba(59,130,246,0.5);\n    --focus-shadow: rgba(0,0,0,0.1) 0px 4px 12px;\n    --shadow-inset: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px;\n    --font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--charcoal);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(247,244,237,0.88);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-light);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--charcoal); }\n  .nav-cta {\n    display: inline-block; background: var(--charcoal); color: var(--off-white);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n    box-shadow: var(--shadow-inset);\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 60px; font-weight: 600; line-height: 1.10;\n    letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--charcoal); color: var(--off-white);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n    box-shadow: var(--shadow-inset);\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--charcoal);\n    padding: 10px 20px; border-radius: 6px;\n    border: 1px solid var(--charcoal-40);\n    font-family: var(--font-primary); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-ghost:hover { opacity: 0.8; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }\n  .btn-cream {\n    display: inline-block; background: var(--cream); color: var(--charcoal);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;\n    text-decoration: none; border: none; cursor: pointer;\n  }\n  .btn-pill {\n    display: inline-flex; align-items: center; justify-content: center;\n    background: var(--cream); color: var(--charcoal);\n    width: 36px; height: 36px; border-radius: 9999px;\n    font-size: 14px; font-weight: 400; text-decoration: none;\n    box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: none;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }\n  .card:hover { border-color: var(--charcoal-40); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--muted); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--cream); color: var(--charcoal);\n    border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-primary); font-size: 14px; outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }\n  .form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }\n  .form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);\n    border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }\n  .radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }\n  .radius-context { font-size: 10px; color: var(--muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }\n  .footer a { color: var(--charcoal); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.9px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Building\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Lovable\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f4ed; border-bottom:1px solid #eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f4ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1c1c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1c1c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fcfbf8; border-bottom:1px solid #eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off-White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fcfbf8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button text on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale (Opacity-Based)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.83)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 83%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.83)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Strong secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5f5f5d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Muted Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5f5f5d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text, captions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.4)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 40%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.4)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Interactive borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.04); border-bottom:1px solid #eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 4%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.04)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.03); border-bottom:1px solid #eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 3%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.03)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eceae4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(59,130,246,0.5)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ring Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(59,130,246,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 60px \u002F 600 \u002F 1.10 \u002F -1.5px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 48px \u002F 600 \u002F 1.00 \u002F -1.2px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 36px \u002F 600 \u002F 1.10 \u002F -0.9px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.25;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 20px \u002F 400 \u002F 1.25 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.38;\">Body Large — Build something lovable. Create web applications with AI-powered development tools.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.38 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text for descriptions, paragraphs, and UI content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50;\">Button \u002F Link — Interactive text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button \u002F Link — 14px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);\">Caption — Metadata and small labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-cream\" href=\"#\">Settings\u003C\u002Fa>\u003Cdiv class=\"button-label\">Cream Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-pill\">+\u003C\u002Fbutton>\u003Cdiv class=\"button-label\">Pill Icon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Template\u003C\u002Fdiv>\n      \u003Ch3>Portfolio Website\u003C\u002Fh3>\n      \u003Cp>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--charcoal-40);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>AI Chat Application\u003C\u002Fh3>\n      \u003Cp>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Starter\u003C\u002Fdiv>\n      \u003Ch3>SaaS Dashboard\u003C\u002Fh3>\n      \u003Cp>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-lovable-app\">\u003Cdiv class=\"form-state-label\">Default (border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"lovable\u002Fmy-project\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:56px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">56\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:80px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">80\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Compact\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, cream bg\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light);\">\u003Cdiv class=\"elevation-label\">Level 1: Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #eceae4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);\">\u003Cdiv class=\"elevation-label\" style=\"color:var(--off-white);\">Level 2: Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\" style=\"color:rgba(252,251,248,0.6);\">Button inset shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);\">\u003Cdiv class=\"elevation-label\">Level 3: Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Focus shadow glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px rgba(59,130,246,0.5);\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accessibility ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Flovable.dev\u002F\">lovable.dev\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Lovable (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;480;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --cream: #1a1916;\n    --charcoal: #e8e5de;\n    --off-white: #1a1916;\n    --border-light: #2e2c28;\n    --muted: #9a9a98;\n    --charcoal-40: rgba(232,229,222,0.35);\n    --charcoal-83: rgba(232,229,222,0.83);\n    --charcoal-04: rgba(232,229,222,0.06);\n    --charcoal-03: rgba(232,229,222,0.04);\n    --ring-blue: rgba(59,130,246,0.5);\n    --focus-shadow: rgba(0,0,0,0.3) 0px 4px 12px;\n    --shadow-inset: rgba(255,255,255,0.1) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.4) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.2) 0px 1px 2px 0px;\n    --font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--charcoal);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(26,25,22,0.88);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-light);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--charcoal); }\n  .nav-cta {\n    display: inline-block; background: var(--charcoal); color: var(--off-white);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n    box-shadow: var(--shadow-inset);\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 60px; font-weight: 600; line-height: 1.10;\n    letter-spacing: -1.5px; color: var(--charcoal); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.38; color: var(--muted); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--charcoal); color: var(--off-white);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n    box-shadow: var(--shadow-inset);\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--charcoal);\n    padding: 10px 20px; border-radius: 6px;\n    border: 1px solid var(--charcoal-40);\n    font-family: var(--font-primary); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-ghost:hover { opacity: 0.8; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 36px; font-weight: 600; line-height: 1.10; letter-spacing: -0.9px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-light); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--muted); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 8px; }\n  .btn-cream {\n    display: inline-block; background: var(--cream); color: var(--charcoal);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 400;\n    text-decoration: none; border: 1px solid var(--border-light); cursor: pointer;\n  }\n  .btn-pill {\n    display: inline-flex; align-items: center; justify-content: center;\n    background: var(--cream); color: var(--charcoal);\n    width: 36px; height: 36px; border-radius: 9999px;\n    font-size: 14px; font-weight: 400; text-decoration: none;\n    box-shadow: var(--shadow-inset); opacity: 0.5; cursor: pointer; border: 1px solid var(--border-light);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--cream); border-radius: 12px; padding: 24px; border: 1px solid var(--border-light); transition: border-color 0.2s; }\n  .card:hover { border-color: var(--charcoal-40); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--muted); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--cream); color: var(--charcoal);\n    border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-primary); font-size: 14px; outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }\n  .form-input--focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ring-blue); }\n  .form-input--error { border-color: transparent; box-shadow: 0 0 0 2px #ef4444; }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--cream); color: var(--charcoal);\n    border: 1px solid var(--border-light); padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--charcoal); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--charcoal); margin-bottom: 6px; }\n  .radius-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; color: var(--muted); }\n  .radius-context { font-size: 10px; color: var(--muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--cream); border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--muted); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--muted); }\n  .footer a { color: var(--charcoal); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -0.9px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Building\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#e8e5de;color:#1a1916;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Lovable\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Start Building\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f7f4ed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f7f4ed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1c1c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1c1c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fcfbf8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off-White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fcfbf8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button text on dark\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale (Opacity-Based)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.83)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 83%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.83)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Strong secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5f5f5d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Muted Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5f5f5d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text, captions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.4)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 40%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.4)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Interactive borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.04); border-bottom:1px solid var(--border-light)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 4%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.04)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(28,28,28,0.03); border-bottom:1px solid var(--border-light)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Charcoal 3%\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(28,28,28,0.03)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eceae4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Cream\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eceae4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(59,130,246,0.5)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ring Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(59,130,246,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:60px; font-weight:600; line-height:1.10; letter-spacing:-1.5px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 60px \u002F 600 \u002F 1.10 \u002F -1.5px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-1.2px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 48px \u002F 600 \u002F 1.00 \u002F -1.2px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:600; line-height:1.10; letter-spacing:-0.9px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 36px \u002F 600 \u002F 1.10 \u002F -0.9px \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.25;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 20px \u002F 400 \u002F 1.25 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.38;\">Body Large — Build something lovable. Create web applications with AI-powered development tools.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.38 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text for descriptions, paragraphs, and UI content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50;\">Button \u002F Link — Interactive text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button \u002F Link — 14px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50; color:var(--muted);\">Caption — Metadata and small labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400 \u002F 1.50 \u002F Camera Plain Variable\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-cream\" href=\"#\">Settings\u003C\u002Fa>\u003Cdiv class=\"button-label\">Cream Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cbutton class=\"btn-pill\">+\u003C\u002Fbutton>\u003Cdiv class=\"button-label\">Pill Icon\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Template\u003C\u002Fdiv>\n      \u003Ch3>Portfolio Website\u003C\u002Fh3>\n      \u003Cp>A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--charcoal-40);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>AI Chat Application\u003C\u002Fh3>\n      \u003Cp>Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--charcoal-04); color:var(--charcoal);\">Starter\u003C\u002Fdiv>\n      \u003Ch3>SaaS Dashboard\u003C\u002Fh3>\n      \u003Cp>Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-lovable-app\">\u003Cdiv class=\"form-state-label\">Default (border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"lovable\u002Fmy-project\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:56px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">56\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:80px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">80\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Compact\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, cream bg\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light);\">\u003Cdiv class=\"elevation-label\">Level 1: Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #eceae4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--charcoal); color:var(--off-white); box-shadow: var(--shadow-inset);\">\u003Cdiv class=\"elevation-label\" style=\"color:var(--off-white);\">Level 2: Inset\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\" style=\"color:rgba(26,25,22,0.6);\">Button inset shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-light); box-shadow: var(--focus-shadow);\">\u003Cdiv class=\"elevation-label\">Level 3: Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Focus shadow glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px rgba(59,130,246,0.5);\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accessibility ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Flovable.dev\u002F\">lovable.dev\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Lovable Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flovable\u002FDESIGN.md) extracted from the public [Lovable](https:\u002F\u002Flovable.dev\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Flovable\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lovable design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Lovable Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flovable\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Lovable Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Flovable\u002Fpreview-screenshot.png)\n",{"slug":180,"name":181,"category":45,"designMd":182,"previewHtml":183,"previewDarkHtml":184,"readme":185},"minimax","Minimax","# Design System Inspiration of MiniMax\n\n## 1. Visual Theme & Atmosphere\n\nMiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.\n\nThe typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.\n\nWhat makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a \"gallery of AI capabilities\" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model\u002Fproduct feel like a self-contained creative tool.\n\n**Key Characteristics:**\n- White-dominant layout with colorful product card accents\n- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)\n- Pill buttons (9999px radius) for primary navigation and CTAs\n- Generous rounded cards (20px–24px radius) for product showcases\n- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)\n- Brand pink (`#ea5ec1`) as secondary accent\n- Near-black text (`#222222`, `#18181b`) on white backgrounds\n- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth\n- Dark footer section (`#181e25`) with product\u002Fcompany links\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color\n- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents\n- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent\n\n### Blue Scale (Primary)\n- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds\n- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights\n- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions\n- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states\n- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed\u002Factive states\n- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis\n\n### Text Colors\n- **Near Black** (`#222222`): `--col-text00`, primary text\n- **Dark** (`#18181b`): Button text, headings\n- **Charcoal** (`#181e25`): Dark surface text, footer background\n- **Dark Gray** (`#45515e`): `--col-text04`, secondary text\n- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels\n- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text\n\n### Surface & Background\n- **Pure White** (`#ffffff`): `--col-bg13`, primary background\n- **Light Gray** (`#f0f0f0`): Secondary button backgrounds\n- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay\n- **Border Light** (`#f2f3f5`): Subtle section dividers\n- **Border Gray** (`#e5e7eb`): Component borders\n\n### Semantic\n- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds\n\n### Shadows\n- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow\n- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow\n- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow\n- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow\n- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n- **Mid-tier**: `Poppins`\n- **Data\u002FTechnical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | DM Sans \u002F Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |\n| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |\n| Section Heading Alt | Roboto \u002F DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |\n| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |\n| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |\n| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |\n| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |\n| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |\n| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |\n| Nav\u002FLink | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |\n| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |\n| Caption | DM Sans \u002F Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |\n| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |\n| Micro | DM Sans \u002F Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |\n\n### Principles\n- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical\u002Fdata contexts.\n- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).\n- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.\n- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Pill Primary Dark**\n- Background: `#181e25`\n- Text: `#ffffff`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Primary CTA (\"Get Started\", \"Learn More\")\n\n**Pill Nav**\n- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)\n- Text: `#18181b`\n- Radius: 9999px (full pill)\n- Use: Navigation tabs, filter toggles\n\n**Pill White**\n- Background: `#ffffff`\n- Text: `rgba(24, 30, 37, 0.8)`\n- Radius: 9999px\n- Opacity: 0.5 (default state)\n- Use: Secondary nav, inactive tabs\n\n**Secondary Light**\n- Background: `#f0f0f0`\n- Text: `#333333`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Secondary actions\n\n### Product Cards\n- Background: Vibrant gradients (pink\u002Fpurple\u002Forange\u002Fblue)\n- Radius: 20px–24px (generous rounding)\n- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)\n- Content: Product name, model version, descriptive text\n- Each card has its own color palette matching the product identity\n\n### AI Product Cards (Matrix)\n- Background: white with subtle shadow\n- Radius: 13px–16px\n- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`\n- Icon\u002Fillustration centered above product name\n- Product name in DM Sans 14–16px weight 500\n\n### Links\n- **Primary**: `#18181b` or `#181e25`, underline on dark text\n- **Secondary**: `#8e8e93`, muted for less emphasis\n- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections\n\n### Navigation\n- Clean horizontal nav on white background\n- MiniMax logo left-aligned (red accent in logo)\n- DM Sans 14px weight 500 for nav items\n- Pill-shaped active indicators (9999px radius)\n- \"Login\" text link, minimal right-side actions\n- Sticky header behavior\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px\n\n### Grid & Container\n- Max content width centered on page\n- Product card grids: horizontal scroll or 3–4 column layout\n- Full-width white sections with contained content\n- Dark footer at full-width\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, stacked cards |\n| Tablet | 768–1024px | 2-column grids |\n| Desktop | >1024px | Full layout, horizontal card scrolls |\n\n### Whitespace Philosophy\n- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.\n- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct \"chapters\" of content.\n- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.\n\n### Border Radius Scale\n- Minimal (4px): Small tags, micro badges\n- Standard (8px): Buttons, small cards\n- Comfortable (11px–13px): Medium cards, panels\n- Generous (16px–20px): Large product cards\n- Large (22px–24px): Hero product cards, major containers\n- Pill (30px–32px): Badge pills, rounded panels\n- Full (9999px): Buttons, nav tabs\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White background, text blocks |\n| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |\n| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |\n| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |\n| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |\n\n**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use white as the dominant background — let product cards provide the color\n- Apply pill radius (9999px) for navigation tabs and toggle buttons\n- Use generous border radius (20px–24px) for product showcase cards\n- Employ the purple-tinted shadow for featured\u002Fhero product cards\n- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only\n- Use Outfit for display headings, DM Sans for everything functional\n- Maintain the universal 1.50 line-height across body text\n- Let colorful product illustrations\u002Fgradients serve as the primary visual interest\n\n### Don't\n- Don't add colored backgrounds to main content sections — white is structural\n- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core\n- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only\n- Don't mix more than one display font per section (Outfit OR Poppins, not both)\n- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text\n- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint\n- Don't use Roboto for headings — it's the data\u002Ftechnical context font only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, stacked product cards, hamburger nav |\n| Tablet | 768–1024px | 2-column product grids, condensed spacing |\n| Desktop | >1024px | Full horizontal card layouts, expanded spacing |\n\n### Collapsing Strategy\n- Hero: 80px → responsive scaling to ~40px on mobile\n- Product card grid: horizontal scroll → 2-column → single column stacked\n- Navigation: horizontal → hamburger menu\n- Footer: multi-column → stacked sections\n- Spacing: 64–80px gaps → 32–40px on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: `#ffffff` (primary), `#181e25` (dark\u002Ffooter)\n- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)\n- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)\n- Brand Pink: `#ea5ec1` (accent only)\n- Borders: `#e5e7eb`, `#f2f3f5`\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text).\"\n- \"Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area.\"\n- \"Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned.\"\n- \"Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500.\"\n- \"Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout.\"\n\n### Iteration Guide\n1. Start with white — color comes from product cards and illustrations only\n2. Pill buttons (9999px) for nav\u002Ftabs, standard radius (8px) for CTA buttons\n3. Purple-tinted shadows for featured cards, neutral shadows for everything else\n4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only\n5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable\n6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: MiniMax (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand Primary *\u002F\n    --brand-blue: #1456f0;\n    --sky-blue: #3daeff;\n    --brand-pink: #ea5ec1;\n\n    \u002F* Blue Scale *\u002F\n    --primary-200: #bfdbfe;\n    --primary-light: #60a5fa;\n    --primary-500: #3b82f6;\n    --primary-600: #2563eb;\n    --primary-700: #1d4ed8;\n    --brand-deep: #17437d;\n\n    \u002F* Text *\u002F\n    --text-near-black: #222222;\n    --text-dark: #18181b;\n    --text-charcoal: #181e25;\n    --text-dark-gray: #45515e;\n    --text-mid-gray: #8e8e93;\n    --text-light-gray: #5f5f5f;\n\n    \u002F* Surface *\u002F\n    --bg-white: #ffffff;\n    --bg-light-gray: #f0f0f0;\n    --border-light: #f2f3f5;\n    --border-gray: #e5e7eb;\n\n    \u002F* Shadows *\u002F\n    --shadow-standard: rgba(0, 0, 0, 0.08) 0px 4px 6px;\n    --shadow-soft-glow: rgba(0, 0, 0, 0.08) 0px 0px 22.576px;\n    --shadow-brand-purple: rgba(44, 30, 116, 0.16) 0px 0px 15px;\n    --shadow-brand-purple-offset: rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px;\n    --shadow-card-elevation: rgba(36, 36, 36, 0.08) 0px 12px 16px -4px;\n\n    \u002F* Fonts *\u002F\n    --font-primary: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-display: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-mid: 'Poppins', sans-serif;\n    --font-data: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-white);\n    color: var(--text-near-black);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: rgba(255,255,255,0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-light);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-dark);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .nav-links { display: flex; gap: 8px; align-items: center; }\n  .nav-links a {\n    color: var(--text-dark);\n    text-decoration: none;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    padding: 6px 16px;\n    border-radius: 9999px;\n    transition: background 0.2s, opacity 0.2s;\n    line-height: 1.50;\n  }\n  .nav-links a:hover { background: rgba(0,0,0,0.05); }\n  .nav-links a.active { background: rgba(0,0,0,0.05); }\n  .nav-cta {\n    background: var(--text-charcoal);\n    color: #fff;\n    padding: 8px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 100px 40px 80px;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -80px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 900px;\n    height: 500px;\n    background: radial-gradient(ellipse at center,\n      rgba(20,86,240,0.06) 0%,\n      rgba(59,130,246,0.04) 40%,\n      transparent 70%\n    );\n    filter: blur(40px);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 80px;\n    font-weight: 500;\n    line-height: 1.10;\n    color: var(--text-near-black);\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero p {\n    color: var(--text-dark-gray);\n    font-family: var(--font-primary);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.50;\n    max-width: 600px;\n    margin: 0 auto 40px;\n    position: relative;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    position: relative;\n  }\n  .btn-primary {\n    background: var(--text-charcoal);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n    transition: background 0.2s;\n  }\n  .btn-primary:hover { background: #222; }\n  .btn-secondary {\n    background: var(--bg-light-gray);\n    color: #333333;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n    transition: background 0.2s;\n  }\n  .btn-secondary:hover { background: #e5e5e5; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 64px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section + .section {\n    border-top: 1px solid var(--border-light);\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 31px;\n    font-weight: 600;\n    line-height: 1.50;\n    color: var(--text-near-black);\n    margin-bottom: 12px;\n  }\n  .section-desc {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-dark-gray);\n    margin-bottom: 40px;\n    max-width: 640px;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group-title {\n    font-family: var(--font-mid);\n    font-size: 18px;\n    font-weight: 500;\n    color: var(--text-near-black);\n    margin-bottom: 16px;\n    margin-top: 32px;\n    line-height: 1.50;\n  }\n  .color-group-title:first-of-type { margin-top: 0; }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 13px;\n    overflow: hidden;\n    border: 1px solid var(--border-gray);\n    background: var(--bg-white);\n  }\n  .color-swatch-block {\n    height: 80px;\n    width: 100%;\n  }\n  .color-swatch-info {\n    padding: 10px 12px;\n  }\n  .color-swatch-name {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-near-black);\n    line-height: 1.50;\n  }\n  .color-swatch-hex {\n    font-family: var(--font-data);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-mid-gray);\n    line-height: 1.50;\n  }\n  .color-swatch-role {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--text-dark-gray);\n    margin-top: 2px;\n    line-height: 1.50;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-row {\n    display: flex;\n    align-items: baseline;\n    gap: 32px;\n    padding: 20px 0;\n    border-bottom: 1px solid var(--border-light);\n  }\n  .type-row:last-child { border-bottom: none; }\n  .type-meta {\n    min-width: 200px;\n    flex-shrink: 0;\n  }\n  .type-label {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-mid-gray);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    line-height: 1.50;\n  }\n  .type-specs {\n    font-family: var(--font-data);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-dark-gray);\n    line-height: 1.50;\n    margin-top: 4px;\n  }\n  .type-sample {\n    flex: 1;\n    color: var(--text-near-black);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: center;\n  }\n  .button-showcase {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .button-showcase-label {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-mid-gray);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n  .btn-pill-primary-dark {\n    background: var(--text-charcoal);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-nav {\n    background: rgba(0,0,0,0.05);\n    color: var(--text-dark);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-white {\n    background: #fff;\n    color: rgba(24,30,37,0.8);\n    padding: 8px 20px;\n    border: 1px solid var(--border-gray);\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    opacity: 0.7;\n    line-height: 1.50;\n  }\n  .btn-secondary-light {\n    background: var(--bg-light-gray);\n    color: #333;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-small {\n    background: var(--text-charcoal);\n    color: #fff;\n    padding: 6px 14px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-blue {\n    background: var(--primary-500);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n  }\n  .card {\n    border-radius: 20px;\n    overflow: hidden;\n    background: var(--bg-white);\n    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 6px;\n    border: 1px solid var(--border-light);\n  }\n  .card-gradient {\n    height: 160px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .card-gradient-1 {\n    background: linear-gradient(135deg, #f472b6, #a855f7, #6366f1);\n  }\n  .card-gradient-2 {\n    background: linear-gradient(135deg, #fb923c, #f97316, #ef4444);\n  }\n  .card-gradient-3 {\n    background: linear-gradient(135deg, #60a5fa, #3b82f6, #1d4ed8);\n  }\n  .card-gradient-icon {\n    width: 56px;\n    height: 56px;\n    background: rgba(255,255,255,0.25);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 24px;\n    color: #fff;\n    backdrop-filter: blur(8px);\n  }\n  .card-body {\n    padding: 20px;\n  }\n  .card-body h3 {\n    font-family: var(--font-display);\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 1.71;\n    color: var(--text-near-black);\n    margin-bottom: 8px;\n  }\n  .card-body p {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-dark-gray);\n  }\n  .card-featured {\n    box-shadow: rgba(44, 30, 116, 0.16) 0px 0px 15px;\n    border: none;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    max-width: 700px;\n  }\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .form-group.full-width {\n    grid-column: 1 \u002F -1;\n  }\n  .form-label {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-near-black);\n    line-height: 1.50;\n  }\n  .form-input {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    padding: 10px 14px;\n    border: 1px solid var(--border-gray);\n    border-radius: 8px;\n    background: var(--bg-white);\n    color: var(--text-near-black);\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n    line-height: 1.50;\n  }\n  .form-input::placeholder {\n    color: var(--text-mid-gray);\n  }\n  .form-input:focus {\n    border-color: var(--primary-500);\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);\n  }\n  .form-input.error {\n    border-color: #ef4444;\n    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);\n  }\n  .form-error {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: #ef4444;\n    line-height: 1.50;\n  }\n  .form-hint {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: var(--text-mid-gray);\n    line-height: 1.50;\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    gap: 16px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--primary-500);\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n  .spacing-label {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-mid-gray);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 24px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-light-gray);\n    border: 2px solid var(--border-gray);\n  }\n  .radius-label {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-mid-gray);\n    text-align: center;\n  }\n  .radius-name {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-dark-gray);\n    text-align: center;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--bg-white);\n    border-radius: 16px;\n    padding: 32px 20px;\n    text-align: center;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    border: 1px solid var(--border-light);\n  }\n  .elevation-card.level-0 {\n    box-shadow: none;\n  }\n  .elevation-card.level-1 {\n    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 6px;\n  }\n  .elevation-card.level-2 {\n    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 22.576px;\n  }\n  .elevation-card.level-3 {\n    box-shadow: rgba(44, 30, 116, 0.16) 0px 0px 15px;\n    border: none;\n  }\n  .elevation-card.level-4 {\n    box-shadow: rgba(36, 36, 36, 0.08) 0px 12px 16px -4px;\n  }\n  .elevation-level {\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-near-black);\n  }\n  .elevation-name {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-dark-gray);\n  }\n  .elevation-desc {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--text-mid-gray);\n    line-height: 1.40;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    background: var(--text-charcoal);\n    color: rgba(255,255,255,0.8);\n    padding: 48px 40px 32px;\n    margin-top: 64px;\n  }\n  .footer-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .footer-brand {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    color: rgba(255,255,255,0.8);\n  }\n  .footer-note {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: rgba(255,255,255,0.5);\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">awesome-design-md\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\" class=\"active\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by MiniMax\u003C\u002Fh1>\n  \u003Cp>A clean, approachable design language that bridges consumer-friendly appeal with technical credibility through white-space-driven layouts and colorful product accents.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-actions\">\n    \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View Documentation\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">1. Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">MiniMax uses a white-dominant foundation with a blue brand spectrum and colorful product card accents. Purple-tinted shadows create subtle brand-colored depth.\u003C\u002Fp>\n\n  \u003Ch3 class=\"color-group-title\">Brand Primary\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#1456f0\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#1456f0\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary brand identity\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#3daeff\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Sky Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#3daeff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Lighter brand accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ea5ec1\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Pink\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ea5ec1\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary brand accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Blue Scale (Primary)\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#bfdbfe\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 200\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#bfdbfe\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Light blue backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#60a5fa\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#60a5fa\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Active states, highlights\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#3b82f6\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 500\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#3b82f6\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Standard blue actions\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#2563eb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 600\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#2563eb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#1d4ed8\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 700\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#1d4ed8\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Pressed\u002Factive states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#17437d\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Deep\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#17437d\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Deep blue emphasis\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Text Colors\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#18181b\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#18181b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Button text, headings\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#181e25\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#181e25\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Dark surfaces, footer\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#45515e\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#45515e\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#8e8e93\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#8e8e93\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Tertiary text, muted\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#5f5f5f\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#5f5f5f\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Helper text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom: 1px solid #e5e7eb;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0f0\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#f0f0f0\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f3f5\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#f2f3f5\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Subtle section dividers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e7eb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Border Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Component borders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#e8ffea\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Success Background\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#e8ffea\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Positive state backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">2. Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Multi-font system: DM Sans for UI, Outfit for display headings, Poppins for mid-tier, and Roboto for data\u002Ftechnical contexts. Weight 500 as default emphasis.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Display Hero\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Outfit -- 80px -- 500 -- 1.10\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:80px;font-weight:500;line-height:1.10;\">Hero Headline\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Section Heading\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Outfit -- 31px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:31px;font-weight:600;line-height:1.50;\">Section Heading\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Section Heading Alt\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Roboto \u002F DM Sans -- 32px -- 600 -- 0.88\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-data);font-size:32px;font-weight:600;line-height:0.88;\">Compact Header\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Card Title\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Outfit -- 28px -- 600 -- 1.71\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.71;\">Card Title\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Sub-heading\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Poppins -- 24px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-mid);font-size:24px;font-weight:500;line-height:1.50;\">Sub-heading Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Feature Label\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Poppins -- 18px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-mid);font-size:18px;font-weight:500;line-height:1.50;\">Feature Label Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body Large\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 20px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:20px;font-weight:500;line-height:1.50;\">Emphasized body text for important passages\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 16px -- 400 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:16px;font-weight:400;line-height:1.50;\">Standard body text for general content and descriptions across the interface.\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body Bold\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 16px -- 700 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:16px;font-weight:700;line-height:1.50;\">Strong emphasis for important content\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Nav \u002F Link\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 14px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:14px;font-weight:500;line-height:1.50;\">Navigation links and secondary text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Button Small\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 13px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:13px;font-weight:600;line-height:1.50;\">Compact Button Label\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Caption\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Poppins -- 13px -- 400 -- 1.70\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:13px;font-weight:400;line-height:1.70;\">Metadata and caption text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Small Label\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 12px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:12px;font-weight:600;line-height:1.50;\">TAGS AND BADGES\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Micro\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Outfit -- 10px -- 500 -- 1.80\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:10px;font-weight:500;line-height:1.80;\">Tiny annotations and micro text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">3. Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill buttons (9999px radius) for navigation and toggles, standard radius (8px) for CTA buttons. Weight 500 for default emphasis.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Primary Dark\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-primary-dark\">Get Started\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Nav\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-nav\">Products\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill White\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-white\">Overview\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Secondary Light\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-secondary-light\">Learn More\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Button Small\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-small\">Try Now\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Blue\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-blue\">Sign Up Free\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">4. Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Product cards use vibrant gradients as visual anchors against white canvas. Generous 20-24px border radius with purple-tinted brand shadows for featured elements.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-featured\">\n      \u003Cdiv class=\"card-gradient card-gradient-1\">\n        \u003Cdiv class=\"card-gradient-icon\">★\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>AI Chat\u003C\u002Fh3>\n        \u003Cp>Conversational AI powered by advanced language models for natural dialogue and creative content generation.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-gradient card-gradient-2\">\n        \u003Cdiv class=\"card-gradient-icon\">◈\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>Video Generation\u003C\u002Fh3>\n        \u003Cp>Transform text descriptions into high-quality video content with state-of-the-art generative models.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-gradient card-gradient-3\">\n        \u003Cdiv class=\"card-gradient-icon\">♬\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>Music Studio\u003C\u002Fh3>\n        \u003Cp>Create original music compositions with AI-driven arrangement and production tools.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">5. Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Clean form elements with 8px border radius, subtle borders, and blue focus rings. DM Sans at 16px for inputs, 14px for labels.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\" value=\"Jane Cooper\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@example.com\">\n      \u003Cspan class=\"form-hint\">We'll never share your email.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Focused Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Click to focus\" style=\"border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.15);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input error\" value=\"Invalid input\">\n      \u003Cspan class=\"form-error\">This field is required.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full-width\">\n      \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project or question...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">6. Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit 8px. Scale provides a consistent rhythm for layout and component spacing across the design system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;height:10px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:22px;height:11px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">11px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:28px;height:14px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">14px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:32px;height:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:48px;height:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:64px;height:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:80px;height:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:100px;height:50px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">50px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:128px;height:64px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">64px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:160px;height:80px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">80px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">7. Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From minimal 4px tags to full 9999px pill shapes. Generous rounding (20-24px) defines the product card aesthetic.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Minimal\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Standard\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:13px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Comfortable\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">13px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Generous\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Large\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Pill\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:9999px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Full\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">8. Elevation \u002F Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">MiniMax uses distinctive purple-tinted shadows for featured elements, connecting the shadow system to the blue brand identity. Neutral shadows at low opacity keep everything light and airy.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card level-0\">\n      \u003Cspan class=\"elevation-level\">Level 0\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Flat\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">No shadow. White backgrounds, text blocks.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-1\">\n      \u003Cspan class=\"elevation-level\">Level 1\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Subtle\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Standard cards, containers.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-2\">\n      \u003Cspan class=\"elevation-level\">Level 2\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Ambient\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Soft glow around elements.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-3\">\n      \u003Cspan class=\"elevation-level\">Level 3\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Brand Glow\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Featured product cards with purple tint.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-4\">\n      \u003Cspan class=\"elevation-level\">Level 4\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Elevated\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Lifted cards, hover states.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cdiv class=\"footer-inner\">\n    \u003Cspan class=\"footer-brand\">awesome-design-md\u003C\u002Fspan>\n    \u003Cspan class=\"footer-note\">Design system preview inspired by MiniMax\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: MiniMax (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand Primary *\u002F\n    --brand-blue: #1456f0;\n    --sky-blue: #3daeff;\n    --brand-pink: #ea5ec1;\n\n    \u002F* Blue Scale *\u002F\n    --primary-200: #bfdbfe;\n    --primary-light: #60a5fa;\n    --primary-500: #3b82f6;\n    --primary-600: #2563eb;\n    --primary-700: #1d4ed8;\n    --brand-deep: #17437d;\n\n    \u002F* Dark mode tokens *\u002F\n    --bg-page: #181e25;\n    --bg-card: #1f2731;\n    --bg-card-elevated: #252d38;\n    --bg-nav: rgba(24,30,37,0.92);\n    --bg-input: #1f2731;\n    --text-primary: #f0f2f5;\n    --text-secondary: #a0a8b4;\n    --text-muted: #6b7280;\n    --border-color: rgba(255,255,255,0.08);\n    --border-subtle: rgba(255,255,255,0.06);\n\n    \u002F* Shadows *\u002F\n    --shadow-standard: rgba(0, 0, 0, 0.25) 0px 4px 6px;\n    --shadow-soft-glow: rgba(0, 0, 0, 0.20) 0px 0px 22.576px;\n    --shadow-brand-purple: rgba(44, 30, 116, 0.30) 0px 0px 15px;\n    --shadow-brand-purple-offset: rgba(44, 30, 116, 0.22) 6.5px 2px 17.5px;\n    --shadow-card-elevation: rgba(0, 0, 0, 0.30) 0px 12px 16px -4px;\n\n    \u002F* Fonts *\u002F\n    --font-primary: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-display: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-mid: 'Poppins', sans-serif;\n    --font-data: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--primary-500);\n    color: #fff;\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 600;\n    padding: 6px 14px;\n    border-radius: 9999px;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 8px rgba(59,130,246,0.3);\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .nav-links { display: flex; gap: 8px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    padding: 6px 16px;\n    border-radius: 9999px;\n    transition: background 0.2s, color 0.2s;\n    line-height: 1.50;\n  }\n  .nav-links a:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }\n  .nav-links a.active { background: rgba(255,255,255,0.08); color: var(--text-primary); }\n  .nav-cta {\n    background: var(--primary-500);\n    color: #fff;\n    padding: 8px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 100px 40px 80px;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -80px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 900px;\n    height: 500px;\n    background: radial-gradient(ellipse at center,\n      rgba(20,86,240,0.12) 0%,\n      rgba(59,130,246,0.08) 40%,\n      transparent 70%\n    );\n    filter: blur(60px);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 80px;\n    font-weight: 500;\n    line-height: 1.10;\n    color: var(--text-primary);\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-family: var(--font-primary);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.50;\n    max-width: 600px;\n    margin: 0 auto 40px;\n    position: relative;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    position: relative;\n  }\n  .btn-primary {\n    background: var(--primary-500);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-secondary {\n    background: rgba(255,255,255,0.08);\n    color: var(--text-primary);\n    padding: 11px 20px;\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 64px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section + .section {\n    border-top: 1px solid var(--border-color);\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 31px;\n    font-weight: 600;\n    line-height: 1.50;\n    color: var(--text-primary);\n    margin-bottom: 12px;\n  }\n  .section-desc {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-secondary);\n    margin-bottom: 40px;\n    max-width: 640px;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group-title {\n    font-family: var(--font-mid);\n    font-size: 18px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n    margin-top: 32px;\n    line-height: 1.50;\n  }\n  .color-group-title:first-of-type { margin-top: 0; }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 13px;\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--bg-card);\n  }\n  .color-swatch-block {\n    height: 80px;\n    width: 100%;\n  }\n  .color-swatch-info {\n    padding: 10px 12px;\n  }\n  .color-swatch-name {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-primary);\n    line-height: 1.50;\n  }\n  .color-swatch-hex {\n    font-family: var(--font-data);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-muted);\n    line-height: 1.50;\n  }\n  .color-swatch-role {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    margin-top: 2px;\n    line-height: 1.50;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-row {\n    display: flex;\n    align-items: baseline;\n    gap: 32px;\n    padding: 20px 0;\n    border-bottom: 1px solid var(--border-color);\n  }\n  .type-row:last-child { border-bottom: none; }\n  .type-meta {\n    min-width: 200px;\n    flex-shrink: 0;\n  }\n  .type-label {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    line-height: 1.50;\n  }\n  .type-specs {\n    font-family: var(--font-data);\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    margin-top: 4px;\n  }\n  .type-sample {\n    flex: 1;\n    color: var(--text-primary);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: center;\n  }\n  .button-showcase {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .button-showcase-label {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n  .btn-pill-primary-dark {\n    background: var(--primary-500);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-nav {\n    background: rgba(255,255,255,0.08);\n    color: var(--text-primary);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-white {\n    background: rgba(255,255,255,0.06);\n    color: rgba(255,255,255,0.7);\n    padding: 8px 20px;\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-secondary-light {\n    background: var(--bg-card-elevated);\n    color: var(--text-primary);\n    padding: 11px 20px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-small {\n    background: var(--primary-600);\n    color: #fff;\n    padding: 6px 14px;\n    border: none;\n    border-radius: 8px;\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n  .btn-pill-blue {\n    background: var(--primary-500);\n    color: #fff;\n    padding: 11px 20px;\n    border: none;\n    border-radius: 9999px;\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n    line-height: 1.50;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n  }\n  .card {\n    border-radius: 20px;\n    overflow: hidden;\n    background: var(--bg-card);\n    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px;\n    border: 1px solid var(--border-color);\n  }\n  .card-gradient {\n    height: 160px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .card-gradient-1 {\n    background: linear-gradient(135deg, #f472b6, #a855f7, #6366f1);\n  }\n  .card-gradient-2 {\n    background: linear-gradient(135deg, #fb923c, #f97316, #ef4444);\n  }\n  .card-gradient-3 {\n    background: linear-gradient(135deg, #60a5fa, #3b82f6, #1d4ed8);\n  }\n  .card-gradient-icon {\n    width: 56px;\n    height: 56px;\n    background: rgba(255,255,255,0.20);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 24px;\n    color: #fff;\n    backdrop-filter: blur(8px);\n  }\n  .card-body {\n    padding: 20px;\n  }\n  .card-body h3 {\n    font-family: var(--font-display);\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 1.71;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .card-body p {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-secondary);\n  }\n  .card-featured {\n    box-shadow: rgba(44, 30, 116, 0.30) 0px 0px 15px;\n    border: 1px solid rgba(59,130,246,0.15);\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    max-width: 700px;\n  }\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .form-group.full-width {\n    grid-column: 1 \u002F -1;\n  }\n  .form-label {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n    line-height: 1.50;\n  }\n  .form-input {\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    padding: 10px 14px;\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    background: var(--bg-input);\n    color: var(--text-primary);\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n    line-height: 1.50;\n  }\n  .form-input::placeholder {\n    color: var(--text-muted);\n  }\n  .form-input:focus {\n    border-color: var(--primary-500);\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.20);\n  }\n  .form-input.error {\n    border-color: #ef4444;\n    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);\n  }\n  .form-error {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: #f87171;\n    line-height: 1.50;\n  }\n  .form-hint {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: var(--text-muted);\n    line-height: 1.50;\n  }\n  textarea.form-input {\n    resize: vertical;\n    min-height: 100px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    gap: 16px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--primary-500);\n    border-radius: 4px;\n    opacity: 0.85;\n  }\n  .spacing-label {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 24px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card-elevated);\n    border: 2px solid rgba(255,255,255,0.10);\n  }\n  .radius-label {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-muted);\n    text-align: center;\n  }\n  .radius-name {\n    font-family: var(--font-primary);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    text-align: center;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 16px;\n    padding: 32px 20px;\n    text-align: center;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    border: 1px solid var(--border-color);\n  }\n  .elevation-card.level-0 {\n    box-shadow: none;\n  }\n  .elevation-card.level-1 {\n    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 6px;\n  }\n  .elevation-card.level-2 {\n    box-shadow: rgba(0, 0, 0, 0.20) 0px 0px 22.576px;\n  }\n  .elevation-card.level-3 {\n    box-shadow: rgba(44, 30, 116, 0.30) 0px 0px 15px;\n    border: 1px solid rgba(59,130,246,0.12);\n  }\n  .elevation-card.level-4 {\n    box-shadow: rgba(0, 0, 0, 0.30) 0px 12px 16px -4px;\n  }\n  .elevation-level {\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n  }\n  .elevation-name {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n  }\n  .elevation-desc {\n    font-family: var(--font-data);\n    font-size: 11px;\n    font-weight: 400;\n    color: var(--text-muted);\n    line-height: 1.40;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    background: #111820;\n    color: rgba(255,255,255,0.8);\n    padding: 48px 40px 32px;\n    margin-top: 64px;\n    border-top: 1px solid var(--border-color);\n  }\n  .footer-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .footer-brand {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    color: rgba(255,255,255,0.8);\n  }\n  .footer-note {\n    font-family: var(--font-primary);\n    font-size: 13px;\n    font-weight: 400;\n    color: rgba(255,255,255,0.4);\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">awesome-design-md\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\" class=\"active\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by MiniMax\u003C\u002Fh1>\n  \u003Cp>A clean, approachable design language that bridges consumer-friendly appeal with technical credibility through white-space-driven layouts and colorful product accents.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-actions\">\n    \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View Documentation\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">1. Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">MiniMax uses a white-dominant foundation with a blue brand spectrum and colorful product card accents. Purple-tinted shadows create subtle brand-colored depth.\u003C\u002Fp>\n\n  \u003Ch3 class=\"color-group-title\">Brand Primary\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#1456f0\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#1456f0\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary brand identity\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#3daeff\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Sky Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#3daeff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Lighter brand accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ea5ec1\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Pink\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ea5ec1\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary brand accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Blue Scale (Primary)\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#bfdbfe\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 200\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#bfdbfe\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Light blue backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#60a5fa\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#60a5fa\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Active states, highlights\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#3b82f6\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 500\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#3b82f6\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Standard blue actions\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#2563eb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 600\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#2563eb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Hover states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#1d4ed8\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Primary 700\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#1d4ed8\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Pressed\u002Factive states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#17437d\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Brand Deep\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#17437d\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Deep blue emphasis\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Text Colors\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#18181b\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#18181b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Button text, headings\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#181e25\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#181e25\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Dark surfaces, footer\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#45515e\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#45515e\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#8e8e93\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#8e8e93\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Tertiary text, muted\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#5f5f5f\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#5f5f5f\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Helper text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0f0\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#f0f0f0\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f3f5\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#f2f3f5\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Subtle section dividers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e7eb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Border Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Component borders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#e8ffea\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Success Background\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#e8ffea\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Positive state backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">2. Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Multi-font system: DM Sans for UI, Outfit for display headings, Poppins for mid-tier, and Roboto for data\u002Ftechnical contexts. Weight 500 as default emphasis.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Display Hero\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Outfit -- 80px -- 500 -- 1.10\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:80px;font-weight:500;line-height:1.10;\">Hero Headline\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Section Heading\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Outfit -- 31px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:31px;font-weight:600;line-height:1.50;\">Section Heading\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Section Heading Alt\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Roboto \u002F DM Sans -- 32px -- 600 -- 0.88\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-data);font-size:32px;font-weight:600;line-height:0.88;\">Compact Header\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Card Title\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Outfit -- 28px -- 600 -- 1.71\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.71;\">Card Title\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Sub-heading\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Poppins -- 24px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-mid);font-size:24px;font-weight:500;line-height:1.50;\">Sub-heading Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Feature Label\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">Poppins -- 18px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-mid);font-size:18px;font-weight:500;line-height:1.50;\">Feature Label Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body Large\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 20px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:20px;font-weight:500;line-height:1.50;\">Emphasized body text for important passages\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 16px -- 400 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:16px;font-weight:400;line-height:1.50;\">Standard body text for general content and descriptions across the interface.\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Body Bold\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 16px -- 700 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:16px;font-weight:700;line-height:1.50;\">Strong emphasis for important content\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Nav \u002F Link\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 14px -- 500 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:14px;font-weight:500;line-height:1.50;\">Navigation links and secondary text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Button Small\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 13px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:13px;font-weight:600;line-height:1.50;\">Compact Button Label\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Caption\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Poppins -- 13px -- 400 -- 1.70\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:13px;font-weight:400;line-height:1.70;\">Metadata and caption text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Small Label\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans -- 12px -- 600 -- 1.50\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:12px;font-weight:600;line-height:1.50;\">TAGS AND BADGES\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-row\">\n    \u003Cdiv class=\"type-meta\">\n      \u003Cdiv class=\"type-label\">Micro\u003C\u002Fdiv>\n      \u003Cdiv class=\"type-specs\">DM Sans \u002F Outfit -- 10px -- 500 -- 1.80\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample\" style=\"font-family:var(--font-primary);font-size:10px;font-weight:500;line-height:1.80;\">Tiny annotations and micro text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">3. Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill buttons (9999px radius) for navigation and toggles, standard radius (8px) for CTA buttons. Weight 500 for default emphasis.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Primary Dark\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-primary-dark\">Get Started\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Nav\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-nav\">Products\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill White\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-white\">Overview\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Secondary Light\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-secondary-light\">Learn More\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Button Small\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-small\">Try Now\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cspan class=\"button-showcase-label\">Pill Blue\u003C\u002Fspan>\n      \u003Cbutton class=\"btn-pill-blue\">Sign Up Free\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">4. Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Product cards use vibrant gradients as visual anchors against white canvas. Generous 20-24px border radius with purple-tinted brand shadows for featured elements.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-featured\">\n      \u003Cdiv class=\"card-gradient card-gradient-1\">\n        \u003Cdiv class=\"card-gradient-icon\">★\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>AI Chat\u003C\u002Fh3>\n        \u003Cp>Conversational AI powered by advanced language models for natural dialogue and creative content generation.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-gradient card-gradient-2\">\n        \u003Cdiv class=\"card-gradient-icon\">◈\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>Video Generation\u003C\u002Fh3>\n        \u003Cp>Transform text descriptions into high-quality video content with state-of-the-art generative models.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-gradient card-gradient-3\">\n        \u003Cdiv class=\"card-gradient-icon\">♬\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch3>Music Studio\u003C\u002Fh3>\n        \u003Cp>Create original music compositions with AI-driven arrangement and production tools.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">5. Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Clean form elements with 8px border radius, subtle borders, and blue focus rings. DM Sans at 16px for inputs, 14px for labels.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\" value=\"Jane Cooper\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@example.com\">\n      \u003Cspan class=\"form-hint\">We'll never share your email.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Focused Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Click to focus\" style=\"border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.20);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input error\" value=\"Invalid input\">\n      \u003Cspan class=\"form-error\">This field is required.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full-width\">\n      \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project or question...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">6. Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit 8px. Scale provides a consistent rhythm for layout and component spacing across the design system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;height:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;height:10px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:22px;height:11px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">11px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:28px;height:14px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">14px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:32px;height:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:48px;height:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:64px;height:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:80px;height:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:100px;height:50px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">50px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:128px;height:64px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">64px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:160px;height:80px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">80px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">7. Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From minimal 4px tags to full 9999px pill shapes. Generous rounding (20-24px) defines the product card aesthetic.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Minimal\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Standard\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:13px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Comfortable\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">13px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Generous\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Large\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Pill\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:9999px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-name\">Full\u003C\u002Fspan>\n      \u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">8. Elevation \u002F Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">MiniMax uses distinctive purple-tinted shadows for featured elements, connecting the shadow system to the blue brand identity. Neutral shadows at low opacity keep everything feeling light and airy.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card level-0\">\n      \u003Cspan class=\"elevation-level\">Level 0\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Flat\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">No shadow. White backgrounds, text blocks.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-1\">\n      \u003Cspan class=\"elevation-level\">Level 1\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Subtle\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Standard cards, containers.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-2\">\n      \u003Cspan class=\"elevation-level\">Level 2\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Ambient\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Soft glow around elements.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-3\">\n      \u003Cspan class=\"elevation-level\">Level 3\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Brand Glow\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Featured product cards with purple tint.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card level-4\">\n      \u003Cspan class=\"elevation-level\">Level 4\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-name\">Elevated\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">Lifted cards, hover states.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cdiv class=\"footer-inner\">\n    \u003Cspan class=\"footer-brand\">awesome-design-md\u003C\u002Fspan>\n    \u003Cspan class=\"footer-note\">Design system preview inspired by MiniMax\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# Minimax Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fminimax\u002FDESIGN.md) extracted from the public [MiniMax](https:\u002F\u002Fminimax.io\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fminimax\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Minimax design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Minimax Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fminimax\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Minimax Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fminimax\u002Fpreview-screenshot.png)\n",{"slug":187,"name":188,"category":90,"designMd":189,"previewHtml":190,"previewDarkHtml":191,"readme":192},"mintlify","Mintlify","# Design System Inspiration of Mintlify\n\n## 1. Visual Theme & Atmosphere\n\nMintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#ffffff`) background, near-black (`#0d0d0d`) text, and a signature green brand accent (`#18E299`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers \"we care about your developer experience\" in every pixel.\n\nThe Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page.\n\nWhat distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed.\n\n**Key Characteristics:**\n- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable\n- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice\n- Brand green (`#18E299`) used sparingly — CTAs, hover states, focus rings, and accent touches\n- Atmospheric gradient hero with cloud-like green-white wash\n- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills\n- Subtle 5% opacity borders (`rgba(0,0,0,0.05)`) creating barely-there separation\n- 8px base spacing system with generous section padding (48px–96px)\n- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#0d0d0d`): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.\n- **Pure White** (`#ffffff`): Page background, card surfaces, input backgrounds.\n- **Brand Green** (`#18E299`): The signature accent — CTAs, links on hover, focus rings, brand identity.\n\n### Secondary Accents\n- **Brand Green Light** (`#d4fae8`): Tinted green surface for badges, hover states, subtle backgrounds.\n- **Brand Green Deep** (`#0fa76e`): Darker green for text on light-green badges, hover states on brand elements.\n- **Warm Amber** (`#c37d0d`): Warning states, caution badges — `--twoslash-warn-bg`.\n- **Soft Blue** (`#3772cf`): Tag backgrounds, informational annotations — `--twoslash-tag-bg`.\n- **Error Red** (`#d45656`): Error states, destructive actions — `--twoslash-error-bg`.\n\n### Neutral Scale\n- **Gray 900** (`#0d0d0d`): Primary heading text, nav links.\n- **Gray 700** (`#333333`): Secondary text, descriptions, body copy.\n- **Gray 500** (`#666666`): Tertiary text, muted labels.\n- **Gray 400** (`#888888`): Placeholder text, disabled states, code annotations.\n- **Gray 200** (`#e5e5e5`): Borders, dividers, card outlines.\n- **Gray 100** (`#f5f5f5`): Subtle surface backgrounds, hover states.\n- **Gray 50** (`#fafafa`): Near-white surface tint.\n\n### Interactive\n- **Link Default** (`#0d0d0d`): Links match text color, relying on underline\u002Fcontext.\n- **Link Hover** (`#18E299`): Brand green on hover — `var(--color-brand)`.\n- **Focus Ring** (`#18E299`): Brand green focus outline for inputs and interactive elements.\n\n### Surface & Overlay\n- **Card Background** (`#ffffff`): White cards on white background, separated by borders.\n- **Border Subtle** (`rgba(0,0,0,0.05)`): 5% black opacity borders — the primary separation mechanism.\n- **Border Medium** (`rgba(0,0,0,0.08)`): Slightly stronger borders for interactive elements.\n- **Input Border Focus** (`var(--color-brand)`): Green ring on focused inputs.\n\n### Shadows & Depth\n- **Card Shadow** (`rgba(0,0,0,0.03) 0px 2px 4px`): Barely-there ambient shadow for subtle lift.\n- **Button Shadow** (`rgba(0,0,0,0.06) 0px 1px 2px`): Micro-shadow for button depth.\n- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter`, with fallback: `Inter Fallback, system-ui, -apple-system, sans-serif`\n- **Monospace**: `Geist Mono`, with fallback: `Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |\n| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |\n| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |\n| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |\n| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |\n| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |\n| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |\n| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions |\n| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | `text-transform: uppercase`, section labels |\n| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text |\n| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | `text-transform: uppercase`, technical labels |\n| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | `text-transform: uppercase`, status badges |\n| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | `text-transform: uppercase`, tiny labels |\n\n### Principles\n- **Tight tracking at display sizes**: Inter at 40–64px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient — documentation headings, not billboard copy.\n- **Relaxed reading at body sizes**: 16–18px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort.\n- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical\u002Fcode contexts. The boundary is strict — no mixing.\n- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px–0.65px) as a clear visual delimiter between content types.\n- **Three weights**: 400 (body\u002Freading), 500 (UI\u002Fnavigation\u002Femphasis), 600 (headings\u002Ftitles). No bold (700) in the system.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Brand (Full-round)**\n- Background: `#0d0d0d` (near-black)\n- Text: `#ffffff`\n- Padding: 8px 24px\n- Radius: 9999px (full pill)\n- Font: Inter 15px weight 500\n- Shadow: `rgba(0,0,0,0.06) 0px 1px 2px`\n- Hover: opacity 0.9\n- Use: Primary CTA (\"Get Started\", \"Start Building\")\n\n**Secondary \u002F Ghost (Full-round)**\n- Background: `#ffffff`\n- Text: `#0d0d0d`\n- Padding: 4.5px 12px\n- Radius: 9999px (full pill)\n- Border: `1px solid rgba(0,0,0,0.08)`\n- Font: Inter 15px weight 500\n- Hover: opacity 0.9\n- Use: Secondary actions (\"Request Demo\", \"View Docs\")\n\n**Transparent \u002F Nav Button**\n- Background: transparent\n- Text: `#0d0d0d`\n- Padding: 5px 6px\n- Radius: 8px\n- Border: none or `1px solid rgba(0,0,0,0.05)`\n- Use: Navigation items, icon buttons\n\n**Brand Accent Button**\n- Background: `#18E299`\n- Text: `#0d0d0d`\n- Padding: 8px 24px\n- Radius: 9999px\n- Use: Special promotional CTAs\n\n### Cards & Containers\n\n**Standard Card**\n- Background: `#ffffff`\n- Border: `1px solid rgba(0,0,0,0.05)`\n- Radius: 16px\n- Padding: 24px\n- Shadow: `rgba(0,0,0,0.03) 0px 2px 4px`\n- Hover: subtle border darkening to `rgba(0,0,0,0.08)`\n\n**Featured Card**\n- Background: `#ffffff`\n- Border: `1px solid rgba(0,0,0,0.05)`\n- Radius: 24px\n- Padding: 32px\n- Inner content areas may have their own 16px radius containers\n\n**Logo\u002FTrust Card**\n- Background: `#fafafa` or `#ffffff`\n- Border: `1px solid rgba(0,0,0,0.05)`\n- Radius: 16px\n- Centered logo\u002Ficon with consistent sizing\n\n### Inputs & Forms\n\n**Email Input**\n- Background: transparent or `#ffffff`\n- Text: `#0d0d0d`\n- Padding: 0px 12px (height controlled by line-height)\n- Border: `1px solid rgba(0,0,0,0.08)`\n- Radius: 9999px (full pill, matching buttons)\n- Focus: `1px solid var(--color-brand)` + `outline: 1px solid var(--color-brand)`\n- Placeholder: `#888888`\n\n### Navigation\n- Clean horizontal nav on white, sticky with backdrop blur\n- Brand logotype left-aligned\n- Links: Inter 14–15px weight 500, `#0d0d0d` text\n- Hover: color shifts to brand green `var(--color-brand)`\n- CTA: dark pill button right-aligned (\"Get Started\")\n- Mobile: hamburger menu collapse at 768px\n\n### Image Treatment\n- Product screenshots with subtle 1px borders\n- Rounded containers: 16px–24px radius\n- Atmospheric gradient backgrounds behind hero images\n- Cloud\u002Fsky imagery with soft green tinting\n\n### Distinctive Components\n\n**Atmospheric Hero**\n- Full-width gradient wash: soft green-to-white cloud-like gradient\n- Centered headline with tight tracking\n- Subtitle in muted gray\n- Dual CTA buttons (dark primary + ghost secondary)\n- The gradient creates a sense of elevation and intelligence\n\n**Trust Bar \u002F Logo Grid**\n- \"Loved by your favorite companies\" section\n- Company logos in muted grayscale\n- Grid or horizontal layout with consistent sizing\n- Subtle border separation between logos\n\n**Feature Cards with Icons**\n- Icon or illustration at top\n- Title at 20px weight 600\n- Description at 14–16px in gray\n- Consistent padding and border treatment\n- Grid layout: 2–3 columns on desktop\n\n**CTA Footer Section**\n- Dark or gradient background\n- Large headline: \"Make documentation your winning advantage\"\n- Email input with pill styling\n- Brand green accent on CTAs\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px\n- Section padding: 48px–96px vertical\n- Card padding: 24px–32px\n- Component gaps: 8px–16px\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (96px+)\n- Feature sections: 2–3 column CSS Grid for cards\n- Full-width sections with contained content\n- Consistent horizontal padding: 24px (mobile) to 32px (desktop)\n\n### Whitespace Philosophy\n- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort.\n- **Sections as chapters**: Each feature section is a self-contained unit with 48px–96px vertical padding, creating clear \"chapter breaks.\"\n- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1–2 key messages per section with supporting imagery.\n\n### Border Radius Scale\n- Small (4px): Inline code, small tags, tooltips\n- Medium (8px): Nav buttons, transparent buttons, small containers\n- Standard (16px): Cards, content containers, image wrappers\n- Large (24px): Featured cards, hero containers, section panels\n- Full Pill (9999px): Buttons, inputs, badges, pills — the signature shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Subtle Border (Level 1) | `1px solid rgba(0,0,0,0.05)` | Standard card borders, dividers |\n| Medium Border (Level 1b) | `1px solid rgba(0,0,0,0.08)` | Interactive elements, input borders |\n| Ambient Shadow (Level 2) | `rgba(0,0,0,0.03) 0px 2px 4px` | Cards with subtle lift |\n| Button Shadow (Level 2b) | `rgba(0,0,0,0.06) 0px 1px 2px` | Button micro-depth |\n| Focus Ring (Accessibility) | `1px solid #18E299` outline | Focused inputs, active interactive elements |\n\n**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (`0.03 opacity, 2px blur, 4px spread`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability.\n\n### Decorative Depth\n- Hero gradient: atmospheric green-white cloud gradient behind hero content\n- No background color alternation — white on white throughout\n- Depth comes from border opacity variation (5% → 8%) and whitespace\n\n## 7. Dark Mode\n\n### Color Inversions\n- **Background**: `#0d0d0d` (near-black)\n- **Text Primary**: `#ededed` (near-white)\n- **Text Secondary**: `#a0a0a0` (muted gray)\n- **Brand Green**: `#18E299` (unchanged — the green works on both backgrounds)\n- **Border**: `rgba(255,255,255,0.08)` (white at 8% opacity)\n- **Card Background**: `#141414` (slightly lighter than page)\n- **Shadow**: `rgba(0,0,0,0.4) 0px 2px 4px` (stronger shadow for contrast)\n\n### Key Adjustments\n- Buttons invert: white background dark text becomes dark background light text\n- Badge backgrounds shift to deeper tones with lighter text\n- Focus ring remains brand green\n- Hero gradient shifts to dark-tinted green atmospheric wash\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, stacked layout, hamburger nav |\n| Tablet | 768–1024px | Two-column grids begin, expanded padding |\n| Desktop | >1024px | Full layout, 3-column grids, maximum content width |\n\n### Touch Targets\n- Buttons with full-pill shape have comfortable 8px+ vertical padding\n- Navigation links spaced with adequate 16px+ gaps\n- Mobile menu provides full-width tap targets\n\n### Collapsing Strategy\n- Hero: 64px → 40px headline, maintains tight tracking proportionally\n- Navigation: horizontal links + CTA → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Section spacing: 96px → 48px on mobile\n- Footer: multi-column → stacked single column\n- Trust bar: grid → horizontal scroll or stacked\n\n### Image Behavior\n- Product screenshots maintain aspect ratio with responsive containers\n- Hero gradient simplifies on mobile\n- Full-width sections maintain edge-to-edge treatment\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Near Black (`#0d0d0d`)\n- Background: Pure White (`#ffffff`)\n- Heading text: Near Black (`#0d0d0d`)\n- Body text: Gray 700 (`#333333`)\n- Border: `rgba(0,0,0,0.05)` (5% opacity)\n- Brand accent: Green (`#18E299`)\n- Link hover: Brand Green (`#18E299`)\n- Focus ring: Brand Green (`#18E299`)\n\n### Example Component Prompts\n- \"Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius).\"\n- \"Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666.\"\n- \"Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase.\"\n- \"Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05).\"\n- \"Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px.\"\n\n### Iteration Guide\n1. Always use full-pill radius (9999px) for buttons and inputs — this is Mintlify's signature shape\n2. Keep borders at 5% opacity (`rgba(0,0,0,0.05)`) — stronger borders break the airy feeling\n3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px\n4. Three weights only: 400 (read), 500 (interact), 600 (announce)\n5. Brand green (`#18E299`) is used sparingly — CTAs and hover states only, never for decorative fills\n6. Geist Mono uppercase for technical labels, Inter for everything else\n7. Section padding is generous: 64px–96px on desktop, 48px on mobile\n8. No gray background sections — white throughout, separation through borders and whitespace\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Mintlify (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #0d0d0d;\n    --white: #ffffff;\n    --gray-50: #fafafa;\n    --gray-100: #f5f5f5;\n    --gray-200: #e5e5e5;\n    --gray-400: #888888;\n    --gray-500: #666666;\n    --gray-700: #333333;\n    --brand: #18E299;\n    --brand-light: #d4fae8;\n    --brand-deep: #0fa76e;\n    --warn: #c37d0d;\n    --info-blue: #3772cf;\n    --error: #d45656;\n    --border-subtle: rgba(0,0,0,0.05);\n    --border-medium: rgba(0,0,0,0.08);\n    --shadow-ambient: rgba(0,0,0,0.03) 0px 2px 4px;\n    --shadow-button: rgba(0,0,0,0.06) 0px 1px 2px;\n    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(255,255,255,0.88);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--brand); }\n  .nav-cta {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 7px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.88; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 96px 32px 80px; text-align: center;\n    background: linear-gradient(180deg, #e8faf1 0%, #f0fdf6 30%, #ffffff 100%);\n    position: relative;\n  }\n  .hero h1 {\n    font-size: 56px; font-weight: 600; line-height: 1.10;\n    letter-spacing: -1.28px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 10px 24px; border-radius: 9999px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n    box-shadow: var(--shadow-button);\n  }\n  .btn-dark:hover { opacity: 0.88; }\n  .btn-ghost {\n    display: inline-block; background: var(--white); color: var(--black);\n    padding: 10px 24px; border-radius: 9999px; border: 1px solid var(--border-medium);\n    font-family: var(--font-sans); font-size: 15px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: border-color 0.15s;\n  }\n  .btn-ghost:hover { border-color: var(--gray-400); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label {\n    font-family: var(--font-mono); font-size: 12px; font-weight: 500;\n    color: var(--gray-400); text-transform: uppercase; margin-bottom: 8px;\n    letter-spacing: 0.6px;\n  }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.20; letter-spacing: -0.8px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-subtle); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n  .btn-brand {\n    display: inline-block; background: var(--brand); color: var(--black);\n    padding: 10px 24px; border-radius: 9999px; font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n  }\n  .btn-pill-badge {\n    display: inline-block; background: var(--brand-light); color: var(--brand-deep);\n    padding: 4px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: var(--white); border-radius: 16px; padding: 24px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ambient);\n    transition: border-color 0.2s;\n  }\n  .card:hover { border-color: var(--border-medium); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }\n  .card-badge {\n    display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;\n    text-transform: uppercase; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px;\n    letter-spacing: 0.5px;\n  }\n\n  \u002F* FEATURED CARD *\u002F\n  .card-featured {\n    background: var(--white); border-radius: 24px; padding: 32px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ambient);\n  }\n  .card-featured h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.24px; margin-bottom: 8px; }\n  .card-featured p { font-size: 16px; color: var(--gray-500); line-height: 1.50; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: 1px solid var(--border-medium); padding: 10px 16px; border-radius: 9999px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }\n  .form-input--focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }\n  .form-input--error { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: 1px solid var(--border-medium); padding: 12px 16px; border-radius: 16px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--brand); border-radius: 4px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 16px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--brand); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; letter-spacing: -0.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Mintlify\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0d0d0d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d0d0d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#18E299\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#18E299\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent, CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand Extended\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d4fae8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d4fae8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badge backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0fa76e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Deep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0fa76e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badge text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1ba673\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Annotate Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1ba673\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Code annotations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3772cf\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Info Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3772cf\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tags, annotations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c37d0d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warn Amber\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c37d0d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warnings, caution\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d45656\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d45656\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Errors, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#333333\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#333333\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#666666\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#666666\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#888888\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#888888\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 200\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e5e5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f5f5f5; border-bottom:1px solid #e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f5f5f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fafafa; border-bottom:1px solid #e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Near-white tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:600; line-height:1.10; letter-spacing:-1.28px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 56px \u002F 600 \u002F 1.10 \u002F -1.28px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.8px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 40px \u002F 600 \u002F 1.10 \u002F -0.8px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.30; letter-spacing:-0.24px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 24px \u002F 500 \u002F 1.30 \u002F -0.24px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.30; letter-spacing:-0.2px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 20px \u002F 600 \u002F 1.30 \u002F -0.2px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.50;\">Body Large — The intelligent knowledge platform that powers your documentation, APIs, and guides.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text for documentation and content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.50;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 15px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.50;\">Link \u002F Caption\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link \u002F Caption — 14px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.65px;\">Section Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label Uppercase — 13px \u002F 500 \u002F uppercase \u002F 0.65px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.6px;\">MONO TECHNICAL LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Code — 12px \u002F 500 \u002F uppercase \u002F 0.6px \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:10px; font-weight:500; line-height:1.50; text-transform:uppercase;\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Micro — 10px \u002F 500 \u002F uppercase \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Brand Accent\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-pill-badge\">Documentation\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(55,114,207,0.12); color:#3772cf; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;\">Info\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Info Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(195,125,13,0.12); color:#c37d0d; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Warning Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--brand-light); color:var(--brand-deep);\">Docs\u003C\u002Fdiv>\n      \u003Ch3>Intelligent Search\u003C\u002Fh3>\n      \u003Cp>AI-powered search that understands your documentation and delivers precise answers to developer questions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(55,114,207,0.1); color:#3772cf;\">API\u003C\u002Fdiv>\n      \u003Ch3>API Reference\u003C\u002Fh3>\n      \u003Cp>Auto-generated API documentation with interactive examples, authentication flows, and code snippets.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(195,125,13,0.1); color:#c37d0d;\">Analytics\u003C\u002Fdiv>\n      \u003Ch3>Documentation Analytics\u003C\u002Fh3>\n      \u003Cp>Track what developers search for, which pages perform best, and where they get stuck.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:32px;\">\n    \u003Cdiv class=\"color-group-label\">Featured Card (24px radius)\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-featured\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--brand-light); color:var(--brand-deep);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>The Intelligent Knowledge Platform\u003C\u002Fh3>\n      \u003Cp>Build beautiful documentation that powers your developer community. AI-enhanced, automatically updated, and always in sync with your codebase.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default (pill shape)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Organization\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Mintlify\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Code, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nav buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle); box-shadow: var(--shadow-ambient);\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">5% border + ambient\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-medium); box-shadow: var(--shadow-ambient);\">\u003Cdiv class=\"elevation-label\">Level 2: Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">8% border + ambient\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-medium); box-shadow: rgba(0,0,0,0.06) 0px 4px 12px;\">\u003Cdiv class=\"elevation-label\">Level 3: Raised\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Stronger shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--brand); box-shadow: 0 0 0 1px var(--brand);\">\u003Cdiv class=\"elevation-label\">Focus Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Brand green ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fmintlify.com\u002F\">mintlify.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Mintlify (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #ededed;\n    --white: #0d0d0d;\n    --gray-50: #141414;\n    --gray-100: #1a1a1a;\n    --gray-200: #2a2a2a;\n    --gray-400: #666666;\n    --gray-500: #888888;\n    --gray-700: #a0a0a0;\n    --brand: #18E299;\n    --brand-light: #0d3d2a;\n    --brand-deep: #5eedb8;\n    --warn: #e6a733;\n    --info-blue: #5b94e0;\n    --error: #e06b6b;\n    --border-subtle: rgba(255,255,255,0.06);\n    --border-medium: rgba(255,255,255,0.10);\n    --shadow-ambient: rgba(0,0,0,0.3) 0px 2px 4px;\n    --shadow-button: rgba(0,0,0,0.4) 0px 1px 2px;\n    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--brand); color: #0d0d0d;\n    padding: 6px 14px; border-radius: 9999px;\n    font-size: 12px; font-weight: 600; letter-spacing: 0.3px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.4);\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(13,13,13,0.88);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--brand); }\n  .nav-cta {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 7px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.88; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 96px 32px 80px; text-align: center;\n    background: linear-gradient(180deg, #061f14 0%, #0f1a15 30%, #0d0d0d 100%);\n    position: relative;\n  }\n  .hero h1 {\n    font-size: 56px; font-weight: 600; line-height: 1.10;\n    letter-spacing: -1.28px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 10px 24px; border-radius: 9999px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n    box-shadow: var(--shadow-button);\n  }\n  .btn-dark:hover { opacity: 0.88; }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--black);\n    padding: 10px 24px; border-radius: 9999px; border: 1px solid var(--border-medium);\n    font-family: var(--font-sans); font-size: 15px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: border-color 0.15s;\n  }\n  .btn-ghost:hover { border-color: var(--gray-400); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label {\n    font-family: var(--font-mono); font-size: 12px; font-weight: 500;\n    color: var(--gray-400); text-transform: uppercase; margin-bottom: 8px;\n    letter-spacing: 0.6px;\n  }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.20; letter-spacing: -0.8px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 16px; overflow: hidden; border: 1px solid var(--border-subtle); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n  .btn-brand {\n    display: inline-block; background: var(--brand); color: #0d0d0d;\n    padding: 10px 24px; border-radius: 9999px; font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n  }\n  .btn-pill-badge {\n    display: inline-block; background: var(--brand-light); color: var(--brand-deep);\n    padding: 4px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: var(--gray-50); border-radius: 16px; padding: 24px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ambient);\n    transition: border-color 0.2s;\n  }\n  .card:hover { border-color: var(--border-medium); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }\n  .card-badge {\n    display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;\n    text-transform: uppercase; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px;\n    letter-spacing: 0.5px;\n  }\n\n  \u002F* FEATURED CARD *\u002F\n  .card-featured {\n    background: var(--gray-50); border-radius: 24px; padding: 32px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ambient);\n  }\n  .card-featured h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.24px; margin-bottom: 8px; }\n  .card-featured p { font-size: 16px; color: var(--gray-500); line-height: 1.50; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--gray-50); color: var(--black);\n    border: 1px solid var(--border-medium); padding: 10px 16px; border-radius: 9999px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }\n  .form-input--focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }\n  .form-input--error { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--gray-50); color: var(--black);\n    border: 1px solid var(--border-medium); padding: 12px 16px; border-radius: 16px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--brand); border-radius: 4px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--gray-50); border-radius: 16px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--brand); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; letter-spacing: -0.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Mintlify\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0d0d0d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d0d0d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ededed\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ededed\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#18E299\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#18E299\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent, CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand Extended\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0d3d2a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d3d2a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badge bg (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5eedb8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5eedb8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Badge text (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1ba673\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Annotate Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1ba673\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Code annotations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b94e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Info Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b94e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tags, annotations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e6a733\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warn Amber\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e6a733\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warnings, caution\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e06b6b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Error Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e06b6b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Errors, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale (Dark)\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a0a0a0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a0a0a0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#888888\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#888888\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#666666\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#666666\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2a2a2a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 200\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2a2a2a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1a1a1a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#141414\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#141414\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:600; line-height:1.10; letter-spacing:-1.28px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 56px \u002F 600 \u002F 1.10 \u002F -1.28px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:600; line-height:1.10; letter-spacing:-0.8px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 40px \u002F 600 \u002F 1.10 \u002F -0.8px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.30; letter-spacing:-0.24px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 24px \u002F 500 \u002F 1.30 \u002F -0.24px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.30; letter-spacing:-0.2px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 20px \u002F 600 \u002F 1.30 \u002F -0.2px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.50;\">Body Large — The intelligent knowledge platform that powers your documentation, APIs, and guides.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text for documentation and content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.50;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 15px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.50;\">Link \u002F Caption\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link \u002F Caption — 14px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.65px;\">Section Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label Uppercase — 13px \u002F 500 \u002F uppercase \u002F 0.65px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; letter-spacing:0.6px;\">MONO TECHNICAL LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Code — 12px \u002F 500 \u002F uppercase \u002F 0.6px \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:10px; font-weight:500; line-height:1.50; text-transform:uppercase;\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Micro — 10px \u002F 500 \u002F uppercase \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-brand\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Brand Accent\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-pill-badge\">Documentation\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(91,148,224,0.15); color:#5b94e0; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;\">Info\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Info Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(230,167,51,0.15); color:#e6a733; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500;\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Warning Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--brand-light); color:var(--brand-deep);\">Docs\u003C\u002Fdiv>\n      \u003Ch3>Intelligent Search\u003C\u002Fh3>\n      \u003Cp>AI-powered search that understands your documentation and delivers precise answers to developer questions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(91,148,224,0.12); color:#5b94e0;\">API\u003C\u002Fdiv>\n      \u003Ch3>API Reference\u003C\u002Fh3>\n      \u003Cp>Auto-generated API documentation with interactive examples, authentication flows, and code snippets.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(230,167,51,0.12); color:#e6a733;\">Analytics\u003C\u002Fdiv>\n      \u003Ch3>Documentation Analytics\u003C\u002Fh3>\n      \u003Cp>Track what developers search for, which pages perform best, and where they get stuck.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:32px;\">\n    \u003Cdiv class=\"color-group-label\">Featured Card (24px radius)\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-featured\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--brand-light); color:var(--brand-deep);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>The Intelligent Knowledge Platform\u003C\u002Fh3>\n      \u003Cp>Build beautiful documentation that powers your developer community. AI-enhanced, automatically updated, and always in sync with your codebase.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default (pill shape)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Organization\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Mintlify\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Code, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nav buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-subtle); box-shadow: var(--shadow-ambient);\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">6% border + ambient\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-medium); box-shadow: var(--shadow-ambient);\">\u003Cdiv class=\"elevation-label\">Level 2: Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">10% border + ambient\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-medium); box-shadow: rgba(0,0,0,0.4) 0px 4px 12px;\">\u003Cdiv class=\"elevation-label\">Level 3: Raised\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Stronger shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--brand); box-shadow: 0 0 0 1px var(--brand);\">\u003Cdiv class=\"elevation-label\">Focus Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Brand green ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fmintlify.com\u002F\">mintlify.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Mintlify Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmintlify\u002FDESIGN.md) extracted from the public [Mintlify](https:\u002F\u002Fmintlify.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmintlify\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mintlify design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Mintlify Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmintlify\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Mintlify Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmintlify\u002Fpreview-screenshot.png)\n",{"slug":194,"name":195,"category":15,"designMd":196,"previewHtml":197,"previewDarkHtml":198,"readme":199},"miro","Miro","# Design System Inspiration of Miro\n\n## 1. Visual Theme & Atmosphere\n\nMiro's website is a clean, collaborative-tool-forward platform that communicates \"visual thinking\" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.\n\nThe typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`). The design is built with Framer, giving it smooth animations and modern component patterns.\n\n**Key Characteristics:**\n- White canvas with near-black (`#1c1c1e`) text\n- Roobert PRO Medium with multiple OpenType character variants\n- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)\n- Blue 450 (`#5b76fe`) as primary interactive color\n- Success green (`#00b473`) for positive states\n- Generous border-radius: 8px–50px range\n- Framer-built with smooth motion patterns\n- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#1c1c1e`): Primary text\n- **White** (`#ffffff`): `--tw-color-white`, primary surface\n- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive\n- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`\n\n### Pastel Accents (Light\u002FDark pairs)\n- **Coral**: Light `#ffc6c6` \u002F Dark `#600000`\n- **Rose**: Light `#ffd8f4` \u002F Dark (implied)\n- **Teal**: Light `#c3faf5` \u002F Dark `#187574`\n- **Orange**: Light `#ffe6cd`\n- **Yellow**: Dark `#746019`\n- **Moss**: Dark `#187574`\n- **Pink** (`#fde0f0`): Soft pink surface\n- **Red** (`#fbd4d4`): Light red surface\n- **Dark Red** (`#e3c5c5`): Muted red\n\n### Semantic\n- **Success** (`#00b473`): `--tw-color-success-accent`\n\n### Neutral\n- **Slate** (`#555a6a`): Secondary text\n- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`\n- **Border** (`#c7cad5`): Button borders\n- **Ring** (`rgb(224,226,232)`): Shadow-as-border\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Roobert PRO Medium`, fallback: Placeholder — `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`\n- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`\n- **Body**: `Noto Sans` — `\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |\n| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |\n| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |\n| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |\n| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |\n| Body | Noto Sans | 18px | 400 | 1.45 | normal |\n| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |\n| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |\n| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |\n| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |\n| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding\n- White circle: 50% radius, white bg with shadow\n- Blue primary (implied from interactive color)\n\n### Cards: 12px–24px radius, pastel backgrounds\n### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding\n\n## 5. Layout Principles\n- Spacing: 1–24px base scale\n- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)\n- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 6. Depth & Elevation\nMinimal — ring shadow + pastel surface contrast\n\n## 7. Do's and Don'ts\n### Do\n- Use pastel light\u002Fdark pairs for feature sections\n- Apply Roobert PRO with OpenType character variants\n- Use Blue 450 (#5b76fe) for interactive elements\n### Don't\n- Don't use heavy shadows\n- Don't mix more than 2 pastel accents per section\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px\n\n## 9. Agent Prompt Guide\n### Quick Color Reference\n- Text: Near Black (`#1c1c1e`)\n- Background: White (`#ffffff`)\n- Interactive: Blue 450 (`#5b76fe`)\n- Success: `#00b473`\n- Border: `#c7cad5`\n### Example Component Prompts\n- \"Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius).\"\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Miro (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#fff; --black:#1c1c1e; --blue:#5b76fe; --blue-pressed:#2a41b6; --success:#00b473; --coral-l:#ffc6c6; --coral-d:#600000; --rose-l:#ffd8f4; --teal-l:#c3faf5; --teal-d:#187574; --orange-l:#ffe6cd; --pink:#fde0f0; --slate:#555a6a; --placeholder:#a5a8b5; --border:#c7cad5; --ring:rgb(224,226,232); --font:'Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Noto Sans','Inter',sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }\n  .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.175px; }\n\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 24px; border-radius:8px; border:1px solid var(--border); font-size:17.5px; font-weight:500; text-decoration:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }\n  .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }\n  .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }\n  .color-swatch-block { height:56px; }\n  .color-swatch-info { padding:8px; }\n  .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }\n  .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }\n\n  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }\n  .card { border-radius:12px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }\n  .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }\n\n  .form-group { margin-bottom:12px; max-width:380px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }\n  .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }\n  .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }\n  .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }\n  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }\n  .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }\n  .footer a { color:var(--blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; letter-spacing:-1.08px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up free\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Miro\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with collaborative precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1c1e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1c1e\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b76fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 450\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b76fe\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00b473\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00b473\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Pastel Accents\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc6c6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Coral Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc6c6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd8f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Rose Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd8f4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c3faf5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c3faf5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffe6cd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffe6cd\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fde0f0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fde0f0\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fbd4d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fbd4d4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#555a6a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#555a6a\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a5a8b5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Placeholder\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a5a8b5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c7cad5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c7cad5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO Medium — 56px \u002F 1.15 \u002F -1.68px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 48px \u002F 1.15 \u002F -1.44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 24px \u002F 1.15 \u002F -0.72px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:18px; line-height:1.45; color:var(--slate);\">Body — Get from brainstorm to breakthrough with Miro. The visual collaboration platform.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Noto Sans — 18px \u002F 1.45\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 17.5px \u002F 700 \u002F +0.175px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 10.5px \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\" style=\"background:var(--coral-l);\">\u003Ch3>Brainstorming\u003C\u002Fh3>\u003Cp>Ideate together in real-time with sticky notes and voting.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--teal-l);\">\u003Ch3>Diagramming\u003C\u002Fh3>\u003Cp>Create flowcharts, mind maps, and org charts visually.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--orange-l);\">\u003Ch3>Workshops\u003C\u002Fh3>\u003Cp>Run engaging workshops with built-in templates.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--rose-l);\">\u003Ch3>Strategy\u003C\u002Fh3>\u003Cp>Align teams with visual strategic planning tools.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Team name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Design Team\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"password\" value=\"short\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your board...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--ring) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px ring border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fmiro.com\u002F\">miro.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Miro (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#1c1c1e; --black:#f0f0f2; --blue:#5b76fe; --blue-pressed:#2a41b6; --success:#00b473; --coral-l:#ffc6c6; --coral-d:#600000; --rose-l:#ffd8f4; --teal-l:#c3faf5; --teal-d:#187574; --orange-l:#ffe6cd; --pink:#fde0f0; --slate:#a0a4b0; --placeholder:#606470; --border:#3a3c44; --ring:rgb(50,52,60); --font:'Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Noto Sans','Inter',sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }\n  .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.175px; }\n\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 24px; border-radius:8px; border:1px solid var(--border); font-size:17.5px; font-weight:500; text-decoration:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }\n  .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }\n  .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }\n  .color-swatch-block { height:56px; }\n  .color-swatch-info { padding:8px; }\n  .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }\n  .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }\n\n  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }\n  .card { border-radius:12px; padding:20px; }\n  .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }\n  .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }\n\n  .form-group { margin-bottom:12px; max-width:380px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }\n  .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }\n  .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }\n  .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }\n  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }\n  .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }\n  .footer a { color:var(--blue); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; letter-spacing:-1.08px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Sign up free\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#5b76fe;color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-radius:8px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Miro\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — visualized with collaborative precision.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1c1e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1c1e\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5b76fe\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 450\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5b76fe\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00b473\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00b473\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Pastel Accents\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc6c6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Coral Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc6c6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd8f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Rose Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd8f4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c3faf5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c3faf5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffe6cd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffe6cd\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fde0f0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fde0f0\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fbd4d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fbd4d4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#555a6a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#555a6a\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a5a8b5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Placeholder\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a5a8b5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c7cad5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c7cad5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO Medium — 56px \u002F 1.15 \u002F -1.68px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 48px \u002F 1.15 \u002F -1.44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 24px \u002F 1.15 \u002F -0.72px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:18px; line-height:1.45; color:var(--slate);\">Body — Get from brainstorm to breakthrough with Miro. The visual collaboration platform.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Noto Sans — 18px \u002F 1.45\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 17.5px \u002F 700 \u002F +0.175px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Roobert PRO — 10.5px \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Sign up free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\" style=\"background:var(--coral-l);\">\u003Ch3>Brainstorming\u003C\u002Fh3>\u003Cp>Ideate together in real-time with sticky notes and voting.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--teal-l);\">\u003Ch3>Diagramming\u003C\u002Fh3>\u003Cp>Create flowcharts, mind maps, and org charts visually.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--orange-l);\">\u003Ch3>Workshops\u003C\u002Fh3>\u003Cp>Run engaging workshops with built-in templates.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\" style=\"background:var(--rose-l);\">\u003Ch3>Strategy\u003C\u002Fh3>\u003Cp>Align teams with visual strategic planning tools.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Team name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Design Team\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"password\" value=\"short\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your board...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--ring) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px ring border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 1px var(--blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fmiro.com\u002F\">miro.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Miro Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmiro\u002FDESIGN.md) extracted from the public [Miro](https:\u002F\u002Fmiro.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmiro\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Miro design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Miro Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmiro\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Miro Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmiro\u002Fpreview-screenshot.png)\n",{"slug":201,"name":202,"category":45,"designMd":203,"previewHtml":204,"previewDarkHtml":205,"readme":206},"mistral.ai","Mistral AI","# Design System Inspiration of Mistral AI\n\n## 1. Visual Theme & Atmosphere\n\nMistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire.\n\nThe design language is maximalist in its warmth but minimalist in its structure. Huge display headlines (82px) crash into the viewport with aggressive negative tracking (-2.05px), creating text blocks that feel like billboards or protest posters — declarations rather than descriptions. The typography uses Arial (likely a custom font with Arial as fallback) at extreme sizes, creating a raw, unadorned voice that says \"we build frontier AI\" with no decoration needed.\n\nWhat makes Mistral distinctive is the complete commitment to a warm color temperature. The signature \"block\" identity — a gradient system flowing from bright yellow (`#ffd900`) through amber (`#ffa110`) to burnt orange (`#fa520f`) — creates a visual identity that's immediately recognizable. Even the shadows are warm, using amber-tinted blacks instead of cool grays. Combined with dramatic landscape photography in golden tones, the design feels less like a tech company and more like a European luxury brand that happens to build language models.\n\n**Key Characteristics:**\n- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f)\n- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px)\n- Warm golden shadow system using amber-tinted rgba values\n- The Mistral \"M\" block identity — a gradient from yellow to orange\n- Dramatic landscape photography in warm golden tones\n- Uppercase typography used strategically for section labels and CTAs\n- Near-zero border-radius — sharp, architectural geometry\n- French-European confidence: bold, warm, declarative\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Mistral Orange** (`#fa520f`): The core brand color — a vivid, saturated orange-red that anchors the entire identity. Used for primary emphasis, the brand block, and the highest-signal moments.\n- **Mistral Flame** (`#fb6424`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.\n- **Block Orange** (`#ff8105`): A pure orange used in the gradient block system — warmer and less red than Mistral Orange.\n\n### Secondary & Accent\n- **Sunshine 900** (`#ff8a00`): Deep golden amber — the darkest sunshine tone, used for strong accent moments.\n- **Sunshine 700** (`#ffa110`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements.\n- **Sunshine 500** (`#ffb83e`): Medium golden — balanced warmth for mid-level emphasis.\n- **Sunshine 300** (`#ffd06a`): Light golden — for subtle warm tints and secondary backgrounds.\n- **Block Gold** (`#ffe295`): Pale gold — soft background accents and gentle warmth.\n- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient — used at the \"top\" of the block identity.\n\n### Surface & Background\n- **Warm Ivory** (`#fffaeb`): The lightest page background — barely tinted with warmth, the foundation canvas.\n- **Cream** (`#fff0c2`): The primary warm surface and secondary button background — noticeably golden.\n- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces.\n- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections.\n- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states.\n\n### Neutrals & Text\n- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000.\n- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds.\n- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels.\n\n### Semantic & Accent\n- **Input Border** (defined as `hsl(240, 5.9%, 90%)`): A cool-tinted light gray for form borders — one of the few cool tones in the system.\n- **White Overlay** (`oklab(1, 0, 0 \u002F 0.088–0.1)`): Semi-transparent white for frosted glass effects and button overlays.\n\n### Gradient System\n- **Mistral Block Gradient**: The signature identity — a multi-step gradient flowing through Yellow (`#ffd900`) → Gold (`#ffe295`) → Amber (`#ffa110`) → Orange (`#ff8105`) → Flame (`#fb6424`) → Mistral Orange (`#fa520f`). This gradient appears in the logo blocks, section backgrounds, and decorative elements.\n- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.\n- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: Likely a custom font (Font Source detected) with `Arial` as fallback, and extended stack: `ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale |\n| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors |\n| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles |\n| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names |\n| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings |\n| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings |\n| Body \u002F Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |\n| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels |\n| Caption \u002F Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links |\n\n### Principles\n- **Single weight, maximum impact**: The entire system uses weight 400 (regular) — even at 82px. This creates a surprisingly elegant effect where the size alone carries authority without needing bold weight.\n- **Ultra-tight at scale**: Line-heights of 0.95–1.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above — creating dense, poster-like composition.\n- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block.\n- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality.\n- **No weight variation**: Unlike most systems that use 300–700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Cream Surface**\n- Background: Cream (`#fff0c2`)\n- Text: Mistral Black (`#1f1f1f`)\n- No visible border\n- The warm, inviting secondary CTA\n\n**Dark Solid**\n- Background: Mistral Black (`#1f1f1f`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px (all sides)\n- No visible border\n- The primary action button — dark on warm\n\n**Ghost \u002F Transparent**\n- Background: transparent with slight dark overlay (`oklab(0, 0, 0 \u002F 0.1)`)\n- Text: Mistral Black (`#1f1f1f`)\n- Opacity: 0.4\n- For secondary\u002Fde-emphasized actions\n\n**Text \u002F Underline**\n- Background: transparent\n- Text: Mistral Black (`#1f1f1f`)\n- Padding: 8px 0px 0px (top-only)\n- Minimal styling — text link as button\n- For tertiary navigation actions\n\n### Cards & Containers\n- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White\n- Border: minimal to none — containers defined by background color\n- Radius: near-zero — sharp, architectural corners\n- Shadow: warm golden multi-layer (`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`) — a dramatic, cascading warm shadow\n- Distinctive: the golden shadow creates a \"golden hour\" lighting effect\n\n### Inputs & Forms\n- Border: `hsl(240, 5.9%, 90%)` — the sole cool-toned element\n- Focus: accent color ring\n- Minimal styling consistent with sparse aesthetic\n\n### Navigation\n- Transparent nav overlaying the warm hero\n- Logo: Mistral \"M\" wordmark\n- Links: Dark text (white on dark sections)\n- CTA: Dark solid button or cream surface button\n- Minimal, wide-spaced layout\n\n### Image Treatment\n- Dramatic landscape photography in warm golden tones\n- The winding road through golden hills — a recurring visual motif\n- The Mistral \"M\" rendered at large scale on golden backgrounds\n- Warm color grading on all photography\n- Full-bleed sections with photography\n\n### Distinctive Components\n\n**Mistral Block Identity**\n- A row of colored blocks forming the gradient: yellow → amber → orange → burnt orange\n- Each block gets progressively more orange\u002Fred\n- The visual DNA of the brand — recognizable at any size\n\n**Golden Shadow Cards**\n- Cards elevated with warm amber multi-layered shadows\n- 5 layers of shadow from 16px to 400px offset\n- Creates a \"floating in golden light\" effect unique to Mistral\n\n**Dark Footer Gradient**\n- Footer transitions from warm amber to dark through a dramatic gradient\n- Creates a \"sunset\" effect as the page ends\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px\n- Button padding: 12px or 8px 0px (compact)\n- Section vertical spacing: very generous (80px–100px)\n\n### Grid & Container\n- Max container width: approximately 1280px, centered\n- Hero: full-width with massive typography overlaying warm backgrounds\n- Feature sections: wide-format layouts with dramatic imagery\n- Card grids: 2–3 column layouts\n\n### Whitespace Philosophy\n- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact — each statement gets its own breathing space.\n- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory\u002Fcream rather than pure white.\n- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.\n\n### Border Radius Scale\n- Near-zero: The dominant radius — sharp, architectural corners on most elements\n- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page backgrounds, text blocks |\n| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%→0% opacity, amber-tinted) | Feature cards, product showcases, elevated content |\n\n**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow — **five cascading layers** of amber-tinted shadow (`rgba(127, 99, 21, ...)`) that build from a close 16px offset to a distant 400px offset. The result is a rich, warm, \"golden hour\" lighting effect that makes elevated elements look like they're bathed in afternoon sunlight. This is the most distinctive shadow system in any major AI brand.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange\n- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections\n- Use the Mistral block gradient (yellow → amber → orange) for brand moments\n- Apply warm golden shadows (amber-tinted rgba) for elevated elements\n- Use Mistral Black (#1f1f1f) for text — never pure #000000\n- Keep font weight at 400 throughout — let size and color carry hierarchy\n- Use sharp, architectural corners — near-zero border-radius\n- Apply uppercase on button labels and section markers for European formality\n- Use warm landscape photography with golden color grading\n\n### Don't\n- Don't introduce cool colors (blue, green, purple) — the palette is exclusively warm\n- Don't use bold (700+) weight — 400 is the only weight\n- Don't round corners — the sharp geometry is intentional\n- Don't use cool-toned shadows — shadows must carry amber warmth\n- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum)\n- Don't reduce hero text below 48px on desktop — the billboard scale is core\n- Don't use more than 2 font weights — size variation replaces weight variation\n- Don't add gradients outside the warm spectrum — no blue-to-purple, no cool transitions\n- Don't use generic gray for text — even neutrals should be warm-tinted\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, stacked everything, hero text reduces to ~32px |\n| Tablet | 640–768px | Minor layout adjustments |\n| Small Desktop | 768–1024px | 2-column layouts begin |\n| Desktop | 1024–1280px | Full layout with maximum typography scale |\n\n### Touch Targets\n- Buttons use generous padding (12px minimum)\n- Navigation elements adequately spaced\n- Cards serve as large touch targets\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger on mobile\n- **Hero text**: 82px → 56px → 48px → 32px progressive scaling\n- **Feature sections**: Multi-column → stacked\n- **Photography**: Scales proportionally, may crop on mobile\n- **Block identity**: Scales down proportionally\n\n### Image Behavior\n- Landscape photography scales proportionally\n- Warm color grading maintained at all sizes\n- Block gradient elements resize fluidly\n- No art direction changes — same warm composition at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Orange: \"Mistral Orange (#fa520f)\"\n- Page Background: \"Warm Ivory (#fffaeb)\"\n- Warm Surface: \"Cream (#fff0c2)\"\n- Primary Text: \"Mistral Black (#1f1f1f)\"\n- Sunshine Amber: \"Sunshine 700 (#ffa110)\"\n- Bright Gold: \"Bright Yellow (#ffd900)\"\n- Text on Dark: \"Pure White (#ffffff)\"\n\n### Example Component Prompts\n- \"Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg).\"\n- \"Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px.\"\n- \"Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps.\"\n- \"Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black.\"\n\n### Iteration Guide\n1. Keep the warm temperature — \"shift toward amber\" not \"shift toward gray\"\n2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px\n3. Never add border-radius — sharp corners only\n4. Shadows are always warm: \"golden shadow with amber tones\"\n5. Font weight is always 400 — describe emphasis through size and color\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Mistral AI (Light)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --color-mistral-orange: #fa520f;\n    --color-flame: #fb6424;\n    --color-block-orange: #ff8105;\n    --color-sunshine-900: #ff8a00;\n    --color-sunshine-700: #ffa110;\n    --color-sunshine-500: #ffb83e;\n    --color-sunshine-300: #ffd06a;\n    --color-block-gold: #ffe295;\n    --color-bright-yellow: #ffd900;\n    --color-warm-ivory: #fffaeb;\n    --color-cream: #fff0c2;\n    --color-white: #ffffff;\n    --color-mistral-black: #1f1f1f;\n    --color-black-tint: hsl(0, 0%, 24%);\n    --color-input-border: hsl(240, 5.9%, 90%);\n    --font-primary: Arial, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    \u002F* Light mode *\u002F\n    --bg-page: #fffaeb;\n    --bg-card: #fff0c2;\n    --bg-nav: rgba(255, 250, 235, 0.92);\n    --text-primary: #1f1f1f;\n    --text-secondary: hsl(0, 0%, 24%);\n    --text-muted: #7f6315;\n    --border-color: rgba(127, 99, 21, 0.15);\n    --border-subtle: rgba(127, 99, 21, 0.08);\n    --section-label-color: var(--color-mistral-orange);\n    --golden-shadow: -8px 16px 39px rgba(127, 99, 21, 0.12),\n                     -33px 64px 72px rgba(127, 99, 21, 0.10),\n                     -73px 144px 97px rgba(127, 99, 21, 0.06);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 400;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand .mistral-block {\n    display: flex;\n    gap: 2px;\n  }\n  .nav-brand .mistral-block span {\n    width: 6px;\n    height: 18px;\n    display: inline-block;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-mistral-orange); }\n  .nav-cta {\n    background: var(--color-mistral-black);\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(255, 161, 16, 0.10) 0%, rgba(250, 82, 15, 0.05) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 82px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -2.05px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span { color: var(--color-mistral-orange); }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n\n  \u002F* MISTRAL BLOCK IDENTITY *\u002F\n  .block-identity {\n    display: flex;\n    gap: 3px;\n    justify-content: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .block-identity span {\n    width: 48px;\n    height: 12px;\n    display: inline-block;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .btn-dark {\n    background: var(--color-mistral-black);\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n  .btn-cream {\n    background: var(--color-cream);\n    color: var(--color-mistral-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-mistral-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    opacity: 0.6;\n    cursor: pointer;\n  }\n  .btn-text {\n    background: transparent;\n    color: var(--color-mistral-black);\n    padding: 8px 0 0 0;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 56px;\n    font-weight: 400;\n    line-height: 0.95;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1280px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS SECTION *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 0;\n    padding: 28px;\n  }\n  .card-standard { border: none; }\n  .card-golden {\n    box-shadow: var(--golden-shadow);\n  }\n  .card-white {\n    background: var(--color-white);\n    border: 1px solid var(--border-color);\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 32px;\n    font-weight: 400;\n    line-height: 1.15;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-sunshine-700);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(250, 82, 15, 0.12);\n    border: 1px solid rgba(250, 82, 15, 0.3);\n    border-radius: 0;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 0;\n    padding: 28px;\n    min-height: 160px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat {\n    border: none;\n    background: var(--bg-page);\n    box-shadow: none;\n  }\n  .elevation-golden {\n    box-shadow: -8px 16px 39px rgba(127, 99, 21, 0.12),\n                -33px 64px 72px rgba(127, 99, 21, 0.10),\n                -73px 144px 97px rgba(127, 99, 21, 0.06),\n                -130px 257px 131px rgba(127, 99, 21, 0.02),\n                -203px 400px 143px rgba(127, 99, 21, 0.00);\n  }\n  .elevation-name { font-size: 18px; font-weight: 400; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-size: 11px;\n    color: var(--color-sunshine-700);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 16px;\n  }\n\n  \u002F* GRADIENT STRIP *\u002F\n  .gradient-strip {\n    height: 64px;\n    margin-top: 48px;\n    background: linear-gradient(to right, #ffd900, #ffe295, #ffa110, #ff8105, #fb6424, #fa520f);\n    border-radius: 0;\n  }\n  .gradient-label {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    text-align: center;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; letter-spacing: -1px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Cdiv class=\"mistral-block\">\n      \u003Cspan style=\"background: #ffd900;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #ffa110;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #ff8105;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #fb6424;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #fa520f;\">\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    Mistral AI\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"block-identity\">\n    \u003Cspan style=\"background: #ffd900;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ffe295;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ffa110;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ff8105;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #fb6424;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #fa520f;\">\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Mistral AI\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Warm golden tokens from the sunshine gradient design system\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-dark\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-cream\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fa520f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fa520f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color, primary emphasis, signal fire\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fb6424;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Flame\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fb6424\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hover states, secondary brand moments\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ff8105;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Block Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff8105\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient block system, warm pure orange\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Sunshine Spectrum\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffd900;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Bright Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffd900\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Top of block identity gradient\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffe295;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Block Gold\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffe295\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Pale gold, soft background accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffd06a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 300\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffd06a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle warm tints, secondary backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffb83e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 500\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffb83e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Medium golden, mid-level emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffa110;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 700\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffa110\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core sunshine accent, interactive elements\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ff8a00;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 900\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff8a00\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Deep golden amber, strong accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fffaeb; border: 1px solid rgba(127,99,21,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Ivory\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fffaeb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, lightest canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fff0c2;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fff0c2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary warm surface, button backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border: 1px solid rgba(127,99,21,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Maximum contrast, popover surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1f1f1f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark buttons, text, dark sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1f1f1f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(0, 0%, 24%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Black Tint\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(0, 0%, 24%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text on light backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border: 1px solid rgba(127,99,21,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Text on dark surfaces, CTA labels\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Gradient Strip -->\n  \u003Cdiv class=\"gradient-strip\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"gradient-label\">Mistral Block Gradient: Yellow → Gold → Amber → Orange → Flame → Mistral Orange\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 82px; font-weight: 400; line-height: 1.0; letter-spacing: -2.05px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 82px \u002F 400 \u002F 1.00 \u002F -2.05px — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 56px; font-weight: 400; line-height: 0.95;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 56px \u002F 400 \u002F 0.95 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 48px; font-weight: 400; line-height: 0.95;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 48px \u002F 400 \u002F 0.95 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 32px; font-weight: 400; line-height: 1.15;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 32px \u002F 400 \u002F 1.15 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 30px; font-weight: 400; line-height: 1.20;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 30px \u002F 400 \u002F 1.20 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 24px \u002F 400 \u002F 1.33 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;\">Body text for standard paragraphs, navigation links, and button labels. Arial delivers raw, unadorned clarity across all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.50 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50; text-transform: uppercase; letter-spacing: 0.5px;\">UPPERCASE BUTTON LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Button Uppercase — 16px \u002F 400 \u002F 1.50 \u002F uppercase — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for secondary links\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption \u002F Link — 14px \u002F 400 \u002F 1.43 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--color-mistral-orange);\">SECTION LABEL TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Label — 14px \u002F 400 \u002F 2.52px \u002F uppercase — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark\">GET STARTED\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-cream\">LEARN MORE\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Cream Surface\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">SECONDARY\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Transparent\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-text\">Read Article\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Text \u002F Underline\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">CREAM SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Warm Cream Card\u003C\u002Fh3>\n      \u003Cp>Standard content card on cream background with sharp architectural corners. Containers defined by background color, not borders. The warm void breathes naturally.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-golden\">\n      \u003Cdiv class=\"card-label\">GOLDEN FLOAT\u003C\u002Fdiv>\n      \u003Ch3>Golden Shadow Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with the signature five-layer warm amber shadow system. The golden hour lighting effect makes content feel bathed in afternoon sunlight.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-white\">\n      \u003Cdiv class=\"card-label\">WHITE SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Pure White Card\u003C\u002Fh3>\n      \u003Cp>Maximum contrast card on pure white with subtle golden border. Used for popover surfaces and moments requiring the highest visual clarity.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 2px to 100px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Sharp, architectural geometry. Near-zero radius is the signature.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp (default)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px; background: var(--color-cream); border: 2px solid var(--color-sunshine-700);\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Accent sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px; box-shadow: var(--golden-shadow);\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Elevated sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Page backgrounds and inline text blocks sitting directly on the warm ivory canvas.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-golden\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Golden Float\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Five-layer cascading warm shadow with amber-tinted transparency. The signature golden hour lighting effect unique to Mistral.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Mistral AI (Dark)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --color-mistral-orange: #fa520f;\n    --color-flame: #fb6424;\n    --color-block-orange: #ff8105;\n    --color-sunshine-900: #ff8a00;\n    --color-sunshine-700: #ffa110;\n    --color-sunshine-500: #ffb83e;\n    --color-sunshine-300: #ffd06a;\n    --color-block-gold: #ffe295;\n    --color-bright-yellow: #ffd900;\n    --color-warm-ivory: #fffaeb;\n    --color-cream: #fff0c2;\n    --color-white: #ffffff;\n    --color-mistral-black: #1f1f1f;\n    --color-black-tint: hsl(0, 0%, 24%);\n    --color-input-border: hsl(240, 5.9%, 90%);\n    --font-primary: Arial, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    \u002F* Dark mode *\u002F\n    --bg-page: #1f1f1f;\n    --bg-card: #2a2a2a;\n    --bg-nav: rgba(31, 31, 31, 0.92);\n    --text-primary: #ffffff;\n    --text-secondary: rgba(255, 255, 255, 0.7);\n    --text-muted: rgba(255, 255, 255, 0.4);\n    --border-color: rgba(255, 161, 16, 0.15);\n    --border-subtle: rgba(255, 161, 16, 0.08);\n    --section-label-color: var(--color-sunshine-700);\n    --golden-shadow: -8px 16px 39px rgba(127, 99, 21, 0.18),\n                     -33px 64px 72px rgba(127, 99, 21, 0.14),\n                     -73px 144px 97px rgba(127, 99, 21, 0.08);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 400;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--text-primary);\n  }\n  .nav-brand .mistral-block {\n    display: flex;\n    gap: 2px;\n  }\n  .nav-brand .mistral-block span {\n    width: 6px;\n    height: 18px;\n    display: inline-block;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-mistral-orange); }\n  .nav-cta {\n    background: var(--color-cream);\n    color: var(--color-mistral-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 700px;\n    height: 700px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(250, 82, 15, 0.10) 0%, rgba(255, 161, 16, 0.06) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 82px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -2.05px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span { color: var(--color-mistral-orange); }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n\n  \u002F* MISTRAL BLOCK IDENTITY *\u002F\n  .block-identity {\n    display: flex;\n    gap: 3px;\n    justify-content: center;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .block-identity span {\n    width: 48px;\n    height: 12px;\n    display: inline-block;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .btn-cream {\n    background: var(--color-cream);\n    color: var(--color-mistral-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n  .btn-dark {\n    background: var(--color-white);\n    color: var(--color-mistral-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    opacity: 0.5;\n    cursor: pointer;\n  }\n  .btn-text {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 8px 0 0 0;\n    border: none;\n    border-radius: 0;\n    font-size: 16px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 56px;\n    font-weight: 400;\n    line-height: 0.95;\n    letter-spacing: normal;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1280px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 0;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS SECTION *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 0;\n    padding: 28px;\n  }\n  .card-standard { border: none; }\n  .card-golden {\n    box-shadow: var(--golden-shadow);\n  }\n  .card-bordered {\n    background: #333333;\n    border: 1px solid var(--border-color);\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 32px;\n    font-weight: 400;\n    line-height: 1.15;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-sunshine-700);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(250, 82, 15, 0.18);\n    border: 1px solid rgba(250, 82, 15, 0.35);\n    border-radius: 0;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 0;\n    padding: 28px;\n    min-height: 160px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat {\n    border: none;\n    background: var(--bg-page);\n    box-shadow: none;\n  }\n  .elevation-golden {\n    box-shadow: -8px 16px 39px rgba(127, 99, 21, 0.18),\n                -33px 64px 72px rgba(127, 99, 21, 0.14),\n                -73px 144px 97px rgba(127, 99, 21, 0.08),\n                -130px 257px 131px rgba(127, 99, 21, 0.03),\n                -203px 400px 143px rgba(127, 99, 21, 0.01);\n  }\n  .elevation-name { font-size: 18px; font-weight: 400; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-size: 11px;\n    color: var(--color-sunshine-700);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 16px;\n  }\n\n  \u002F* GRADIENT STRIP *\u002F\n  .gradient-strip {\n    height: 64px;\n    margin-top: 48px;\n    background: linear-gradient(to right, #ffd900, #ffe295, #ffa110, #ff8105, #fb6424, #fa520f);\n    border-radius: 0;\n  }\n  .gradient-label {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    text-align: center;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 48px; letter-spacing: -1px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    \u003Cdiv class=\"mistral-block\">\n      \u003Cspan style=\"background: #ffd900;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #ffa110;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #ff8105;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #fb6424;\">\u003C\u002Fspan>\n      \u003Cspan style=\"background: #fa520f;\">\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    Mistral AI\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"block-identity\">\n    \u003Cspan style=\"background: #ffd900;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ffe295;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ffa110;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #ff8105;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #fb6424;\">\u003C\u002Fspan>\n    \u003Cspan style=\"background: #fa520f;\">\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>Mistral AI\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Warm golden tokens from the sunshine gradient design system\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-cream\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">VIEW SOURCE\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fa520f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fa520f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand color, primary emphasis, signal fire\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fb6424;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Flame\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fb6424\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hover states, secondary brand moments\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ff8105;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Block Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff8105\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient block system, warm pure orange\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Sunshine Spectrum\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffd900;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Bright Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffd900\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Top of block identity gradient\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffe295;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Block Gold\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffe295\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Pale gold, soft background accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffd06a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 300\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffd06a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle warm tints, secondary backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffb83e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 500\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffb83e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Medium golden, mid-level emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffa110;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 700\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffa110\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core sunshine accent, interactive elements\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ff8a00;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Sunshine 900\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff8a00\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Deep golden amber, strong accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1f1f1f; border: 1px solid rgba(255,161,16,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark mode page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2a2a2a; border: 1px solid rgba(255,161,16,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Card Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2a2a2a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark mode card background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fffaeb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Ivory\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fffaeb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light mode page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fff0c2;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fff0c2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary warm surface, button backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border: 1px solid rgba(255,161,16,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.7); border: 1px solid rgba(255,161,16,0.15);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">White 70%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.7)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1f1f1f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mistral Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Gradient Strip -->\n  \u003Cdiv class=\"gradient-strip\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"gradient-label\">Mistral Block Gradient: Yellow → Gold → Amber → Orange → Flame → Mistral Orange\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 82px; font-weight: 400; line-height: 1.0; letter-spacing: -2.05px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 82px \u002F 400 \u002F 1.00 \u002F -2.05px — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 56px; font-weight: 400; line-height: 0.95;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 56px \u002F 400 \u002F 0.95 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 48px; font-weight: 400; line-height: 0.95;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Large — 48px \u002F 400 \u002F 0.95 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 32px; font-weight: 400; line-height: 1.15;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 32px \u002F 400 \u002F 1.15 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 30px; font-weight: 400; line-height: 1.20;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 30px \u002F 400 \u002F 1.20 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 24px \u002F 400 \u002F 1.33 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;\">Body text for standard paragraphs, navigation links, and button labels. Arial delivers raw, unadorned clarity across all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.50 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50; text-transform: uppercase; letter-spacing: 0.5px;\">UPPERCASE BUTTON LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Button Uppercase — 16px \u002F 400 \u002F 1.50 \u002F uppercase — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for secondary links\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption \u002F Link — 14px \u002F 400 \u002F 1.43 \u002F normal — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--color-sunshine-700);\">SECTION LABEL TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Label — 14px \u002F 400 \u002F 2.52px \u002F uppercase — Arial\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-cream\">GET STARTED\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Cream Surface\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark\">LEARN MORE\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">SECONDARY\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Transparent\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-text\">Read Article\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Text \u002F Underline\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">DARK SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Standard Dark Card\u003C\u002Fh3>\n      \u003Cp>Standard content card on dark surface with sharp architectural corners. Containers defined by background color shifts rather than borders.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-golden\">\n      \u003Cdiv class=\"card-label\">GOLDEN FLOAT\u003C\u002Fdiv>\n      \u003Ch3>Golden Shadow Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with the signature five-layer warm amber shadow system. The golden glow radiates warmly against the dark background.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">BORDERED SURFACE\u003C\u002Fdiv>\n      \u003Ch3>Bordered Dark Card\u003C\u002Fh3>\n      \u003Cp>Elevated dark card with subtle golden border. Used for distinguishing content areas within dark sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 2px to 100px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Sharp, architectural geometry. Near-zero radius is the signature.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp (default)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px; background: #333; border: 2px solid var(--color-sunshine-700);\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Accent sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 0px; box-shadow: var(--golden-shadow);\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Elevated sharp\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Dark page backgrounds and inline text blocks sitting directly on the Mistral Black canvas.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-golden\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Golden Float\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Five-layer cascading warm shadow with amber-tinted transparency. The golden glow radiates warmly even against the dark background.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Mistral AI Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmistral.ai\u002FDESIGN.md) extracted from the public [Mistral](https:\u002F\u002Fmistral.ai\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmistral.ai\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mistral AI design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Mistral AI Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmistral.ai\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Mistral AI Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmistral.ai\u002Fpreview-screenshot.png)\n",{"slug":208,"name":209,"category":60,"designMd":210,"previewHtml":211,"previewDarkHtml":212,"readme":213},"mongodb","Mongodb","# Design System Inspiration of MongoDB\n\n## 1. Visual Theme & Atmosphere\n\nMongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent — bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.\n\nThe typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence — serif type at database-company scale is a bold choice that says \"we're not just another tech company.\" Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → engineering precision.\n\nWhat makes MongoDB distinctive is its dual-mode design: a dark hero\u002Ffeature section world (`#001e2b` with neon green accents) and a light content world (white with teal-gray borders `#b8c4c2`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (`rgba(0, 30, 43, 0.12)`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px–999px radius) with MongoDB Green borders (`#00684a`), and the entire component system references the LeafyGreen design system.\n\n**Key Characteristics:**\n- Deep teal-black backgrounds (`#001e2b`) — forest-dark, not space-dark\n- Neon MongoDB Green (`#00ed64`) as the singular brand accent — electric and organic\n- MongoDB Value Serif for hero headlines — editorial authority at tech scale\n- Euclid Circular A for body with weight 300 (light) as a distinctive body weight\n- Source Code Pro with wide uppercase letter-spacing (1px–3px) for technical labels\n- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` — shadows carry the forest color\n- Dual-mode: dark teal hero sections + light white content sections\n- Pill buttons (100px radius) with green borders (`#00684a`)\n- Link Blue (`#006cfa`) and hover transition to `#3860be`\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Forest Black** (`#001e2b`): Primary dark background — the deepest teal-black\n- **MongoDB Green** (`#00ed64`): Primary brand accent — neon green for highlights, underlines, gradients\n- **Dark Green** (`#00684a`): Button borders, link text on light — muted green for functional use\n\n### Interactive\n- **Action Blue** (`#006cfa`): Secondary accent — links, interactive highlights\n- **Hover Blue** (`#3860be`): All link hover states transition to this blue\n- **Teal Active** (`#1eaedb`): Button hover background — bright teal\n\n### Neutral Scale\n- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces\n- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces\n- **Dark Slate** (`#21313c`): Dark link text variant\n- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text\n- **Silver Teal** (`#b8c4c2`): Borders on light surfaces, dividers\n- **Light Input** (`#e8edeb`): Input text on dark surfaces\n- **Pure White** (`#ffffff`): Light section background, button text on dark\n- **Black** (`#000000`): Text on light surfaces, darkest elements\n\n### Shadows\n- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`): Primary card elevation — teal-tinted\n- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation\n- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Serif**: `MongoDB Value Serif` — editorial hero headlines\n- **Body \u002F UI**: `Euclid Circular A` — geometric sans-serif workhorse\n- **Code \u002F Labels**: `Source Code Pro` — monospace with uppercase label treatments\n- **Fallbacks**: `Akzidenz-Grotesk Std` (with CJK: Noto Sans KR\u002FSC\u002FJP), `Times`, `Arial`, `system-ui`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority |\n| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero |\n| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision |\n| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles |\n| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions |\n| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body |\n| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | Light-weight reading text |\n| Nav \u002F UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | Navigation, emphasized |\n| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis |\n| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA labels |\n| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata |\n| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations |\n| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles |\n| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (tight) | 1px–2px | `text-transform: uppercase` |\n| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` |\n\n### Principles\n- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech — it communicates that MongoDB is an institution, not a startup.\n- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds.\n- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified.\n- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI\u002Fnav) → 700 (bold CTA) — a wider range than most systems, enabling fine-grained hierarchy.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Green (Dark Surface)**\n- Background: `#00684a` (muted MongoDB green)\n- Text: `#000000`\n- Radius: 50% (circular) or 100px (pill)\n- Border: `1px solid #00684a`\n- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`\n- Hover: scale 1.1\n- Active: scale 0.85\n\n**Dark Teal Button**\n- Background: `#1c2d38`\n- Text: `#5c6c75`\n- Radius: 100px (pill)\n- Border: `1px solid #3d4f58`\n- Hover: background `#1eaedb`, text white, translateX(5px)\n\n**Outlined Button (Light Surface)**\n- Background: transparent\n- Text: `#001e2b`\n- Border: `1px solid #b8c4c2`\n- Radius: 4px–8px\n- Hover: background tint\n\n### Cards & Containers\n- Light mode: white background with `1px solid #b8c4c2` border\n- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58`\n- Radius: 16px (standard), 24px (medium), 48px (large\u002Fhero)\n- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted)\n- Image containers: 30px–32px radius\n\n### Inputs & Forms\n- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px\n- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark\n- Input radius: 4px\n\n### Navigation\n- Dark header on forest-black background\n- Euclid Circular A 16px weight 500 for nav links\n- MongoDB logo (leaf icon + wordmark) left-aligned\n- Green CTA pill buttons right-aligned\n- Mega-menu dropdowns with product categories\n\n### Image Treatment\n- Dashboard screenshots on dark backgrounds\n- Green-accented UI elements in screenshots\n- 30px–32px radius on image containers\n- Full-width dark sections for product showcases\n\n### Distinctive Components\n\n**Neon Green Accent Underlines**\n- `0px 2px 2px 0px solid #00ed64` — bottom + right border creating accent underlines\n- Used on feature headings and highlighted text\n- Also appears as `#006cfa` (blue) variant\n\n**Source Code Label System**\n- 14px uppercase Source Code Pro with 1px–2px letter-spacing\n- Used as section category markers above headings\n- Creates a \"database field label\" aesthetic\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px\n\n### Grid & Container\n- Max content width centered\n- Dark hero section with contained content\n- Light content sections below\n- Card grids: 2–3 columns\n- Full-width dark footer\n\n### Whitespace Philosophy\n- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.\n- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.\n- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.\n\n### Border Radius Scale\n- Minimal (1px–2px): Small spans, badges\n- Subtle (4px): Inputs, small buttons\n- Standard (8px): Cards, links\n- Card (16px): Standard cards, containers\n- Toggle (20px): Switch elements\n- Large (24px): Large panels\n- Image (30px–32px): Image containers\n- Hero (48px): Hero cards\n- Pill (100px–999px): Buttons, navigation pills\n- Full (9999px): Maximum pill\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces |\n| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | Light card lift |\n| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | Standard cards |\n| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | Elevated panels |\n| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero cards — teal-tinted |\n\n**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses `rgba(0, 30, 43, 0.12)` — a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#001e2b` (forest-black) for dark sections — not pure black\n- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact\n- Use MongoDB Value Serif ONLY for hero\u002Fdisplay headings — Euclid Circular A for everything else\n- Apply Source Code Pro uppercase with wide tracking (1px–3px) for technical labels\n- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation\n- Maintain the dark\u002Flight section duality — dramatic contrast between modes\n- Use weight 300 for body text — the light weight is the readable voice\n- Apply pill radius (100px) to primary action buttons\n\n### Don't\n- Don't use pure black (`#000000`) for dark backgrounds — always use teal-black (`#001e2b`)\n- Don't use MongoDB Green (`#00ed64`) on backgrounds — it's an accent for text, underlines, and small highlights\n- Don't use standard gray shadows — always use teal-tinted (`rgba(0,30,43,...)`)\n- Don't apply serif font to body text — MongoDB Value Serif is hero-only\n- Don't use narrow letter-spacing on Source Code Pro labels — the wide tracking IS the identity\n- Don't mix dark and light section treatments within the same section\n- Don't use warm colors — the palette is strictly cool (teal, green, blue)\n- Don't forget the green accent underlines — they're the signature decorative element\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C425px | Tight single column |\n| Mobile | 425–768px | Standard mobile |\n| Tablet | 768–1024px | 2-column grids begin |\n| Desktop | 1024–1280px | Standard layout |\n| Large Desktop | 1280–1440px | Expanded layout |\n| Ultra-wide | >1440px | Maximum width, generous margins |\n\n### Touch Targets\n- Pill buttons with generous padding\n- Navigation links at 16px with adequate spacing\n- Card surfaces as full-area touch targets\n\n### Collapsing Strategy\n- Hero: MongoDB Value Serif 96px → 64px → scales further\n- Navigation: horizontal mega-menu → hamburger\n- Feature cards: multi-column → stacked\n- Dark\u002Flight sections maintain their mode at all sizes\n- Source Code Pro labels maintain uppercase treatment\n\n### Image Behavior\n- Dashboard screenshots scale proportionally\n- Dark section backgrounds maintained full-width\n- Image radius maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark background: Forest Black (`#001e2b`)\n- Brand accent: MongoDB Green (`#00ed64`)\n- Functional green: Dark Green (`#00684a`)\n- Link blue: Action Blue (`#006cfa`)\n- Text on light: Black (`#000000`)\n- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`)\n- Border light: Silver Teal (`#b8c4c2`)\n- Border dark: Teal Gray (`#3d4f58`)\n\n### Example Component Prompts\n- \"Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot.\"\n- \"Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing.\"\n- \"Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid.\"\n- \"Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background.\"\n- \"Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px).\"\n\n### Iteration Guide\n1. Start with the mode decision: dark (#001e2b) for hero\u002Ffeatures, white for content\n2. MongoDB Green (#00ed64) is electric — use once per section for maximum impact\n3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body\n4. Weight 300 body text creates the airy reading experience — don't default to 400\n5. Source Code Pro uppercase with wide tracking for technical labels — the database voice\n6. Teal-tinted shadows keep everything in the MongoDB color world\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: MongoDB (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --forest: #001e2b; --green: #00ed64; --dark-green: #00684a; --blue: #006cfa;\n    --hover-blue: #3860be; --teal: #1c2d38; --teal-gray: #3d4f58; --cool-gray: #5c6c75;\n    --silver: #b8c4c2; --white: #ffffff; --black: #000000;\n    --shadow-forest: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\n    --font-serif: 'DM Serif Display', Georgia, serif;\n    --font-sans: 'Inter', system-ui, sans-serif;\n    --font-mono: 'Source Code Pro', ui-monospace, monospace;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:300; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:var(--forest); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--white); }\n  .nav-cta { display:inline-block; background:var(--dark-green); color:var(--white); padding:8px 18px; border-radius:100px; font-size:14px; font-weight:600; text-decoration:none; }\n\n  .hero { padding:80px 32px; background:var(--forest); text-align:center; color:var(--white); }\n  .hero h1 { font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10; margin-bottom:16px; }\n  .hero h1 span { color:var(--green); }\n  .hero p { font-size:18px; font-weight:300; line-height:1.50; color:rgba(255,255,255,0.7); max-width:550px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-green { display:inline-block; background:var(--dark-green); color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--dark-green); font-family:var(--font-sans); font-size:14px; font-weight:600; text-decoration:none; }\n  .btn-outline-light { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:64px 32px; background:var(--forest); color:var(--white); }\n  .section-dark .section-inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:8px; }\n  .section-label-light { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:500; line-height:1.33; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--silver); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--silver); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--cool-gray); font-family:var(--font-mono); }\n  .color-swatch-role { font-size:10px; color:var(--cool-gray); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:500; color:var(--cool-gray); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(184,196,194,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:var(--font-mono); font-size:11px; color:var(--cool-gray); margin-top:6px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:500; color:var(--cool-gray); margin-top:8px; }\n  .btn-teal { display:inline-block; background:var(--teal); color:var(--cool-gray); padding:10px 20px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n  .btn-outline-dark { display:inline-block; background:transparent; color:var(--forest); padding:10px 20px; border-radius:8px; border:1px solid var(--silver); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:24px; }\n  .card h3 { font-size:24px; font-weight:500; margin-bottom:8px; }\n  .card p { font-size:16px; font-weight:300; color:var(--cool-gray); line-height:1.50; }\n  .card-accent { border-bottom:2px solid var(--green); display:inline-block; padding-bottom:2px; margin-bottom:12px; font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }\n  .form-input--error { border-color:#e53e3e; box-shadow:0 0 0 2px rgba(229,62,62,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; resize:vertical; outline:none; }\n  .form-state-label { font-size:10px; color:var(--cool-gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:6px; height:28px; }\n  .spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--dark-green); margin-bottom:6px; }\n  .radius-label { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n  .radius-context { font-size:9px; color:var(--cool-gray); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n\n  .footer { padding:40px 32px; text-align:center; background:var(--forest); color:rgba(255,255,255,0.5); font-size:13px; }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:768px) {\n    .hero h1 { font-size:48px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n    .card-grid { grid-template-columns:1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Try Free\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>MongoDB\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Try Free\u003C\u002Fa>\n    \u003Ca class=\"btn-outline-light\" href=\"#\">Contact Sales\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label-light\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#001e2b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Forest Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#001e2b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00ed64\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">MongoDB Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00ed64\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00684a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00684a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#006cfa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Action Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#006cfa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links, interactive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c2d38\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c2d38\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3d4f58\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3d4f58\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5c6c75\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5c6c75\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b8c4c2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b8c4c2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label-light\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 96px \u002F 400 \u002F 1.20 \u002F MongoDB Value Serif\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:500; line-height:1.33;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 36px \u002F 500 \u002F 1.33 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.33;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub — 24px \u002F 500 \u002F 1.33 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:300; line-height:1.50;\">Body Light — Build faster with MongoDB. The developer data platform for modern applications.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 300 \u002F 1.50 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green);\">DATABASE COLLECTION\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Label — 14px \u002F uppercase \u002F +2px \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; color:var(--cool-gray);\">db.collection.find({ status: \"active\" })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body — 16px \u002F 400 \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:2.5px; color:var(--green);\">AGGREGATION PIPELINE\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Micro — 9px \u002F 600 \u002F uppercase \u002F +2.5px \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label-light\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Try Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Green Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-teal\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Teal\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline-dark\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline-light\" style=\"color:var(--cool-gray); border-color:var(--teal-gray);\" href=\"#\">Dark Context\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\n  \u003Cdiv class=\"section-inner\" id=\"cards\">\n    \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\" style=\"background:var(--teal); border-color:var(--teal-gray); color:var(--white);\">\n        \u003Cdiv class=\"card-accent\" style=\"color:var(--green); border-color:var(--green);\">Atlas\u003C\u002Fdiv>\n        \u003Ch3 style=\"color:var(--white);\">Document Model\u003C\u002Fh3>\n        \u003Cp style=\"color:rgba(255,255,255,0.6);\">Map your data naturally with flexible documents. No rigid schemas, no complex joins.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-accent\">Search\u003C\u002Fdiv>\n        \u003Ch3>Full-text Search\u003C\u002Fh3>\n        \u003Cp>Build rich search experiences using the same data you already have in Atlas.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\" style=\"box-shadow: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\">\n        \u003Cdiv class=\"card-accent\" style=\"border-color:var(--blue); color:var(--blue);\">Elevated\u003C\u002Fdiv>\n        \u003Ch3>Vector Search\u003C\u002Fh3>\n        \u003Cp>Build AI-powered applications with native vector search. Forest-tinted shadow elevation.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label-light\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Cluster Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-cluster-0\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Connection String\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"mongodb+srv:\u002F\u002F...\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Database\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid name\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Query\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder='{ \"status\": \"active\" }'>\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label-light\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label-light\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">48px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label-light\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Level 0\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Flat — no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.1) 0px 2px 4px;\">\u003Cdiv class=\"elevation-label\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Light lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.15) 0px 3px 20px;\">\u003Cdiv class=\"elevation-label\">Standard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">General elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\">\u003Cdiv class=\"elevation-label\">Forest\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Teal-tinted primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fwww.mongodb.com\u002F\">mongodb.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: MongoDB (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --forest: #001e2b; --green: #00ed64; --dark-green: #00684a; --blue: #006cfa;\n    --hover-blue: #3860be; --teal: #1c2d38; --teal-gray: #3d4f58; --cool-gray: #8a9ba2;\n    --silver: #3d4f58; --white: #001e2b; --black: #e8edeb;\n    --shadow-forest: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\n    --font-serif: 'DM Serif Display', Georgia, serif;\n    --font-sans: 'Inter', system-ui, sans-serif;\n    --font-mono: 'Source Code Pro', ui-monospace, monospace;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; font-weight:300; line-height:1.50; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:var(--forest); }\n  .nav-brand { font-size:14px; font-weight:500; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--white); }\n  .nav-cta { display:inline-block; background:var(--dark-green); color:var(--white); padding:8px 18px; border-radius:100px; font-size:14px; font-weight:600; text-decoration:none; }\n\n  .hero { padding:80px 32px; background:var(--forest); text-align:center; color:var(--white); }\n  .hero h1 { font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10; margin-bottom:16px; }\n  .hero h1 span { color:var(--green); }\n  .hero p { font-size:18px; font-weight:300; line-height:1.50; color:rgba(255,255,255,0.7); max-width:550px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-green { display:inline-block; background:var(--dark-green); color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--dark-green); font-family:var(--font-sans); font-size:14px; font-weight:600; text-decoration:none; }\n  .btn-outline-light { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:64px 32px; background:var(--forest); color:var(--white); }\n  .section-dark .section-inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:8px; }\n  .section-label-light { font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); margin-bottom:8px; }\n  .section-title { font-size:36px; font-weight:500; line-height:1.33; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--silver); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--silver); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px 12px; }\n  .color-swatch-name { font-size:13px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:11px; color:var(--cool-gray); font-family:var(--font-mono); }\n  .color-swatch-role { font-size:10px; color:var(--cool-gray); margin-top:3px; }\n  .color-group-label { font-size:14px; font-weight:500; color:var(--cool-gray); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(184,196,194,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-family:var(--font-mono); font-size:11px; color:var(--cool-gray); margin-top:6px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:11px; font-weight:500; color:var(--cool-gray); margin-top:8px; }\n  .btn-teal { display:inline-block; background:var(--teal); color:var(--cool-gray); padding:10px 20px; border-radius:100px; border:1px solid var(--teal-gray); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n  .btn-outline-dark { display:inline-block; background:transparent; color:var(--forest); padding:10px 20px; border-radius:8px; border:1px solid var(--silver); font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:24px; }\n  .card h3 { font-size:24px; font-weight:500; margin-bottom:8px; }\n  .card p { font-size:16px; font-weight:300; color:var(--cool-gray); line-height:1.50; }\n  .card-accent { border-bottom:2px solid var(--green); display:inline-block; padding-bottom:2px; margin-bottom:12px; font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,108,250,0.2); }\n  .form-input--error { border-color:#e53e3e; box-shadow:0 0 0 2px rgba(229,62,62,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--silver); padding:10px 12px; border-radius:4px; font-family:var(--font-sans); font-size:16px; font-weight:300; resize:vertical; outline:none; }\n  .form-state-label { font-size:10px; color:var(--cool-gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:6px; height:28px; }\n  .spacing-value { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; background:var(--dark-green); margin-bottom:6px; }\n  .radius-label { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n  .radius-context { font-size:9px; color:var(--cool-gray); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { background:var(--white); border:1px solid var(--silver); border-radius:16px; padding:20px; text-align:center; }\n  .elevation-label { font-size:14px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-family:var(--font-mono); font-size:10px; color:var(--cool-gray); }\n\n  .footer { padding:40px 32px; text-align:center; background:var(--forest); color:rgba(255,255,255,0.5); font-size:13px; }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:768px) {\n    .hero h1 { font-size:48px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n    .card-grid { grid-template-columns:1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Try Free\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#00ed64;color:#001e2b;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>MongoDB\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Try Free\u003C\u002Fa>\n    \u003Ca class=\"btn-outline-light\" href=\"#\">Contact Sales\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label-light\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#001e2b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Forest Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#001e2b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00ed64\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">MongoDB Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00ed64\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00684a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00684a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#006cfa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Action Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#006cfa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links, interactive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c2d38\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c2d38\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3d4f58\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3d4f58\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5c6c75\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cool Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5c6c75\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b8c4c2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b8c4c2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label-light\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:72px; font-weight:400; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 96px \u002F 400 \u002F 1.20 \u002F MongoDB Value Serif\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:500; line-height:1.33;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 36px \u002F 500 \u002F 1.33 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.33;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub — 24px \u002F 500 \u002F 1.33 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:300; line-height:1.50;\">Body Light — Build faster with MongoDB. The developer data platform for modern applications.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 300 \u002F 1.50 \u002F Euclid Circular A\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:14px; text-transform:uppercase; letter-spacing:2px; color:var(--dark-green);\">DATABASE COLLECTION\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Label — 14px \u002F uppercase \u002F +2px \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; color:var(--cool-gray);\">db.collection.find({ status: \"active\" })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body — 16px \u002F 400 \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:2.5px; color:var(--green);\">AGGREGATION PIPELINE\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Micro — 9px \u002F 600 \u002F uppercase \u002F +2.5px \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label-light\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Try Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Green Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-teal\" href=\"#\">Explore\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Teal\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline-dark\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline-light\" style=\"color:var(--cool-gray); border-color:var(--teal-gray);\" href=\"#\">Dark Context\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\n  \u003Cdiv class=\"section-inner\" id=\"cards\">\n    \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n    \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\" style=\"background:var(--teal); border-color:var(--teal-gray); color:var(--white);\">\n        \u003Cdiv class=\"card-accent\" style=\"color:var(--green); border-color:var(--green);\">Atlas\u003C\u002Fdiv>\n        \u003Ch3 style=\"color:var(--white);\">Document Model\u003C\u002Fh3>\n        \u003Cp style=\"color:rgba(255,255,255,0.6);\">Map your data naturally with flexible documents. No rigid schemas, no complex joins.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-accent\">Search\u003C\u002Fdiv>\n        \u003Ch3>Full-text Search\u003C\u002Fh3>\n        \u003Cp>Build rich search experiences using the same data you already have in Atlas.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\" style=\"box-shadow: rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\">\n        \u003Cdiv class=\"card-accent\" style=\"border-color:var(--blue); color:var(--blue);\">Elevated\u003C\u002Fdiv>\n        \u003Ch3>Vector Search\u003C\u002Fh3>\n        \u003Cp>Build AI-powered applications with native vector search. Forest-tinted shadow elevation.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label-light\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Cluster Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-cluster-0\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Connection String\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"mongodb+srv:\u002F\u002F...\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Database\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid name\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Query\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder='{ \"status\": \"active\" }'>\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label-light\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label-light\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">48px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label-light\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Level 0\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Flat — no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.1) 0px 2px 4px;\">\u003Cdiv class=\"elevation-label\">Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Light lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.15) 0px 3px 20px;\">\u003Cdiv class=\"elevation-label\">Standard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">General elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px;\">\u003Cdiv class=\"elevation-label\">Forest\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Teal-tinted primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fwww.mongodb.com\u002F\">mongodb.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Mongodb Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmongodb\u002FDESIGN.md) extracted from the public [MongoDB](https:\u002F\u002Fmongodb.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fmongodb\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mongodb design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Mongodb Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmongodb\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Mongodb Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fmongodb\u002Fpreview-screenshot.png)\n",{"slug":215,"name":216,"category":15,"designMd":217,"previewHtml":218,"previewDarkHtml":219,"readme":220},"notion","Notion","# Design System Inspiration of Notion\n\n## 1. Visual Theme & Atmosphere\n\nNotion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.\n\nThe custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features `\"lnum\"` (lining numerals) and `\"locl\"` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.\n\nWhat makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin `1px solid rgba(0,0,0,0.1)` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.\n\n**Key Characteristics:**\n- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)\n- Warm neutral palette: grays carry yellow-brown undertones (`#f6f5f4` warm white, `#31302e` warm dark)\n- Near-black text via `rgba(0,0,0,0.95)` -- not pure black, creating micro-warmth\n- Ultra-thin borders: `1px solid rgba(0,0,0,0.1)` throughout -- whisper-weight division\n- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth\n- Notion Blue (`#0075de`) as the singular accent color for CTAs and interactive elements\n- Pill badges (9999px radius) with tinted blue backgrounds for status indicators\n- 8px base spacing unit with an organic, non-rigid scale\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Notion Black** (`rgba(0,0,0,0.95)` \u002F `#000000f2`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.\n- **Pure White** (`#ffffff`): Page background, card surfaces, button text on blue.\n- **Notion Blue** (`#0075de`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.\n\n### Brand Secondary\n- **Deep Navy** (`#213183`): Secondary brand color, used sparingly for emphasis and dark feature sections.\n- **Active Blue** (`#005bab`): Button active\u002Fpressed state -- darker variant of Notion Blue.\n\n### Warm Neutral Scale\n- **Warm White** (`#f6f5f4`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.\n- **Warm Dark** (`#31302e`): Dark surface background, dark section text. Warmer than standard grays.\n- **Warm Gray 500** (`#615d59`): Secondary text, descriptions, muted labels.\n- **Warm Gray 300** (`#a39e98`): Placeholder text, disabled states, caption text.\n\n### Semantic Accent Colors\n- **Teal** (`#2a9d99`): Success states, positive indicators.\n- **Green** (`#1aae39`): Confirmation, completion badges.\n- **Orange** (`#dd5b00`): Warning states, attention indicators.\n- **Pink** (`#ff64c8`): Decorative accent, feature highlights.\n- **Purple** (`#391c57`): Premium features, deep accents.\n- **Brown** (`#523410`): Earthy accent, warm feature sections.\n\n### Interactive\n- **Link Blue** (`#0075de`): Primary link color with underline-on-hover.\n- **Link Light Blue** (`#62aef0`): Lighter link variant for dark backgrounds.\n- **Focus Blue** (`#097fe8`): Focus ring on interactive elements.\n- **Badge Blue Bg** (`#f2f9ff`): Pill badge background, tinted blue surface.\n- **Badge Blue Text** (`#097fe8`): Pill badge text, darker blue for readability.\n\n### Shadows & Depth\n- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Multi-layer card elevation.\n- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Five-layer deep elevation for modals and featured content.\n- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Standard division border -- cards, dividers, sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `NotionInter`, with fallbacks: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`\n- **OpenType Features**: `\"lnum\"` (lining numerals) and `\"locl\"` (localized forms) enabled on display and heading text.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |\n| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |\n| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with `\"lnum\"` |\n| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |\n| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |\n| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |\n| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |\n| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |\n| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |\n| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |\n| Nav \u002F Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |\n| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |\n| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |\n| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |\n| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |\n\n### Principles\n- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.\n- **Four-weight system**: 400 (body\u002Freading), 500 (UI\u002Finteractive), 600 (emphasis\u002Fnavigation), 700 (headings\u002Fdisplay). The broader weight range compared to most systems allows nuanced hierarchy.\n- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.\n- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue**\n- Background: `#0075de` (Notion Blue)\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 4px (subtle)\n- Border: `1px solid transparent`\n- Hover: background darkens to `#005bab`\n- Active: scale(0.9) transform\n- Focus: `2px solid` focus outline, `var(--shadow-level-200)` shadow\n- Use: Primary CTA (\"Get Notion free\", \"Try it\")\n\n**Secondary \u002F Tertiary**\n- Background: `rgba(0,0,0,0.05)` (translucent warm gray)\n- Text: `#000000` (near-black)\n- Padding: 8px 16px\n- Radius: 4px\n- Hover: text color shifts, scale(1.05)\n- Active: scale(0.9) transform\n- Use: Secondary actions, form submissions\n\n**Ghost \u002F Link Button**\n- Background: transparent\n- Text: `rgba(0,0,0,0.95)`\n- Decoration: underline on hover\n- Use: Tertiary actions, inline links\n\n**Pill Badge Button**\n- Background: `#f2f9ff` (tinted blue)\n- Text: `#097fe8`\n- Padding: 4px 8px\n- Radius: 9999px (full pill)\n- Font: 12px weight 600\n- Use: Status badges, feature labels, \"New\" tags\n\n### Cards & Containers\n- Background: `#ffffff`\n- Border: `1px solid rgba(0,0,0,0.1)` (whisper border)\n- Radius: 12px (standard cards), 16px (featured\u002Fhero cards)\n- Shadow: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`\n- Hover: subtle shadow intensification\n- Image cards: 12px top radius, image fills top half\n\n### Inputs & Forms\n- Background: `#ffffff`\n- Text: `rgba(0,0,0,0.9)`\n- Border: `1px solid #dddddd`\n- Padding: 6px\n- Radius: 4px\n- Focus: blue outline ring\n- Placeholder: warm gray `#a39e98`\n\n### Navigation\n- Clean horizontal nav on white, not sticky\n- Brand logo left-aligned (33x34px icon + wordmark)\n- Links: NotionInter 15px weight 500-600, near-black text\n- Hover: color shift to `var(--color-link-primary-text-hover)`\n- CTA: blue pill button (\"Get Notion free\") right-aligned\n- Mobile: hamburger menu collapse\n- Product dropdowns with multi-level categorized menus\n\n### Image Treatment\n- Product screenshots with `1px solid rgba(0,0,0,0.1)` border\n- Top-rounded images: `12px 12px 0px 0px` radius\n- Dashboard\u002Fworkspace preview screenshots dominate feature sections\n- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)\n\n### Distinctive Components\n\n**Feature Cards with Illustrations**\n- Large illustrative headers (The Great Wave, product UI screenshots)\n- 12px radius card with whisper border\n- Title at 22px weight 700, description at 16px weight 400\n- Warm white (`#f6f5f4`) background variant for alternating sections\n\n**Trust Bar \u002F Logo Grid**\n- Company logos (trusted teams section) in their brand colors\n- Horizontal scroll or grid layout with team counts\n- Metric display: large number + description pattern\n\n**Metric Cards**\n- Large number display (e.g., \"$4,200 ROI\")\n- NotionInter 40px+ weight 700 for the metric\n- Description below in warm gray body text\n- Whisper-bordered card container\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px\n- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (80-120px)\n- Feature sections: 2-3 column grids for cards\n- Full-width warm white (`#f6f5f4`) section backgrounds for alternation\n- Code\u002Fdashboard screenshots as contained with whisper border\n\n### Whitespace Philosophy\n- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.\n- **Warm alternation**: White sections alternate with warm white (`#f6f5f4`) sections, creating gentle visual rhythm without harsh color breaks.\n- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.\n\n### Border Radius Scale\n- Micro (4px): Buttons, inputs, functional interactive elements\n- Subtle (5px): Links, list items, menu items\n- Standard (8px): Small cards, containers, inline elements\n- Comfortable (12px): Standard cards, feature containers, image tops\n- Large (16px): Hero cards, featured content, promotional blocks\n- Full Pill (9999px): Badges, pills, status indicators\n- Circle (100%): Tab indicators, avatars\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | Standard borders, card outlines, dividers |\n| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |\n| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |\n| Focus (Accessibility) | `2px solid var(--focus-color)` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.\n\n### Decorative Depth\n- Hero section: decorative character illustrations (playful, hand-drawn style)\n- Section alternation: white to warm white (`#f6f5f4`) background shifts\n- No hard section borders -- separation comes from background color changes and spacing\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C400px | Tight single column, minimal padding |\n| Mobile | 400-600px | Standard mobile, stacked layout |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1080px | Full card grids, expanded padding |\n| Desktop Small | 1080-1200px | Standard desktop layout |\n| Desktop | 1200-1440px | Full layout, maximum content width |\n| Large Desktop | >1440px | Centered, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding (8px-16px vertical)\n- Navigation links at 15px with adequate spacing\n- Pill badges have 8px horizontal padding for tap targets\n- Mobile menu toggle uses standard hamburger button\n\n### Collapsing Strategy\n- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing\n- Navigation: horizontal links + blue CTA -> hamburger menu\n- Feature cards: 3-column -> 2-column -> single column stacked\n- Product screenshots: maintain aspect ratio with responsive images\n- Trust bar logos: grid -> horizontal scroll on mobile\n- Footer: multi-column -> stacked single column\n- Section spacing: 80px+ -> 48px on mobile\n\n### Image Behavior\n- Workspace screenshots maintain whisper border at all sizes\n- Hero illustrations scale proportionally\n- Product screenshots use responsive images with consistent border radius\n- Full-width warm white sections maintain edge-to-edge treatment\n\n## 8. Accessibility & States\n\n### Focus System\n- All interactive elements receive visible focus indicators\n- Focus outline: `2px solid` with focus color + shadow level 200\n- Tab navigation supported throughout all interactive components\n- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)\n\n### Interactive States\n- **Default**: Standard appearance with whisper borders\n- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links\n- **Active\u002FPressed**: scale(0.9) transform, darker background variant\n- **Focus**: Blue outline ring with shadow reinforcement\n- **Disabled**: Warm gray (`#a39e98`) text, reduced opacity\n\n### Color Contrast\n- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio\n- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)\n- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)\n- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Notion Blue (`#0075de`)\n- Background: Pure White (`#ffffff`)\n- Alt Background: Warm White (`#f6f5f4`)\n- Heading text: Near-Black (`rgba(0,0,0,0.95)`)\n- Body text: Near-Black (`rgba(0,0,0,0.95)`)\n- Secondary text: Warm Gray 500 (`#615d59`)\n- Muted text: Warm Gray 300 (`#a39e98`)\n- Border: `1px solid rgba(0,0,0,0.1)`\n- Link: Notion Blue (`#0075de`)\n- Focus ring: Focus Blue (`#097fe8`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover).\"\n- \"Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59.\"\n- \"Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px.\"\n- \"Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius).\"\n- \"Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px.\"\n\n### Iteration Guide\n1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray\n2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px\n3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)\n4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier\n5. Shadows use 4-5 layers with individual opacity never exceeding 0.05\n6. The warm white (#f6f5f4) section background is essential for visual rhythm\n7. Pill badges (9999px) for status\u002Ftags, 4px radius for buttons and inputs\n8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Notion (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: rgba(0,0,0,0.95);\n    --black-solid: #000000;\n    --white: #ffffff;\n    --warm-white: #f6f5f4;\n    --warm-dark: #31302e;\n    --gray-500: #615d59;\n    --gray-300: #a39e98;\n    --notion-blue: #0075de;\n    --active-blue: #005bab;\n    --focus-blue: #097fe8;\n    --link-light-blue: #62aef0;\n    --badge-bg: #f2f9ff;\n    --badge-text: #097fe8;\n    --teal: #2a9d99;\n    --green: #1aae39;\n    --orange: #dd5b00;\n    --pink: #ff64c8;\n    --purple: #391c57;\n    --brown: #523410;\n    --deep-navy: #213183;\n    --border-whisper: 1px solid rgba(0,0,0,0.1);\n    --shadow-card: rgba(0,0,0,0.04) 0px 4px 18px 0px, rgba(0,0,0,0.027) 0px 2.025px 7.85px 0px, rgba(0,0,0,0.02) 0px 0.8px 2.93px 0px, rgba(0,0,0,0.01) 0px 0.175px 1.04px 0px;\n    --shadow-deep: rgba(0,0,0,0.01) 0px 1px 3px 0px, rgba(0,0,0,0.02) 0px 3px 7px 0px, rgba(0,0,0,0.02) 0px 7px 15px 0px, rgba(0,0,0,0.04) 0px 14px 28px 0px, rgba(0,0,0,0.05) 0px 23px 52px 0px;\n    --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--white);\n    border-bottom: var(--border-whisper);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); text-decoration: underline; }\n  .nav-cta {\n    display: inline-block; background: var(--notion-blue); color: var(--white);\n    padding: 6px 14px; border-radius: 4px; font-size: 15px; font-weight: 600;\n    text-decoration: none; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: var(--active-blue); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 64px; font-weight: 700; line-height: 1.00;\n    letter-spacing: -2.125px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-blue {\n    display: inline-block; background: var(--notion-blue); color: var(--white);\n    padding: 10px 24px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-blue:hover { background: var(--active-blue); }\n  .btn-ghost {\n    display: inline-block; background: rgba(0,0,0,0.05); color: var(--black);\n    padding: 10px 24px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-ghost:hover { background: rgba(0,0,0,0.1); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section--warm { background: var(--warm-white); }\n  .section--warm .section-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }\n  .section-label { font-size: 12px; font-weight: 600; color: var(--gray-300); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 700; line-height: 1.20; letter-spacing: -1px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: var(--border-whisper); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; border: var(--border-whisper); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-300); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: var(--border-whisper); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; font-family: monospace; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; }\n  .btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.125px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 12px; padding: 24px; border: var(--border-whisper); box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-deep); }\n  .card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 9999px; margin-bottom: 12px; letter-spacing: 0.125px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: 1px solid #dddddd; padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(0,117,222,0.2); }\n  .form-input--focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(0,117,222,0.2); }\n  .form-input--error { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(221,91,0,0.2); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: 1px solid #dddddd; padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-300); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--warm-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--warm-dark); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }\n  .radius-context { font-size: 10px; color: var(--gray-300); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--gray-300); font-family: monospace; }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: var(--border-whisper); font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--notion-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; letter-spacing: -1.5px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section--warm .section-inner { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Notion free\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Notion\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-blue\" href=\"#\">Get Notion free\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.95)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Notion Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.95)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid rgba(0,0,0,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0075de\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Notion Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0075de\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Warm Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f6f5f4; border-bottom:1px solid rgba(0,0,0,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f6f5f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Surface tint, sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#31302e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#31302e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#615d59\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#615d59\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a39e98\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a39e98\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholder, muted\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic Accents\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2a9d99\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2a9d99\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1aae39\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1aae39\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Confirmation\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dd5b00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dd5b00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff64c8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff64c8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Decorative accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#391c57\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#391c57\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Premium features\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#523410\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brown\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#523410\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Earthy accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#005bab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Active Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#005bab\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button active state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#097fe8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#097fe8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#213183\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#213183\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f9ff; border-bottom:1px solid rgba(0,0,0,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Badge Bg\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f9ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pill badge surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:700; line-height:1.00; letter-spacing:-2.125px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 64px \u002F 700 \u002F 1.00 \u002F -2.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px; font-weight:700; line-height:1.04; letter-spacing:-1.875px;\">Display Secondary\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Secondary -- 54px \u002F 700 \u002F 1.04 \u002F -1.875px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.00; letter-spacing:-1.5px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 48px \u002F 700 \u002F 1.00 \u002F -1.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:700; line-height:1.50;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading Large -- 40px \u002F 700 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:700; line-height:1.23; letter-spacing:-0.625px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 700 \u002F 1.23 \u002F -0.625px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:700; line-height:1.27; letter-spacing:-0.25px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title -- 22px \u002F 700 \u002F 1.27 \u002F -0.25px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.125px;\">Body Large -- Your workspace for docs, projects, and knowledge. All in one place.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 20px \u002F 600 \u002F 1.40 \u002F -0.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium -- Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium -- 16px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body -- Standard reading text for articles and descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:600; line-height:1.33;\">Nav \u002F Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav \u002F Button -- 15px \u002F 600 \u002F 1.33 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption -- Metadata and secondary labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; line-height:1.33; letter-spacing:0.125px;\">Badge \u002F Micro Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Badge -- 12px \u002F 600 \u002F 1.33 \u002F 0.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Get Notion free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Request a demo\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">New\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(42,157,153,0.1); color:var(--teal); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Available\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Teal Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(221,91,0,0.1); color:var(--orange); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Orange Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(26,174,57,0.1); color:var(--green); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Confirmed\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Green Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">Workspace\u003C\u002Fdiv>\n      \u003Ch3>Custom Agents\u003C\u002Fh3>\n      \u003Cp>Build and deploy AI agents tailored to your team's workflow. Automate tasks, answer questions, and streamline processes.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-deep);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(42,157,153,0.1); color:var(--teal);\">Productivity\u003C\u002Fdiv>\n      \u003Ch3>Connected Wikis\u003C\u002Fh3>\n      \u003Cp>Centralize team knowledge in interconnected wikis. Keep documentation organized and always up to date with real-time collaboration.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,100,200,0.1); color:var(--pink);\">Projects\u003C\u002Fdiv>\n      \u003Ch3>Team Projects\u003C\u002Fh3>\n      \u003Cp>Manage projects with flexible views: boards, timelines, lists, and calendars. Everything your team needs, all in one workspace.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Workspace Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My Team Workspace\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"team@company.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (orange ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workspace...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Links, menus\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow:none;\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper);\">\u003Cdiv class=\"elevation-label\">Level 1: Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid rgba(0,0,0,0.1)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 2: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">4-layer stack, max 0.04\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow: var(--shadow-deep);\">\u003Cdiv class=\"elevation-label\">Level 3: Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">5-layer stack, 52px blur\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fnotion.com\u002F\">notion.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Notion (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: rgba(255,255,255,0.92);\n    --black-solid: #e8e8e8;\n    --white: #191919;\n    --warm-white: #1e1e1e;\n    --warm-dark: #d4d3d1;\n    --gray-500: #a8a5a0;\n    --gray-300: #6b6763;\n    --notion-blue: #4da3f0;\n    --active-blue: #3a8fdc;\n    --focus-blue: #5aacf5;\n    --link-light-blue: #62aef0;\n    --badge-bg: #1a2a3a;\n    --badge-text: #5aacf5;\n    --teal: #3dbdb9;\n    --green: #2fca52;\n    --orange: #f07020;\n    --pink: #ff80d5;\n    --purple: #a07acc;\n    --brown: #c49060;\n    --deep-navy: #6878c8;\n    --border-whisper: 1px solid rgba(255,255,255,0.1);\n    --shadow-card: rgba(0,0,0,0.2) 0px 4px 18px 0px, rgba(0,0,0,0.15) 0px 2.025px 7.85px 0px, rgba(0,0,0,0.1) 0px 0.8px 2.93px 0px, rgba(0,0,0,0.08) 0px 0.175px 1.04px 0px;\n    --shadow-deep: rgba(0,0,0,0.15) 0px 1px 3px 0px, rgba(0,0,0,0.2) 0px 3px 7px 0px, rgba(0,0,0,0.2) 0px 7px 15px 0px, rgba(0,0,0,0.25) 0px 14px 28px 0px, rgba(0,0,0,0.3) 0px 23px 52px 0px;\n    --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--white);\n    border-bottom: var(--border-whisper);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-500); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); text-decoration: underline; }\n  .nav-cta {\n    display: inline-block; background: var(--notion-blue); color: #191919;\n    padding: 6px 14px; border-radius: 4px; font-size: 15px; font-weight: 600;\n    text-decoration: none; transition: background 0.15s;\n  }\n  .nav-cta:hover { background: var(--active-blue); }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--black-solid); color: var(--white);\n    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 64px; font-weight: 700; line-height: 1.00;\n    letter-spacing: -2.125px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.50; color: var(--gray-500); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-blue {\n    display: inline-block; background: var(--notion-blue); color: #191919;\n    padding: 10px 24px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-blue:hover { background: var(--active-blue); }\n  .btn-ghost {\n    display: inline-block; background: rgba(255,255,255,0.08); color: var(--black);\n    padding: 10px 24px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 15px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-ghost:hover { background: rgba(255,255,255,0.14); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section--warm { background: var(--warm-white); }\n  .section--warm .section-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }\n  .section-label { font-size: 12px; font-weight: 600; color: var(--gray-300); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 700; line-height: 1.20; letter-spacing: -1px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: var(--border-whisper); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; border: var(--border-whisper); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-300); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-500); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: var(--border-whisper); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; font-family: monospace; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-300); margin-top: 8px; }\n  .btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: 0.125px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 12px; padding: 24px; border: var(--border-whisper); box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-deep); }\n  .card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-500); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 9999px; margin-bottom: 12px; letter-spacing: 0.125px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--warm-white); color: var(--black);\n    border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(77,163,240,0.25); }\n  .form-input--focus { border-color: var(--notion-blue); box-shadow: 0 0 0 2px rgba(77,163,240,0.25); }\n  .form-input--error { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(240,112,32,0.25); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--warm-white); color: var(--black);\n    border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-300); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--warm-dark); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--warm-dark); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--gray-300); font-family: monospace; }\n  .radius-context { font-size: 10px; color: var(--gray-300); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--gray-300); font-family: monospace; }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: var(--border-whisper); font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--notion-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; letter-spacing: -1.5px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section--warm .section-inner { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Notion free\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Notion\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-blue\" href=\"#\">Get Notion free\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.95)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Notion Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.95)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0075de\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Notion Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0075de\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Warm Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f6f5f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f6f5f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Surface tint, sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#31302e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#31302e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#615d59\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#615d59\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a39e98\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a39e98\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholder, muted\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic Accents\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2a9d99\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2a9d99\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1aae39\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1aae39\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Confirmation\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dd5b00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dd5b00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff64c8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff64c8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Decorative accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#391c57\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#391c57\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Premium features\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#523410\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brown\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#523410\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Earthy accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#005bab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Active Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#005bab\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button active state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#097fe8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#097fe8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#213183\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#213183\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f2f9ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Badge Bg\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f9ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pill badge surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:700; line-height:1.00; letter-spacing:-2.125px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 64px \u002F 700 \u002F 1.00 \u002F -2.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:54px; font-weight:700; line-height:1.04; letter-spacing:-1.875px;\">Display Secondary\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Secondary -- 54px \u002F 700 \u002F 1.04 \u002F -1.875px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.00; letter-spacing:-1.5px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 48px \u002F 700 \u002F 1.00 \u002F -1.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:700; line-height:1.50;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading Large -- 40px \u002F 700 \u002F 1.50 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:700; line-height:1.23; letter-spacing:-0.625px;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 700 \u002F 1.23 \u002F -0.625px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:700; line-height:1.27; letter-spacing:-0.25px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title -- 22px \u002F 700 \u002F 1.27 \u002F -0.25px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.40; letter-spacing:-0.125px;\">Body Large -- Your workspace for docs, projects, and knowledge. All in one place.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 20px \u002F 600 \u002F 1.40 \u002F -0.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium -- Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium -- 16px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body -- Standard reading text for articles and descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:600; line-height:1.33;\">Nav \u002F Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav \u002F Button -- 15px \u002F 600 \u002F 1.33 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption -- Metadata and secondary labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; line-height:1.33; letter-spacing:0.125px;\">Badge \u002F Micro Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Badge -- 12px \u002F 600 \u002F 1.33 \u002F 0.125px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Get Notion free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Request a demo\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">New\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(61,189,185,0.15); color:var(--teal); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Available\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Teal Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(240,112,32,0.15); color:var(--orange); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Orange Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(47,202,82,0.15); color:var(--green); padding:4px 8px; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.125px;\">Confirmed\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Green Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">Workspace\u003C\u002Fdiv>\n      \u003Ch3>Custom Agents\u003C\u002Fh3>\n      \u003Cp>Build and deploy AI agents tailored to your team's workflow. Automate tasks, answer questions, and streamline processes.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-deep);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(61,189,185,0.15); color:var(--teal);\">Productivity\u003C\u002Fdiv>\n      \u003Ch3>Connected Wikis\u003C\u002Fh3>\n      \u003Cp>Centralize team knowledge in interconnected wikis. Keep documentation organized and always up to date with real-time collaboration.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,128,213,0.15); color:var(--pink);\">Projects\u003C\u002Fdiv>\n      \u003Ch3>Team Projects\u003C\u002Fh3>\n      \u003Cp>Manage projects with flexible views: boards, timelines, lists, and calendars. Everything your team needs, all in one workspace.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Workspace Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My Team Workspace\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"team@company.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (orange ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workspace...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Links, menus\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Cdiv class=\"section--warm\">\n\u003Cdiv class=\"section-inner\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow:none;\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper);\">\u003Cdiv class=\"elevation-label\">Level 1: Whisper\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid rgba(255,255,255,0.1)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 2: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">4-layer stack\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: var(--border-whisper); box-shadow: var(--shadow-deep);\">\u003Cdiv class=\"elevation-label\">Level 3: Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">5-layer stack, 52px blur\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fnotion.com\u002F\">notion.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Notion Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fnotion\u002FDESIGN.md) extracted from the public [Notion](https:\u002F\u002Fnotion.so\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fnotion\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Notion design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Notion Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fnotion\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Notion Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fnotion\u002Fpreview-screenshot.png)\n",{"slug":222,"name":223,"category":7,"designMd":224,"previewHtml":225,"previewDarkHtml":226,"readme":227},"nvidia","Nvidia","# Design System Inspiration of NVIDIA\n\n## 1. Visual Theme & Atmosphere\n\nNVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (`#000000`) and white (`#ffffff`) foundation, punctuated by NVIDIA's signature green (`#76b900`) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals \"NVIDIA\" to anyone in technology.\n\nThe custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates a clean, industrial typographic voice. Headings at 36px bold with tight 1.25 line-height create dense, authoritative blocks of text. The font lacks the geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic, and engineering-focused. Body text runs at 15-16px, comfortable for reading but not generous, maintaining the sense that screen real estate is optimized like GPU memory.\n\nWhat distinguishes NVIDIA's design from other dark-background tech sites is the disciplined use of the green accent. The `#76b900` appears in borders (`2px solid #76b900`), link underlines (`underline 2px rgb(118, 185, 0)`), and CTAs -- but never as backgrounds or large surface areas on the main content. The green is a signal, not a surface. Combined with a deep shadow system (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) and minimal border radius (1-2px), the overall effect is of precision engineering hardware rendered in pixels.\n\n**Key Characteristics:**\n- NVIDIA Green (`#76b900`) as pure accent -- borders, underlines, and interactive highlights only\n- Black (`#000000`) dominant background with white (`#ffffff`) text on dark sections\n- NVIDIA-EMEA custom font with Arial\u002FHelvetica fallback -- industrial, European, clean\n- Tight line-heights (1.25 for headings) creating dense, authoritative text blocks\n- Minimal border radius (1-2px) -- sharp, engineered corners throughout\n- Green-bordered buttons (`2px solid #76b900`) as primary interactive pattern\n- Font Awesome 6 Pro\u002FSharp icon system at weight 900 for sharp iconography\n- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling rich interactive components\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **NVIDIA Green** (`#76b900`): The signature -- borders, link underlines, CTA outlines, active indicators. Never used as large surface fills.\n- **True Black** (`#000000`): Primary page background, text on light surfaces, dominant tone.\n- **Pure White** (`#ffffff`): Text on dark backgrounds, light section backgrounds, card surfaces.\n\n### Extended Brand Palette\n- **NVIDIA Green Light** (`#bff230`): Bright lime accent for highlights and hover states.\n- **Orange 400** (`#df6500`): Warm accent for alerts, featured badges, or energy-related contexts.\n- **Yellow 300** (`#ef9100`): Secondary warm accent, product category highlights.\n- **Yellow 050** (`#feeeb2`): Light warm surface for callout backgrounds.\n\n### Status & Semantic\n- **Red 500** (`#e52020`): Error states, destructive actions, critical alerts.\n- **Red 800** (`#650b0b`): Deep red for severe warning backgrounds.\n- **Green 500** (`#3f8500`): Success states, positive indicators (darker than brand green).\n- **Blue 700** (`#0046a4`): Informational accents, link hover alternative.\n\n### Decorative\n- **Purple 800** (`#4d1368`): Deep purple for gradient ends, premium\u002FAI contexts.\n- **Purple 100** (`#f9d4ff`): Light purple surface tint.\n- **Fuchsia 700** (`#8c1c55`): Rich accent for special promotions or featured content.\n\n### Neutral Scale\n- **Gray 300** (`#a7a7a7`): Muted text, disabled labels.\n- **Gray 400** (`#898989`): Secondary text, metadata.\n- **Gray 500** (`#757575`): Tertiary text, placeholders, footers.\n- **Gray Border** (`#5e5e5e`): Subtle borders, divider lines.\n- **Near Black** (`#1a1a1a`): Dark surfaces, card backgrounds on black pages.\n\n### Interactive States\n- **Link Default (dark bg)** (`#ffffff`): White links on dark backgrounds.\n- **Link Default (light bg)** (`#000000`): Black links with green underline on light backgrounds.\n- **Link Hover** (`#3860be`): Blue shift on hover across all link variants.\n- **Button Hover** (`#1eaedb`): Teal highlight for button hover states.\n- **Button Active** (`#007fff`): Bright blue for active\u002Fpressed button states.\n- **Focus Ring** (`#000000 solid 2px`): Black outline for keyboard focus.\n\n### Shadows & Depth\n- **Card Shadow** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Subtle ambient shadow for elevated cards.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `NVIDIA-EMEA`, with fallbacks: `Arial, Helvetica, sans-serif`\n- **Icon Font**: `Font Awesome 6 Pro` (weight 900 for solid icons, 700 for regular)\n- **Icon Sharp**: `Font Awesome 6 Sharp` (weight 300 for light icons, 400 for regular)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Maximum impact headlines |\n| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Section titles, card headings |\n| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Feature descriptions, subtitles |\n| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Card and module headings |\n| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Emphasized body, lead paragraphs |\n| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Strong labels, nav items |\n| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Secondary content, descriptions |\n| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Emphasized secondary content |\n| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Primary CTA buttons |\n| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Standard buttons |\n| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Small\u002Fcompact buttons |\n| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Navigation links |\n| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, nav labels |\n| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, timestamps |\n| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Fine print, legal |\n| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, tiny badges |\n| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Smallest UI text |\n\n### Principles\n- **Bold as the default voice**: NVIDIA leans heavily on weight 700 for headings, buttons, links, and labels. The 400 weight is reserved for body text and descriptions -- everything else is bold, projecting confidence and authority.\n- **Tight headings, relaxed body**: Heading line-height is consistently 1.25 (tight), while body text relaxes to 1.50-1.67. This contrast creates visual density at the top of content blocks and comfortable readability in paragraphs.\n- **Uppercase for navigation**: Link labels use `text-transform: uppercase` with weight 700, creating a navigation voice that reads like hardware specification labels.\n- **No decorative tracking**: Letter-spacing is normal throughout, except for compact buttons (0.144px). The font itself carries the industrial character without manipulation.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Green Border)**\n- Background: `transparent`\n- Text: `#000000`\n- Padding: 11px 13px\n- Border: `2px solid #76b900`\n- Radius: 2px\n- Font: 16px weight 700\n- Hover: background `#1eaedb`, text `#ffffff`\n- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`, scale(1)\n- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`, opacity 0.9\n- Use: Primary CTA (\"Learn More\", \"Explore Solutions\")\n\n**Secondary (Green Border Thin)**\n- Background: transparent\n- Border: `1px solid #76b900`\n- Radius: 2px\n- Use: Secondary actions, alternative CTAs\n\n**Compact \u002F Inline**\n- Font: 14.4px weight 700\n- Letter-spacing: 0.144px\n- Line-height: 1.00\n- Use: Inline CTAs, compact navigation\n\n### Cards & Containers\n- Background: `#ffffff` (light) or `#1a1a1a` (dark sections)\n- Border: none (clean edges) or `1px solid #5e5e5e`\n- Radius: 2px\n- Shadow: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` for elevated cards\n- Hover: shadow intensification\n- Padding: 16-24px internal\n\n### Links\n- **On Dark Background**: `#ffffff`, no underline, hover shifts to `#3860be`\n- **On Light Background**: `#000000` or `#1a1a1a`, underline `2px solid #76b900`, hover shifts to `#3860be`, underline removed\n- **Green Links**: `#76b900`, hover shifts to `#3860be`\n- **Muted Links**: `#666666`, hover shifts to `#3860be`\n\n### Navigation\n- Dark black background (`#000000`)\n- Logo left-aligned, prominent NVIDIA wordmark\n- Links: NVIDIA-EMEA 14px weight 700 uppercase, `#ffffff`\n- Hover: color shift, no underline change\n- Mega-menu dropdowns for product categories\n- Sticky on scroll with backdrop\n\n### Image Treatment\n- Product\u002FGPU renders as hero images, often full-width\n- Screenshot images with subtle shadow for depth\n- Green gradient overlays on dark hero sections\n- Circular avatar containers with 50% radius\n\n### Distinctive Components\n\n**Product Cards**\n- Clean white or dark card with minimal radius (2px)\n- Green accent border or underline on title\n- Bold heading + lighter description pattern\n- CTA with green border at bottom\n\n**Tech Spec Tables**\n- Industrial grid layouts\n- Alternating row backgrounds (subtle gray shift)\n- Bold labels, regular values\n- Green highlights for key metrics\n\n**Cookie\u002FConsent Banner**\n- Fixed bottom positioning\n- Rounded buttons (2px radius)\n- Gray border treatments\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px\n- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px\n- Section spacing: 48-80px vertical padding\n\n### Grid & Container\n- Max content width: approximately 1200px (contained)\n- Full-width hero sections with contained text\n- Feature sections: 2-3 column grids for product cards\n- Single-column for article\u002Fblog content\n- Sidebar layouts for documentation\n\n### Whitespace Philosophy\n- **Purposeful density**: NVIDIA uses tighter spacing than typical SaaS sites, reflecting the density of technical content. White space exists to separate concepts, not to create luxury emptiness.\n- **Section rhythm**: Dark sections alternate with white sections, using background color (not just spacing) to separate content blocks.\n- **Card density**: Product cards sit close together with 16-20px gaps, creating a catalog feel rather than a gallery feel.\n\n### Border Radius Scale\n- Micro (1px): Inline spans, tiny elements\n- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly everything\n- Circle (50%): Avatar images, circular tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page backgrounds, inline text |\n| Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Standard cards, modals |\n| Border (Level 1b) | `1px solid #5e5e5e` | Content dividers, section borders |\n| Green accent (Level 2) | `2px solid #76b900` | Active elements, CTAs, selected items |\n| Focus (Accessibility) | `2px solid #000000` outline | Keyboard focus ring |\n\n**Shadow Philosophy**: NVIDIA's depth system is minimal and utilitarian. There is essentially one shadow value -- a 5px ambient blur at 30% opacity -- used sparingly for cards and modals. The primary depth signal is not shadow but _color contrast_: black backgrounds next to white sections, green borders on black surfaces. This creates hardware-like visual layering where depth comes from material difference, not simulated light.\n\n### Decorative Depth\n- Green gradient washes behind hero content\n- Dark-to-darker gradients (black to near-black) for section transitions\n- No glassmorphism or blur effects -- clarity over atmosphere\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C375px | Compact single column, reduced padding |\n| Mobile | 375-425px | Standard mobile layout |\n| Mobile Large | 425-600px | Wider mobile, some 2-col hints |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1024px | Full card grids, expanded nav |\n| Desktop | 1024-1350px | Standard desktop layout |\n| Large Desktop | >1350px | Maximum content width, generous margins |\n\n### Touch Targets\n- Buttons use 11px 13px padding for comfortable tap targets\n- Navigation links at 14px uppercase with adequate spacing\n- Green-bordered buttons provide high-contrast touch targets on dark backgrounds\n- Mobile: hamburger menu collapse with full-screen overlay\n\n### Collapsing Strategy\n- Hero: 36px heading scales down proportionally\n- Navigation: full horizontal nav collapses to hamburger menu at ~1024px\n- Product cards: 3-column to 2-column to single column stacked\n- Footer: multi-column grid collapses to single stacked column\n- Section spacing: 64-80px reduces to 32-48px on mobile\n- Images: maintain aspect ratio, scale to container width\n\n### Image Behavior\n- GPU\u002Fproduct renders maintain high resolution at all sizes\n- Hero images scale proportionally with viewport\n- Card images use consistent aspect ratios\n- Full-bleed dark sections maintain edge-to-edge treatment\n\n## 8. Responsive Behavior (Extended)\n\n### Typography Scaling\n- Display 36px scales to ~24px on mobile\n- Section headings 24px scale to ~20px on mobile\n- Body text maintains 15-16px across all breakpoints\n- Button text maintains 16px for consistent tap targets\n\n### Dark\u002FLight Section Strategy\n- Dark sections (black bg, white text) alternate with light sections (white bg, black text)\n- The green accent remains consistent across both surface types\n- On dark: links are white, underlines are green\n- On light: links are black, underlines are green\n- This alternation creates natural scroll rhythm and content grouping\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary accent: NVIDIA Green (`#76b900`)\n- Background dark: True Black (`#000000`)\n- Background light: Pure White (`#ffffff`)\n- Heading text (dark bg): White (`#ffffff`)\n- Heading text (light bg): Black (`#000000`)\n- Body text (light bg): Black (`#000000`) or Near Black (`#1a1a1a`)\n- Body text (dark bg): White (`#ffffff`) or Gray 300 (`#a7a7a7`)\n- Link hover: Blue (`#3860be`)\n- Border accent: `2px solid #76b900`\n- Button hover: Teal (`#1eaedb`)\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white.\"\n- \"Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900.\"\n- \"Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned.\"\n- \"Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap.\"\n- \"Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575.\"\n\n### Iteration Guide\n1. Always use `#76b900` as accent, never as a background fill -- it's a signal color for borders, underlines, and highlights\n2. Buttons are transparent with green borders by default -- filled backgrounds appear only on hover\u002Factive states\n3. Weight 700 is the dominant voice for all interactive and heading elements; 400 is only for body paragraphs\n4. Border radius is 2px for everything -- this sharp, minimal rounding is core to the industrial aesthetic\n5. Dark sections use white text; light sections use black text -- green accent works identically on both\n6. Link hover is always `#3860be` (blue) regardless of the link's default color\n7. Line-height 1.25 for headings, 1.50-1.67 for body text -- maintain this contrast for visual hierarchy\n8. Navigation uses uppercase 14px bold -- this hardware-label typography is part of the brand voice\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: NVIDIA (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --nvidia-green: #76b900;\n    --nvidia-green-light: #bff230;\n    --black: #000000;\n    --white: #ffffff;\n    --near-black: #1a1a1a;\n    --gray-300: #a7a7a7;\n    --gray-400: #898989;\n    --gray-500: #757575;\n    --gray-border: #5e5e5e;\n    --link-hover: #3860be;\n    --btn-hover: #1eaedb;\n    --btn-active: #007fff;\n    --orange-400: #df6500;\n    --yellow-300: #ef9100;\n    --red-500: #e52020;\n    --green-500: #3f8500;\n    --blue-700: #0046a4;\n    --purple-800: #4d1368;\n    --fuchsia-700: #8c1c55;\n    --purple-100: #f9d4ff;\n    --yellow-050: #feeeb2;\n    --shadow-card: rgba(0,0,0,0.3) 0px 0px 5px 0px;\n    --font-primary: 'Inter', Arial, Helvetica, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--black);\n    border-bottom: 2px solid var(--nvidia-green);\n  }\n  .nav-brand { font-size: 14px; font-weight: 700; color: var(--white); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 700; color: var(--gray-300); text-decoration: none; text-transform: uppercase; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--nvidia-green); }\n  .nav-cta {\n    display: inline-block; background: transparent; color: var(--white);\n    padding: 8px 16px; border-radius: 2px; font-size: 14px; font-weight: 700;\n    text-decoration: none; border: 2px solid var(--nvidia-green); transition: all 0.15s;\n  }\n  .nav-cta:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; background: var(--black); }\n  .hero h1 {\n    font-size: 48px; font-weight: 700; line-height: 1.25;\n    color: var(--white); margin-bottom: 16px;\n  }\n  .hero h1 span { color: var(--nvidia-green); }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.67; color: var(--gray-300); max-width: 640px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: transparent; color: var(--white);\n    padding: 11px 20px; border-radius: 2px; border: 2px solid var(--nvidia-green);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 700;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }\n  .btn-secondary {\n    display: inline-block; background: transparent; color: var(--gray-300);\n    padding: 11px 20px; border-radius: 2px; border: 1px solid var(--gray-border);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 700;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-secondary:hover { color: var(--white); border-color: var(--gray-300); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 700; color: var(--nvidia-green); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 2px solid var(--nvidia-green); margin: 0; opacity: 0.3; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-card); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 700; color: var(--gray-500); margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5; }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: monospace; font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 2px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; border-top: 2px solid var(--nvidia-green); }\n  .card:hover { box-shadow: rgba(0,0,0,0.4) 0px 0px 12px 0px; }\n  .card h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }\n  .card p { font-size: 15px; color: var(--gray-500); line-height: 1.67; }\n  .card-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-bottom: 12px; letter-spacing: 0.5px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;\n    font-family: var(--font-primary); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }\n  .form-input--focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }\n  .form-input--error { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;\n    font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--nvidia-green); border-radius: 1px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 2px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }\n  .elevation-desc { font-family: monospace; font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: var(--black); color: var(--gray-500); font-size: 13px; border-top: 2px solid var(--nvidia-green); }\n  .footer a { color: var(--nvidia-green); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 32px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Explore GPUs\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>NVIDIA\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Explore Solutions\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#76b900\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">NVIDIA Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#76b900\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Accent, borders, CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">True Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e5e5e5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light backgrounds, text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#bff230\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#bff230\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Bright accents\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Extended Palette\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#df6500\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#df6500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ef9100\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ef9100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary warm\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4d1368\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4d1368\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">AI \u002F Premium\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8c1c55\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fuchsia 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8c1c55\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Promotions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0046a4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0046a4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Informational\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e52020\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e52020\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3f8500\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3f8500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#feeeb2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 050\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#feeeb2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f9d4ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f9d4ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Info surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1a1a1a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5e5e5e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5e5e5e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#757575\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#757575\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#898989\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#898989\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a7a7a7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a7a7a7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3860be\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3860be\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1eaedb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1eaedb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#007fff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#007fff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA active\u002Fpressed\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:700; line-height:1.25;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 36px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:700; line-height:1.25;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 24px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:400; line-height:1.75;\">Sub-heading -- Feature descriptions and subtitles\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 22px \u002F 400 \u002F 1.75 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:700; line-height:1.25;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title -- 20px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:700; line-height:1.67;\">Body Large -- Emphasized lead paragraph text for introductions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 18px \u002F 700 \u002F 1.67 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body -- Standard reading text for descriptions and content paragraphs across the site.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 400 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.50;\">Body Bold -- Strong labels and nav items\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Bold -- 16px \u002F 700 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.67;\">Body Small -- Secondary content and descriptions for product cards.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Small -- 15px \u002F 400 \u002F 1.67 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.43; text-transform:uppercase;\">Link Uppercase Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link Uppercase -- 14px \u002F 700 \u002F 1.43 \u002F uppercase \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.50;\">Caption -- Metadata and timestamps\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 600 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.25;\">Caption Small -- Fine print and legal text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Small -- 12px \u002F 400 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:700; line-height:1.50; text-transform:uppercase; background:var(--nvidia-green); color:var(--black); display:inline-block; padding:2px 8px; border-radius:2px;\">GPU ACCELERATED\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro Label -- 10px \u002F 700 \u002F uppercase \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom: 24px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\" style=\"color:#000; border:2px solid var(--nvidia-green);\">Explore Solutions\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary (Light BG)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:#fff; padding:11px 20px; border-radius:2px; border:2px solid var(--nvidia-green); font-size:16px; font-weight:700; background:#000;\">Explore GPUs\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Primary (Dark BG)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\" style=\"color:#000; border:1px solid var(--gray-border);\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--btn-hover); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700;\">Hover State\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--btn-active); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700; border:1px solid #003eff;\">Active State\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Active\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; font-size:14.4px; font-weight:700; letter-spacing:0.144px; color:var(--nvidia-green); text-decoration:underline; text-underline-offset:3px;\">Learn More >\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Compact Link\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--nvidia-green); color:var(--black); padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;\">NEW\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Micro Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--purple-800); color:#fff; padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;\">AI\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Category Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--nvidia-green); color:var(--black);\">GPU\u003C\u002Fdiv>\n      \u003Ch3>GeForce RTX Series\u003C\u002Fh3>\n      \u003Cp>The ultimate in PC gaming performance. Ray tracing, DLSS, and AI-powered graphics for immersive experiences.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-top-color: var(--purple-800);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--purple-800); color:#fff;\">AI\u003C\u002Fdiv>\n      \u003Ch3>NVIDIA AI Enterprise\u003C\u002Fh3>\n      \u003Cp>End-to-end AI software platform that accelerates data science pipelines and streamlines development.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-top-color: var(--orange-400);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--orange-400); color:#fff;\">DATA CENTER\u003C\u002Fdiv>\n      \u003Ch3>DGX Systems\u003C\u002Fh3>\n      \u003Cp>Purpose-built AI infrastructure integrating hardware and software for the most demanding workloads.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-gpu-project\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">CUDA Version\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"CUDA 12.4\">\u003Cdiv class=\"form-state-label\">Focus (green border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">GPU Count\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Configuration\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Enter GPU configuration...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inline spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars, icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #e5e5e5;\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.3) 0px 0px 5px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.3) 0 0 5px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--gray-border);\">\u003Cdiv class=\"elevation-label\">Level 1b: Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #5e5e5e\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 2px solid var(--nvidia-green);\">\u003Cdiv class=\"elevation-label\">Level 2: Accent\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid #76b900\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.4) 0px 0px 12px 0px;\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Hover intensified\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"outline: 2px solid var(--black); outline-offset: 2px;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid #000 outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fnvidia.com\u002F\">nvidia.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: NVIDIA (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --nvidia-green: #76b900;\n    --nvidia-green-light: #bff230;\n    --black: #e5e5e5;\n    --white: #0a0a0a;\n    --near-black: #141414;\n    --gray-300: #a7a7a7;\n    --gray-400: #898989;\n    --gray-500: #757575;\n    --gray-border: #333333;\n    --link-hover: #5a8aef;\n    --btn-hover: #1eaedb;\n    --btn-active: #007fff;\n    --orange-400: #df6500;\n    --yellow-300: #ef9100;\n    --red-500: #e52020;\n    --green-500: #3f8500;\n    --blue-700: #0046a4;\n    --purple-800: #4d1368;\n    --fuchsia-700: #8c1c55;\n    --purple-100: #f9d4ff;\n    --yellow-050: #feeeb2;\n    --shadow-card: rgba(0,0,0,0.6) 0px 0px 8px 0px;\n    --font-primary: 'Inter', Arial, Helvetica, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: #000000;\n    border-bottom: 2px solid var(--nvidia-green);\n  }\n  .nav-brand { font-size: 14px; font-weight: 700; color: var(--black); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 700; color: var(--gray-400); text-decoration: none; text-transform: uppercase; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--nvidia-green); }\n  .nav-cta {\n    display: inline-block; background: transparent; color: var(--black);\n    padding: 8px 16px; border-radius: 2px; font-size: 14px; font-weight: 700;\n    text-decoration: none; border: 2px solid var(--nvidia-green); transition: all 0.15s;\n  }\n  .nav-cta:hover { background: var(--btn-hover); color: #fff; border-color: var(--btn-hover); }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--nvidia-green); color: #000000;\n    font-size: 11px; font-weight: 700; padding: 4px 10px;\n    border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; background: #000000; }\n  .hero h1 {\n    font-size: 48px; font-weight: 700; line-height: 1.25;\n    color: var(--black); margin-bottom: 16px;\n  }\n  .hero h1 span { color: var(--nvidia-green); }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.67; color: var(--gray-400); max-width: 640px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: transparent; color: var(--black);\n    padding: 11px 20px; border-radius: 2px; border: 2px solid var(--nvidia-green);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 700;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }\n  .btn-secondary {\n    display: inline-block; background: transparent; color: var(--gray-400);\n    padding: 11px 20px; border-radius: 2px; border: 1px solid var(--gray-border);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 700;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-secondary:hover { color: var(--black); border-color: var(--gray-400); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 700; color: var(--nvidia-green); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 2px solid var(--nvidia-green); margin: 0; opacity: 0.3; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-card); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: monospace; }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 700; color: var(--gray-500); margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #1e1e1e; }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: monospace; font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: #111111; border-radius: 2px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; border-top: 2px solid var(--nvidia-green); }\n  .card:hover { box-shadow: rgba(0,0,0,0.7) 0px 0px 16px 0px; }\n  .card h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }\n  .card p { font-size: 15px; color: var(--gray-400); line-height: 1.67; }\n  .card-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; margin-bottom: 12px; letter-spacing: 0.5px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: #111111; color: var(--black);\n    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;\n    font-family: var(--font-primary); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }\n  .form-input--focus { border-color: var(--nvidia-green); box-shadow: 0 0 0 1px var(--nvidia-green); }\n  .form-input--error { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: #111111; color: var(--black);\n    border: 1px solid var(--gray-border); padding: 10px 12px; border-radius: 2px;\n    font-family: var(--font-primary); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--nvidia-green); border-radius: 1px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--nvidia-green); margin-bottom: 6px; }\n  .radius-label { font-family: monospace; font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: #111111; border-radius: 2px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }\n  .elevation-desc { font-family: monospace; font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; background: #000000; color: var(--gray-500); font-size: 13px; border-top: 2px solid var(--nvidia-green); }\n  .footer a { color: var(--nvidia-green); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 32px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Explore GPUs\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>NVIDIA\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Explore Solutions\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#76b900\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">NVIDIA Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#76b900\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Accent, borders, CTAs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">True Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light backgrounds, text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#bff230\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#bff230\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Bright accents\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Extended Palette\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#df6500\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#df6500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ef9100\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ef9100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary warm\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4d1368\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4d1368\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">AI \u002F Premium\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8c1c55\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fuchsia 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8c1c55\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Promotions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0046a4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0046a4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Informational\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e52020\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e52020\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3f8500\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3f8500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#feeeb2\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 050\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#feeeb2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f9d4ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f9d4ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Info surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1a1a1a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5e5e5e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5e5e5e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#757575\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#757575\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#898989\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#898989\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a7a7a7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a7a7a7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3860be\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3860be\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1eaedb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1eaedb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#007fff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Button Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#007fff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA active\u002Fpressed\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:700; line-height:1.25;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 36px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:700; line-height:1.25;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 24px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:400; line-height:1.75;\">Sub-heading -- Feature descriptions and subtitles\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 22px \u002F 400 \u002F 1.75 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:700; line-height:1.25;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title -- 20px \u002F 700 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:700; line-height:1.67;\">Body Large -- Emphasized lead paragraph text for introductions\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 18px \u002F 700 \u002F 1.67 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body -- Standard reading text for descriptions and content paragraphs across the site.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 400 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.50;\">Body Bold -- Strong labels and nav items\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Bold -- 16px \u002F 700 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.67;\">Body Small -- Secondary content and descriptions for product cards.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Small -- 15px \u002F 400 \u002F 1.67 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.43; text-transform:uppercase;\">Link Uppercase Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link Uppercase -- 14px \u002F 700 \u002F 1.43 \u002F uppercase \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.50;\">Caption -- Metadata and timestamps\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 600 \u002F 1.50 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.25;\">Caption Small -- Fine print and legal text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Small -- 12px \u002F 400 \u002F 1.25 \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:700; line-height:1.50; text-transform:uppercase; background:var(--nvidia-green); color:#000; display:inline-block; padding:2px 8px; border-radius:2px;\">GPU ACCELERATED\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro Label -- 10px \u002F 700 \u002F uppercase \u002F NVIDIA-EMEA\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom: 24px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Explore Solutions\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--btn-hover); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700;\">Hover State\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--btn-active); color:#fff; padding:11px 20px; border-radius:2px; font-size:16px; font-weight:700; border:1px solid #003eff;\">Active State\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Active\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; font-size:14.4px; font-weight:700; letter-spacing:0.144px; color:var(--nvidia-green); text-decoration:underline; text-underline-offset:3px;\">Learn More >\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Compact Link\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--nvidia-green); color:#000; padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;\">NEW\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Micro Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--purple-800); color:#fff; padding:4px 10px; border-radius:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;\">AI\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Category Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--nvidia-green); color:#000;\">GPU\u003C\u002Fdiv>\n      \u003Ch3>GeForce RTX Series\u003C\u002Fh3>\n      \u003Cp>The ultimate in PC gaming performance. Ray tracing, DLSS, and AI-powered graphics for immersive experiences.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-top-color: var(--purple-800);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--purple-800); color:#fff;\">AI\u003C\u002Fdiv>\n      \u003Ch3>NVIDIA AI Enterprise\u003C\u002Fh3>\n      \u003Cp>End-to-end AI software platform that accelerates data science pipelines and streamlines development.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-top-color: var(--orange-400);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--orange-400); color:#fff;\">DATA CENTER\u003C\u002Fdiv>\n      \u003Ch3>DGX Systems\u003C\u002Fh3>\n      \u003Cp>Purpose-built AI infrastructure integrating hardware and software for the most demanding workloads.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-gpu-project\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">CUDA Version\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"CUDA 12.4\">\u003Cdiv class=\"form-state-label\">Focus (green border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">GPU Count\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Configuration\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Enter GPU configuration...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inline spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Avatars, icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--gray-border);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.6) 0px 0px 8px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">rgba(0,0,0,0.6) 0 0 8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--gray-border);\">\u003Cdiv class=\"elevation-label\">Level 1b: Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #333\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 2px solid var(--nvidia-green);\">\u003Cdiv class=\"elevation-label\">Level 2: Accent\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid #76b900\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.7) 0px 0px 16px 0px;\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Hover intensified\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"outline: 2px solid var(--black); outline-offset: 2px;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fnvidia.com\u002F\">nvidia.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# NVIDIA Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fnvidia\u002FDESIGN.md) extracted from the public [NVIDIA](https:\u002F\u002Fnvidia.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fnvidia\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the NVIDIA design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![NVIDIA Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fnvidia\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![NVIDIA Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fnvidia\u002Fpreview-screenshot.png)\n",{"slug":229,"name":230,"category":45,"designMd":231,"previewHtml":232,"previewDarkHtml":233,"readme":234},"ollama","Ollama","# Design System Inspiration of Ollama\n\n## 1. Visual Theme & Atmosphere\n\nOllama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.\n\nThe entire page exists in pure grayscale. There is zero chromatic color in the interface — no brand blue, no accent green, no semantic red. The only colors that exist are shades between pure black (`#000000`) and pure white (`#ffffff`), creating a monochrome environment that lets the user's mental model of \"open models\" remain uncolored by brand opinion. The Ollama llama mascot, rendered in simple black line art, is the only illustration — and even it's monochrome.\n\nWhat makes Ollama distinctive is the combination of SF Pro Rounded (Apple's rounded system font) with an exclusively pill-shaped geometry (9999px radius on everything interactive). The rounded letterforms + rounded buttons + rounded containers create a cohesive \"softness language\" that makes a developer CLI tool feel approachable and friendly rather than intimidating. This is minimalism with warmth — not cold Swiss-style grid minimalism, but the kind where the edges are literally softened.\n\n**Key Characteristics:**\n- Pure white canvas with zero chromatic color — completely grayscale\n- SF Pro Rounded headlines creating a distinctively Apple-like softness\n- Binary border-radius system: 12px (containers) or 9999px (everything interactive)\n- Zero shadows — depth comes exclusively from background color shifts and borders\n- Pill-shaped geometry on all interactive elements (buttons, tabs, inputs, tags)\n- The Ollama llama as the sole illustration — black line art, no color\n- Extreme content restraint — the homepage is short, focused, and uncluttered\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Primary headlines, primary links, and the darkest text. The only \"color\" that demands attention.\n- **Near Black** (`#262626`): Button text on light surfaces, secondary headline weight.\n- **Darkest Surface** (`#090909`): The darkest possible surface — barely distinguishable from pure black, used for footer or dark containers.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page background — not off-white, not cream, pure white. Button surfaces for secondary actions.\n- **Snow** (`#fafafa`): The subtlest possible surface distinction from white — used for section backgrounds and barely-elevated containers.\n- **Light Gray** (`#e5e5e5`): Button backgrounds, borders, and the primary containment color. The workhorse neutral.\n\n### Neutrals & Text\n- **Stone** (`#737373`): Secondary body text, footer links, and de-emphasized content. The primary \"muted\" tone.\n- **Mid Gray** (`#525252`): Emphasized secondary text, slightly darker than Stone.\n- **Silver** (`#a3a3a3`): Tertiary text, placeholders, and deeply de-emphasized metadata.\n- **Button Text Dark** (`#404040`): Specific to white-surface button text.\n\n### Semantic & Accent\n- **Ring Blue** (`#3b82f6` at 50%): The ONLY non-gray color in the entire system — Tailwind's default focus ring, used exclusively for keyboard accessibility. Never visible in normal interaction flow.\n- **Border Light** (`#d4d4d4`): A slightly darker gray for white-surface button borders.\n\n### Gradient System\n- **None.** Ollama uses absolutely no gradients. Visual separation comes from flat color blocks and single-pixel borders. This is a deliberate, almost philosophical design choice.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `SF Pro Rounded`, with fallbacks: `system-ui, -apple-system, system-ui`\n- **Body \u002F UI**: `ui-sans-serif`, with fallbacks: `system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`\n- **Monospace**: `ui-monospace`, with fallbacks: `SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`\n\n*Note: SF Pro Rounded is Apple's system font — it renders with rounded terminals on macOS\u002FiOS and falls back to the system sans-serif on other platforms.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (tight) | normal | Maximum impact, rounded letterforms |\n| Section Heading | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (tight) | normal | Feature section titles |\n| Sub-heading | SF Pro Rounded \u002F ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (tight) | normal | Card headings, feature names |\n| Card Title | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | Medium emphasis headings |\n| Body Large | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero descriptions, button text |\n| Body \u002F Link | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | Standard body text, navigation |\n| Caption | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Small | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | Smallest sans-serif text |\n| Code Body | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | Inline code, commands |\n| Code Caption | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, secondary |\n| Code Small | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | Tags, labels |\n\n### Principles\n- **Rounded display, standard body**: SF Pro Rounded carries display headlines with its distinctive rounded terminals, while the standard system sans handles all body text. The rounded font IS the brand expression.\n- **Weight restraint**: Only two weights matter — 400 (regular) for body and 500 (medium) for headings. No bold, no light, no black weight. This extreme restraint reinforces the minimal philosophy.\n- **Tight display, comfortable body**: Headlines compress to 1.0 line-height, while body text relaxes to 1.43–1.56. The contrast creates clear hierarchy without needing weight contrast.\n- **Monospace for developer identity**: Code blocks and terminal commands appear throughout as primary content, using the system monospace stack.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Gray Pill (Primary)**\n- Background: Light Gray (`#e5e5e5`)\n- Text: Near Black (`#262626`)\n- Padding: 10px 24px\n- Border: thin solid Light Gray (`1px solid #e5e5e5`)\n- Radius: pill-shaped (9999px)\n- The primary action button — understated, grayscale, always pill-shaped\n\n**White Pill (Secondary)**\n- Background: Pure White (`#ffffff`)\n- Text: Button Text Dark (`#404040`)\n- Padding: 10px 24px\n- Border: thin solid Border Light (`1px solid #d4d4d4`)\n- Radius: pill-shaped (9999px)\n- Secondary action — visually lighter than Gray Pill\n\n**Black Pill (CTA)**\n- Background: Pure Black (`#000000`)\n- Text: Pure White (`#ffffff`)\n- Radius: pill-shaped (9999px)\n- Inferred from \"Create account\" and \"Explore\" buttons\n- Maximum emphasis — black on white\n\n### Cards & Containers\n- Background: Pure White or Snow (`#fafafa`)\n- Border: thin solid Light Gray (`1px solid #e5e5e5`) when needed\n- Radius: comfortably rounded (12px) — the ONLY non-pill radius in the system\n- Shadow: **none** — zero shadows on any element\n- Hover: likely subtle background shift or border darkening\n\n### Inputs & Forms\n- Background: Pure White\n- Border: `1px solid #e5e5e5`\n- Radius: pill-shaped (9999px) — search inputs and form fields are pill-shaped\n- Focus: Ring Blue (`#3b82f6` at 50%) ring\n- Placeholder: Silver (`#a3a3a3`)\n\n### Navigation\n- Clean horizontal nav with minimal elements\n- Logo: Ollama llama icon + wordmark in black\n- Links: \"Models\", \"Docs\", \"Pricing\" in black at 16px, weight 400\n- Search bar: pill-shaped with placeholder text\n- Right side: \"Sign in\" link + \"Download\" black pill CTA\n- No borders, no background — transparent nav on white page\n\n### Image Treatment\n- The Ollama llama mascot is the only illustration — black line art on white\n- Code screenshots\u002Fterminal outputs shown in bordered containers (12px radius)\n- Integration logos displayed as simple icons in a grid\n- No photographs, no gradients, no decorative imagery\n\n### Distinctive Components\n\n**Tab Pills**\n- Pill-shaped tab selectors (e.g., \"Coding\" | \"OpenClaw\")\n- Active: Light Gray bg; Inactive: transparent\n- All pill-shaped (9999px)\n\n**Model Tags**\n- Small pill-shaped tags (e.g., \"ollama\", \"launch\", \"claude\")\n- Light Gray background, dark text\n- The primary way to browse models\n\n**Terminal Command Block**\n- Monospace code showing `ollama run` commands\n- Minimal styling — just a bordered 12px-radius container\n- Copy button integrated\n\n**Integration Grid**\n- Grid of integration logos (Codex, Claude Code, OpenCode, LangChain, etc.)\n- Each in a bordered pill or card with icon + name\n- Tabbed by category (Coding, Documents & RAG, Automation, Chat)\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 88px, 112px\n- Button padding: 10px 24px (consistent across all buttons)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: very generous (88px–112px)\n\n### Grid & Container\n- Max container width: approximately 1024–1280px, centered\n- Hero: centered single-column with llama illustration\n- Feature sections: 2-column layout (text left, code right)\n- Integration grid: responsive multi-column\n- Footer: clean single-row\n\n### Whitespace Philosophy\n- **Emptiness as luxury**: The page is remarkably short and sparse — no feature section overstays its welcome. Each concept gets minimal but sufficient space.\n- **Content density is low by design**: Where other AI companies pack feature after feature, Ollama presents three ideas (run models, use with apps, integrations) and stops.\n- **The white space IS the brand**: Pure white space with zero decoration communicates \"this tool gets out of your way.\"\n\n### Border Radius Scale\n- Comfortably rounded (12px): The sole container radius — code blocks, cards, panels\n- Pill-shaped (9999px): Everything interactive — buttons, tabs, inputs, tags, badges\n\n*This binary system is extreme and distinctive. There is no 4px, no 8px, no gradient of roundness. Elements are either containers (12px) or interactive (pill).*\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, most content |\n| Bordered (Level 1) | `1px solid #e5e5e5` | Cards, code blocks, buttons |\n\n**Shadow Philosophy**: Ollama uses **zero shadows**. This is not an oversight — it's a deliberate design decision. Every other major AI product site uses at least subtle shadows. Ollama's flat, shadowless approach creates a paper-like experience where elements are distinguished purely by background color and single-pixel borders. Depth is communicated through **content hierarchy and typography weight**, not visual layering.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure white (`#ffffff`) as the page background — never off-white or cream\n- Use pill-shaped (9999px) radius on all interactive elements — buttons, tabs, inputs, tags\n- Use 12px radius on all non-interactive containers — code blocks, cards, panels\n- Keep the palette strictly grayscale — no chromatic colors except the blue focus ring\n- Use SF Pro Rounded at weight 500 for display headings — the rounded terminals are the brand expression\n- Maintain zero shadows — depth comes from borders and background shifts only\n- Keep content density low — each section should present one clear idea\n- Use monospace for terminal commands and code — it's primary content, not decoration\n- Keep all buttons at 10px 24px padding with pill shape — consistency is absolute\n\n### Don't\n- Don't introduce any chromatic color — no brand blue, no accent green, no warm tones\n- Don't use border-radius between 12px and 9999px — the system is binary\n- Don't add shadows to any element — the flat aesthetic is intentional\n- Don't use font weights above 500 — no bold, no black weight\n- Don't add decorative illustrations beyond the llama mascot\n- Don't use gradients anywhere — flat blocks and borders only\n- Don't overcomplicate the layout — two columns maximum, no complex grids\n- Don't use borders heavier than 1px — containment is always the lightest possible touch\n- Don't add hover animations or transitions — interactions should feel instant and direct\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, stacked everything, hamburger nav |\n| Small Tablet | 640–768px | Minor adjustments to spacing |\n| Tablet | 768–850px | 2-column layouts begin |\n| Desktop | 850–1024px | Standard layout, expanded features |\n| Large Desktop | 1024–1280px | Maximum content width |\n\n### Touch Targets\n- All buttons are pill-shaped with generous padding (10px 24px)\n- Navigation links at comfortable 16px size\n- Minimum touch area easily exceeds 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger menu on mobile\n- **Feature sections**: 2-column → stacked single column\n- **Hero text**: 48px → 36px → 30px progressive scaling\n- **Integration grid**: Multi-column → 2-column → single column\n- **Code blocks**: Horizontal scroll maintained\n\n### Image Behavior\n- Llama mascot scales proportionally\n- Code blocks maintain monospace formatting\n- Integration icons reflow to fewer columns\n- No art direction changes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Pure Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Secondary Text: \"Stone (#737373)\"\n- Button Background: \"Light Gray (#e5e5e5)\"\n- Borders: \"Light Gray (#e5e5e5)\"\n- Muted Text: \"Silver (#a3a3a3)\"\n- Dark Text: \"Near Black (#262626)\"\n- Subtle Surface: \"Snow (#fafafa)\"\n\n### Example Component Prompts\n- \"Create a hero section on pure white (#ffffff) with an illustration centered above a headline at 48px SF Pro Rounded weight 500, line-height 1.0. Use Pure Black (#000000) text. Below, add a black pill-shaped CTA button (9999px radius, 10px 24px padding) and a gray pill button.\"\n- \"Design a code block with a 12px border-radius, 1px solid Light Gray (#e5e5e5) border on white background. Use ui-monospace at 16px for the terminal command. No shadow.\"\n- \"Build a tab bar with pill-shaped tabs (9999px radius). Active tab: Light Gray (#e5e5e5) background, Near Black (#262626) text. Inactive: transparent background, Stone (#737373) text.\"\n- \"Create an integration card grid. Each card is a bordered pill (9999px radius) or a 12px-radius card with 1px solid #e5e5e5 border. Icon + name inside. Grid of 4 columns on desktop.\"\n- \"Design a navigation bar: transparent background, no border. Ollama logo on the left, 3 text links (Pure Black, 16px, weight 400), pill search input in the center, 'Sign in' text link and black pill 'Download' button on the right.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Keep all values grayscale — \"Stone (#737373)\" not \"use a light color\"\n3. Always specify pill (9999px) or container (12px) radius — nothing in between\n4. Shadows are always zero — never add them\n5. Weight is always 400 or 500 — never bold\n6. If something feels too decorated, remove it — less is always more for Ollama\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Ollama (Light)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-near-black: #262626;\n    --color-darkest-surface: #090909;\n    --color-white: #ffffff;\n    --color-snow: #fafafa;\n    --color-light-gray: #e5e5e5;\n    --color-stone: #737373;\n    --color-mid-gray: #525252;\n    --color-silver: #a3a3a3;\n    --color-button-text-dark: #404040;\n    --color-border-light: #d4d4d4;\n    --font-display: system-ui, -apple-system, 'SF Pro Rounded', 'Segoe UI', Roboto, sans-serif;\n    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #fafafa;\n    --bg-nav: rgba(255,255,255,0.95);\n    --text-primary: #000000;\n    --text-secondary: #737373;\n    --text-muted: #a3a3a3;\n    --border-color: #e5e5e5;\n    --section-label-color: #737373;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .llama { font-size: 22px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n  }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 112px 40px 88px;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 500;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.56;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n\n  \u002F* PILL BUTTONS *\u002F\n  .btn-black-pill {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-gray-pill {\n    background: var(--color-light-gray);\n    color: var(--color-near-black);\n    padding: 10px 24px;\n    border: 1px solid var(--color-light-gray);\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n  .btn-white-pill {\n    background: var(--color-white);\n    color: var(--color-button-text-dark);\n    padding: 10px 24px;\n    border: 1px solid var(--color-border-light);\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1024px;\n    margin: 0 auto;\n    padding: 88px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 36px;\n    font-weight: 500;\n    line-height: 1.11;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-color);\n    margin: 0 40px;\n    max-width: 1024px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-color); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    border-radius: 12px;\n    padding: 28px;\n  }\n  .card-bordered {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n  }\n  .card-snow {\n    background: var(--bg-card);\n    border: none;\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 1.33;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 16px;\n    line-height: 1.5;\n    color: var(--text-primary);\n    overflow-x: auto;\n  }\n  .code-block .prompt { color: var(--text-muted); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--color-light-gray);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }\n  .elevation-card {\n    border-radius: 12px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat {\n    background: var(--bg-page);\n    border: none;\n  }\n  .elevation-bordered {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n  }\n  .elevation-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"llama\">🦙\u003C\u002Fspan> ollama\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Download\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Ollama\u003C\u002Fh1>\n  \u003Cp>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-black-pill\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-gray-pill\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Grayscale Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headlines, links, max emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #262626;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #090909;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Darkest Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#090909\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark containers, footer background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e5e5e5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, button surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa; border-bottom: 1px solid #e5e5e5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Snow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle surface distinction, section bg\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e5e5e5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e5e5e5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, borders, containment\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #737373;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#737373\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text, footer links, muted tone\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #525252;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#525252\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Emphasized secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a3a3a3;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a3a3a3\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, placeholders, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #404040;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Button Text Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#404040\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">White-surface button text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d4d4d4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d4d4d4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">White-surface button borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.0;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 48px \u002F 500 \u002F 1.00 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1.11;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F 500 \u002F 1.11 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.20;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 30px \u002F 500 \u002F 1.20 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.33;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F 400 \u002F 1.33 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56;\">Body large text for hero descriptions and button labels. The system sans-serif handles all UI copy with clean precision.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400 \u002F 1.56 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50;\">Standard body text for paragraphs, navigation links, and general content. Weight 400 only.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Link — 16px \u002F 400 \u002F 1.50 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.43 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.50;\">ollama run llama3.2\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400 \u002F 1.50 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">ollama pull mistral\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Caption — 14px \u002F 400 \u002F 1.43 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.63; color: var(--text-muted);\">v0.9.1 latest\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 12px \u002F 400 \u002F 1.63 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-gray-pill\">Models\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Gray Pill (Primary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-pill\">Sign in\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Pill (Secondary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-black-pill\">Download\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Black Pill (CTA)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"prompt\">$\u003C\u002Fspan> ollama run llama3.2\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Bordered Container\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid Light Gray border and 12px radius. The only container style in Ollama. Zero shadows.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-snow\">\n      \u003Cdiv class=\"card-label\">Snow Surface\u003C\u002Fdiv>\n      \u003Ch3>Subtle Background\u003C\u002Fh3>\n      \u003Cp>Card distinguished by Snow (#fafafa) background instead of borders. The lightest possible surface distinction from pure white.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 4px to 112px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Binary Radius System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Only two values exist. No 4px, no 8px, no gradient of roundness. Containers or interactive -- nothing in between.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Interactive \u002F Pills\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Zero shadows. Depth comes from background color shifts and single-pixel borders only.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and inline content. The default state for most elements.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">1px solid Light Gray (#e5e5e5). Cards, code blocks, buttons. The only elevation that exists.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Ollama (Dark)\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-near-black: #262626;\n    --color-darkest-surface: #090909;\n    --color-white: #ffffff;\n    --color-snow: #fafafa;\n    --color-light-gray: #e5e5e5;\n    --color-stone: #737373;\n    --color-mid-gray: #525252;\n    --color-silver: #a3a3a3;\n    --color-button-text-dark: #404040;\n    --color-border-light: #d4d4d4;\n    --font-display: system-ui, -apple-system, 'SF Pro Rounded', 'Segoe UI', Roboto, sans-serif;\n    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Dark mode tokens *\u002F\n    --bg-page: #090909;\n    --bg-card: #262626;\n    --bg-nav: rgba(9,9,9,0.95);\n    --text-primary: #ffffff;\n    --text-secondary: #a3a3a3;\n    --text-muted: #737373;\n    --border-color: #525252;\n    --section-label-color: #a3a3a3;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .llama { font-size: 22px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n  }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 112px 40px 88px;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 500;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.56;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n\n  \u002F* PILL BUTTONS *\u002F\n  .btn-white-pill-dark {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-gray-pill-dark {\n    background: var(--color-mid-gray);\n    color: var(--color-white);\n    padding: 10px 24px;\n    border: 1px solid var(--color-mid-gray);\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n  .btn-outline-pill-dark {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 10px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    font-size: 18px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1024px;\n    margin: 0 auto;\n    padding: 88px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 36px;\n    font-weight: 500;\n    line-height: 1.11;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-color);\n    margin: 0 40px;\n    max-width: 1024px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-display);\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-color); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    border-radius: 12px;\n    padding: 28px;\n  }\n  .card-bordered {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n  }\n  .card-surface {\n    background: var(--bg-card);\n    border: none;\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 1.33;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    border-radius: 12px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 16px;\n    line-height: 1.5;\n    color: var(--text-primary);\n    overflow-x: auto;\n  }\n  .code-block .prompt { color: var(--text-muted); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--color-mid-gray);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }\n  .elevation-card {\n    border-radius: 12px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat {\n    background: var(--bg-page);\n    border: none;\n  }\n  .elevation-bordered {\n    background: var(--bg-page);\n    border: 1px solid var(--border-color);\n  }\n  .elevation-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"llama\">🦙\u003C\u002Fspan> ollama\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Download\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Ollama\u003C\u002Fh1>\n  \u003Cp>Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-white-pill-dark\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-gray-pill-dark\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Grayscale Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #525252;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary headlines, links, max emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #262626; border-bottom: 1px solid #525252;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#262626\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card surfaces in dark mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #090909; border-bottom: 1px solid #525252;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Darkest Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#090909\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background in dark mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text in dark mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Snow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light surface, used in light mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e5e5e5;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e5e5e5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds in light mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #737373;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#737373\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Muted text, dark mode tertiary\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #525252;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#525252\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders in dark mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a3a3a3;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a3a3a3\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text in dark mode\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #404040;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Button Text Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#404040\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">White-surface button text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d4d4d4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d4d4d4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">White-surface button borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.0;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 48px \u002F 500 \u002F 1.00 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 36px; font-weight: 500; line-height: 1.11;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F 500 \u002F 1.11 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.20;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 30px \u002F 500 \u002F 1.20 — SF Pro Rounded (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 24px; font-weight: 400; line-height: 1.33;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F 400 \u002F 1.33 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56;\">Body large text for hero descriptions and button labels. The system sans-serif handles all UI copy with clean precision.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 18px \u002F 400 \u002F 1.56 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50;\">Standard body text for paragraphs, navigation links, and general content. Weight 400 only.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Link — 16px \u002F 400 \u002F 1.50 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400 \u002F 1.43 — ui-sans-serif\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.50;\">ollama run llama3.2\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 16px \u002F 400 \u002F 1.50 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">ollama pull mistral\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Caption — 14px \u002F 400 \u002F 1.43 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.63; color: var(--text-muted);\">v0.9.1 latest\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 12px \u002F 400 \u002F 1.63 — ui-monospace\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-gray-pill-dark\">Models\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Gray Pill (Primary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-outline-pill-dark\">Sign in\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outline Pill (Secondary)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-pill-dark\">Download\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">White Pill (CTA)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"prompt\">$\u003C\u002Fspan> ollama run llama3.2\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Bordered Container\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid Mid Gray border and 12px radius. The only container style in Ollama. Zero shadows.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-surface\">\n      \u003Cdiv class=\"card-label\">Dark Surface\u003C\u002Fdiv>\n      \u003Ch3>Elevated Background\u003C\u002Fh3>\n      \u003Cp>Card distinguished by Near Black (#262626) background on Darkest Surface (#090909). Subtle separation through luminance shift only.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 4px to 112px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Binary Radius System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Only two values exist. No 4px, no 8px, no gradient of roundness. Containers or interactive -- nothing in between.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Interactive \u002F Pills\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Zero shadows. Depth comes from background color shifts and single-pixel borders only.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and inline content. The default state for most elements.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">1px solid Mid Gray (#525252). Cards, code blocks, buttons. The only elevation that exists.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Ollama Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Follama\u002FDESIGN.md) extracted from the public [Ollama](https:\u002F\u002Follama.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Follama\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Ollama design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Ollama Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Follama\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Ollama Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Follama\u002Fpreview-screenshot.png)\n",{"slug":236,"name":237,"category":45,"designMd":238,"previewHtml":239,"previewDarkHtml":240,"readme":241},"opencode.ai","Opencode AI","# Design System Inspiration of OpenCode\n\n## 1. Visual Theme & Atmosphere\n\nOpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (`#201d1d`) with warm off-white text (`#fdfcfc`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in `#201d1d` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.\n\nBerkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified \"everything is code\" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.\n\nThe color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (`#201d1d`), a medium warm gray (`#9a9898`), and a bright off-white (`#fdfcfc`). Semantic colors borrow from the Apple HIG palette -- blue accent (`#007aff`), red danger (`#ff3b30`), green success (`#30d158`), orange warning (`#ff9f0a`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (`rgba(15, 0, 0, 0.12)`) that ties into the warm undertone of the entire system.\n\n**Key Characteristics:**\n- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices\n- Warm near-black primary (`#201d1d`) with reddish-brown undertone, not pure black\n- Off-white text (`#fdfcfc`) with warm tint, not pure white\n- Minimal 4px border radius throughout -- sharp, utilitarian corners\n- 8px base spacing system scaling up to 96px\n- Apple HIG-inspired semantic colors (blue, red, green, orange)\n- Transparent warm borders using `rgba(15, 0, 0, 0.12)`\n- Email input with generous 20px padding and 6px radius -- the most generous component radius\n- Single button variant: dark background, light text, tight vertical padding (4px 20px)\n- Underlined links as default link style, reinforcing the text-centric identity\n\n## 2. Color Palette & Roles\n\n### Primary\n- **OpenCode Dark** (`#201d1d`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).\n- **OpenCode Light** (`#fdfcfc`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.\n- **Mid Gray** (`#9a9898`): Secondary text, muted links. A neutral warm gray that bridges dark and light.\n\n### Secondary\n- **Dark Surface** (`#302c2c`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.\n- **Border Gray** (`#646262`): Stronger borders, outline rings on interactive elements.\n- **Light Surface** (`#f1eeee`): Light mode surface, subtle background variation.\n\n### Accent\n- **Accent Blue** (`#007aff`): Primary accent, links, interactive highlights. Apple system blue.\n- **Accent Blue Hover** (`#0056b3`): Darker blue for hover states.\n- **Accent Blue Active** (`#004085`): Deepest blue for pressed\u002Factive states.\n\n### Semantic\n- **Danger Red** (`#ff3b30`): Error states, destructive actions. Apple system red.\n- **Danger Hover** (`#d70015`): Darker red for hover on danger elements.\n- **Danger Active** (`#a50011`): Deepest red for pressed danger states.\n- **Success Green** (`#30d158`): Success states, positive feedback. Apple system green.\n- **Warning Orange** (`#ff9f0a`): Warning states, caution signals. Apple system orange.\n- **Warning Hover** (`#cc7f08`): Darker orange for hover on warning elements.\n- **Warning Active** (`#995f06`): Deepest orange for pressed warning states.\n\n### Text Scale\n- **Text Muted** (`#6e6e73`): Muted labels, disabled text, placeholder content.\n- **Text Secondary** (`#424245`): Secondary text on light backgrounds, captions.\n\n### Border\n- **Border Warm** (`rgba(15, 0, 0, 0.12)`): Primary border color, warm transparent black with red tint.\n- **Border Tab** (`#9a9898`): Tab underline border, 2px solid bottom.\n- **Border Outline** (`#646262`): 1px solid outline border for containers.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: `Berkeley Mono`, with fallbacks: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Notes |\n|------|------|--------|-------------|-------|\n| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |\n| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |\n| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |\n| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |\n| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |\n| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |\n\n### Principles\n- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.\n- **Weight as hierarchy**: 700 for headings, 500 for interactive\u002Fmedium emphasis, 400 for body text. Three weight levels create the entire hierarchy.\n- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.\n- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Dark Fill)**\n- Background: `#201d1d` (OpenCode Dark)\n- Text: `#fdfcfc` (OpenCode Light)\n- Padding: 4px 20px\n- Radius: 4px\n- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)\n- Outline: `rgb(253, 252, 252) none 0px`\n- Use: Primary CTAs, main actions\n\n### Inputs\n\n**Email Input**\n- Background: `#f8f7f7` (light neutral)\n- Text: `#201d1d`\n- Border: `1px solid rgba(15, 0, 0, 0.12)`\n- Padding: 20px\n- Radius: 6px\n- Font: Berkeley Mono, standard size\n- Use: Form fields, email capture\n\n### Links\n\n**Default Link**\n- Color: `#201d1d`\n- Decoration: underline 1px\n- Font-weight: 500\n- Use: Primary text links in body content\n\n**Light Link**\n- Color: `#fdfcfc`\n- Decoration: none\n- Use: Links on dark backgrounds, navigation\n\n**Muted Link**\n- Color: `#9a9898`\n- Decoration: none\n- Use: Footer links, secondary navigation\n\n### Tabs\n\n**Tab Navigation**\n- Border-bottom: `2px solid #9a9898` (active tab indicator)\n- Font: 16px, weight 500, line-height 1.00\n- Use: Section switching, content filtering\n\n### Navigation\n- Clean horizontal layout with Berkeley Mono throughout\n- Brand logotype left-aligned in monospace\n- Links at 16px weight 500 with underline decoration\n- Dark background matching page background\n- No backdrop blur or transparency -- solid surfaces only\n\n### Image Treatment\n- Terminal\u002Fcode screenshots as hero imagery\n- Dark terminal aesthetic with monospace type\n- Minimal borders, content speaks for itself\n\n### Distinctive Components\n\n**Terminal Hero**\n- Full-width dark terminal window as hero element\n- ASCII art \u002F stylized logo within terminal frame\n- Monospace command examples with syntax highlighting\n- Reinforces the CLI-first identity of the product\n\n**Feature List**\n- Bulleted feature items with Berkeley Mono text\n- Weight 500 for feature names, 400 for descriptions\n- Tight vertical spacing between items\n- No cards or borders -- pure text layout\n\n**Email Capture**\n- Light background input (`#f8f7f7`) contrasting dark page\n- Generous 20px padding for comfortable typing\n- 6px radius -- the roundest element in the system\n- Newsletter\u002Fwaitlist pattern\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)\n- Standard scale: 8px, 12px, 16px, 20px, 24px\n- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px\n- The system follows a clean 4\u002F8px grid with consistent doubling\n\n### Grid & Container\n- Max content width: approximately 800-900px (narrow, reading-optimized)\n- Single-column layout as the primary pattern\n- Centered content with generous horizontal margins\n- Hero section: full-width dark terminal element\n- Feature sections: single-column text blocks\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.\n- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.\n- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.\n\n### Border Radius Scale\n- Micro (4px): Default for all elements -- buttons, containers, badges\n- Input (6px): Form inputs get slightly more roundness\n- The entire system uses just two radius values, reinforcing the utilitarian aesthetic\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Default state for most elements |\n| Border Subtle (Level 1) | `1px solid rgba(15, 0, 0, 0.12)` | Section dividers, input borders, horizontal rules |\n| Border Tab (Level 2) | `2px solid #9a9898` bottom only | Active tab indicator |\n| Border Outline (Level 3) | `1px solid #646262` | Container outlines, elevated elements |\n\n**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.\n\n### Decorative Depth\n- Background color shifts between `#201d1d` and `#302c2c` create subtle surface differentiation\n- Transparent borders at 12% opacity provide barely-visible structure\n- The warm reddish tint in border colors (`rgba(15, 0, 0, 0.12)`) ties borders to the overall warm dark palette\n- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic\n\n## 7. Interaction & Motion\n\n### Hover States\n- Links: color shift from default to accent blue (`#007aff`) or underline style change\n- Buttons: subtle background lightening or border emphasis\n- Accent blue provides a three-stage hover sequence: `#007aff` → `#0056b3` → `#004085` (default → hover → active)\n- Danger red: `#ff3b30` → `#d70015` → `#a50011`\n- Warning orange: `#ff9f0a` → `#cc7f08` → `#995f06`\n\n### Focus States\n- Border-based focus: increased border opacity or solid border color\n- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic\n- Keyboard focus likely uses outline or border color shift to accent blue\n\n### Transitions\n- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes\n- Color transitions: 100-150ms for subtle state feedback\n- No scale, rotate, or complex transform animations\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, reduced padding, heading scales down |\n| Tablet | 640-1024px | Content width expands, slight padding increase |\n| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |\n\n### Touch Targets\n- Buttons with 4px 20px padding provide adequate horizontal touch area\n- Input fields with 20px padding ensure comfortable mobile typing\n- Tab items at 16px with tight line-height may need mobile adaptation\n\n### Collapsing Strategy\n- Hero heading: 38px → 28px → 24px on smaller screens\n- Navigation: horizontal links → hamburger\u002Fdrawer on mobile\n- Feature lists: maintain single-column, reduce horizontal padding\n- Terminal hero: maintain full-width, reduce internal padding\n- Footer columns: multi-column → stacked single column\n- Section spacing: 96px → 64px → 48px on mobile\n\n### Image Behavior\n- Terminal screenshots maintain aspect ratio and border treatment\n- Full-width elements scale proportionally\n- Monospace type maintains readability at all sizes due to fixed-width nature\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Page background: `#201d1d` (warm near-black)\n- Primary text: `#fdfcfc` (warm off-white)\n- Secondary text: `#9a9898` (warm gray)\n- Muted text: `#6e6e73`\n- Accent: `#007aff` (blue)\n- Danger: `#ff3b30` (red)\n- Success: `#30d158` (green)\n- Warning: `#ff9f0a` (orange)\n- Button bg: `#201d1d`, button text: `#fdfcfc`\n- Border: `rgba(15, 0, 0, 0.12)` (warm transparent)\n- Input bg: `#f8f7f7`, input border: `rgba(15, 0, 0, 0.12)`\n\n### Example Component Prompts\n- \"Create a hero section on `#201d1d` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color `#fdfcfc`. Subtitle at 16px weight 400, color `#9a9898`. Primary CTA button (`#201d1d` bg with `1px solid #646262` border, 4px radius, 4px 20px padding, `#fdfcfc` text at weight 500).\"\n- \"Design a feature list: single-column on `#201d1d` background. Feature name at 16px Berkeley Mono weight 700, color `#fdfcfc`. Description at 16px weight 400, color `#9a9898`. No cards, no borders -- pure text with 16px vertical gap between items.\"\n- \"Build an email capture form: `#f8f7f7` background input, `1px solid rgba(15, 0, 0, 0.12)` border, 6px radius, 20px padding. Adjacent dark button (`#201d1d` bg, `#fdfcfc` text, 4px radius, 4px 20px padding). Berkeley Mono throughout.\"\n- \"Create navigation: sticky `#201d1d` background. 16px Berkeley Mono weight 500 for links, `#fdfcfc` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface.\"\n- \"Design a footer: `#201d1d` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color `#9a9898`. Section headers at weight 700. Border-top `1px solid rgba(15, 0, 0, 0.12)` separator.\"\n\n### Iteration Guide\n1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.\n2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.\n3. The warm undertone matters: use `#201d1d` not `#000000`, use `#fdfcfc` not `#ffffff`. The reddish warmth is subtle but essential.\n4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.\n5. Semantic colors follow Apple HIG: `#007aff` blue, `#ff3b30` red, `#30d158` green, `#ff9f0a` orange. Each has hover and active darkened variants.\n6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.\n7. Borders use `rgba(15, 0, 0, 0.12)` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.\n8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: OpenCode (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --oc-dark: #201d1d;\n    --oc-light: #fdfcfc;\n    --oc-gray: #9a9898;\n    --oc-dark-surface: #302c2c;\n    --oc-border-gray: #646262;\n    --oc-light-surface: #f1eeee;\n    --oc-input-bg: #f8f7f7;\n    --accent: #007aff;\n    --accent-hover: #0056b3;\n    --accent-active: #004085;\n    --danger: #ff3b30;\n    --danger-hover: #d70015;\n    --danger-active: #a50011;\n    --success: #30d158;\n    --warning: #ff9f0a;\n    --warning-hover: #cc7f08;\n    --warning-active: #995f06;\n    --text-primary: #201d1d;\n    --text-secondary: #9a9898;\n    --text-muted: #6e6e73;\n    --text-caption: #424245;\n    --border-warm: rgba(15, 0, 0, 0.12);\n    --border-tab: #9a9898;\n    --border-outline: #646262;\n    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--oc-light);\n    color: var(--text-primary);\n    font-family: var(--font-mono);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--oc-light);\n    border-bottom: 1px solid var(--border-warm);\n  }\n  .nav-brand { font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    display: inline-block; background: var(--oc-dark); color: var(--oc-light);\n    padding: 4px 20px; border-radius: 4px; font-size: 14px; font-weight: 500;\n    text-decoration: none; font-family: var(--font-mono); transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 38px; font-weight: 700; line-height: 1.50;\n    color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--oc-dark); color: var(--oc-light);\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-primary:hover { opacity: 0.85; }\n  .btn-secondary {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 4px 20px; border-radius: 4px; border: 1px solid var(--border-outline);\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-secondary:hover { border-color: var(--text-primary); }\n  .btn-accent {\n    display: inline-block; background: var(--accent); color: #ffffff;\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-accent:hover { background: var(--accent-hover); }\n  .btn-danger {\n    display: inline-block; background: var(--danger); color: #ffffff;\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-danger:hover { background: var(--danger-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1000px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 38px; font-weight: 700; line-height: 1.50; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-warm); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-warm); background: #ffffff; }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-secondary); }\n  .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 700; color: var(--text-caption); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-warm); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }\n  .card { background: #ffffff; border-radius: 4px; padding: 24px; border: 1px solid var(--border-warm); transition: border-color 0.15s; }\n  .card:hover { border-color: var(--border-outline); }\n  .card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--oc-input-bg); color: var(--text-primary);\n    border: 1px solid var(--border-warm); padding: 20px; border-radius: 6px;\n    font-family: var(--font-mono); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); }\n  .form-input--focus { border-color: var(--accent); }\n  .form-input--error { border-color: var(--danger); }\n  .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--oc-dark); border-radius: 2px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--oc-dark); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }\n  .radius-context { font-size: 10px; color: var(--text-muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: #ffffff; border-radius: 4px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--text-muted); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-warm); font-size: 14px; color: var(--text-secondary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 28px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 28px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by OpenCode\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in monospace precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Install OpenCode\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View on GitHub\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#201d1d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">OpenCode Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#201d1d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Background, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fdfcfc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">OpenCode Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fdfcfc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9a9898\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9a9898\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#302c2c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#302c2c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Elevated surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f1eeee\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f1eeee\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f8f7f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Input BG\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f8f7f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Form inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#646262\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#646262\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Outline borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6e6e73\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6e6e73\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#007aff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#007aff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0056b3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0056b3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#004085\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#004085\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff3b30\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff3b30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#30d158\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#30d158\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff9f0a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff9f0a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Caution, alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#424245\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#424245\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Captions on light\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:38px; font-weight:700; line-height:1.50;\">Heading 1 -- Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 1 -- 38px \u002F 700 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.50;\">Heading 2 -- Section Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 2 -- 16px \u002F 700 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium -- Navigation links, interactive text, and button labels live here.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium -- 16px \u002F 500 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Regular -- Standard paragraph text for descriptions, documentation, and general content across the interface.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Regular -- 16px \u002F 400 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.00;\">Body Tight -- Compact Labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Tight -- 16px \u002F 500 \u002F 1.00 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:2.00;\">Caption -- Footnotes, metadata, and small supplementary text with relaxed line-height for readability.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 400 \u002F 2.00 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50; font-family:var(--font-mono);\">$ opencode --help\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code -- 14px \u002F 400 \u002F 1.50 \u002F Berkeley Mono (monospace)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Install OpenCode\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">View on GitHub\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-accent\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Accent Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-danger\" href=\"#\">Delete\u003C\u002Fa>\u003Cdiv class=\"button-label\">Danger\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--success); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);\">Success\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--warning); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(0,122,255,0.1); color:var(--accent);\">AI Agent\u003C\u002Fdiv>\n      \u003Ch3>Terminal-Native Coding\u003C\u002Fh3>\n      \u003Cp>An open source AI coding agent that runs in your terminal. No IDE required -- just you, your code, and the command line.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--border-outline);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(48,209,88,0.1); color:var(--success);\">Open Source\u003C\u002Fdiv>\n      \u003Ch3>Multi-Provider Support\u003C\u002Fh3>\n      \u003Cp>Works with Anthropic, OpenAI, and other LLM providers. Choose the model that fits your workflow and budget.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,159,10,0.1); color:var(--warning-hover);\">CLI\u003C\u002Fdiv>\n      \u003Ch3>Context-Aware Editing\u003C\u002Fh3>\n      \u003Cp>Understands your entire codebase context. Make changes across multiple files with natural language instructions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"you@example.com\">\u003Cdiv class=\"form-state-label\">Default (warm border, 20px padding)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"sk-ant-...\">\u003Cdiv class=\"form-state-label\">Focus (accent blue border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Invalid Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key-format\">\u003Cdiv class=\"form-state-label\">Error (danger red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Default (buttons, cards)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: none; background: var(--oc-light-surface);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border, no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-warm);\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px rgba(15,0,0,0.12)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border-bottom: 2px solid var(--border-tab);\">\u003Cdiv class=\"elevation-label\">Level 2: Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid #9a9898\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-outline);\">\u003Cdiv class=\"elevation-label\">Level 3: Outline\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #646262\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fopencode.ai\u002F\">opencode.ai\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: OpenCode (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --oc-dark: #fdfcfc;\n    --oc-light: #201d1d;\n    --oc-gray: #9a9898;\n    --oc-dark-surface: #302c2c;\n    --oc-border-gray: #646262;\n    --oc-light-surface: #2a2626;\n    --oc-input-bg: #302c2c;\n    --accent: #4da3ff;\n    --accent-hover: #007aff;\n    --accent-active: #0056b3;\n    --danger: #ff6961;\n    --danger-hover: #ff3b30;\n    --danger-active: #d70015;\n    --success: #5de882;\n    --warning: #ffb840;\n    --warning-hover: #ff9f0a;\n    --warning-active: #cc7f08;\n    --text-primary: #fdfcfc;\n    --text-secondary: #9a9898;\n    --text-muted: #6e6e73;\n    --text-caption: #9a9898;\n    --border-warm: rgba(253, 252, 252, 0.12);\n    --border-tab: #9a9898;\n    --border-outline: #646262;\n    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--oc-light);\n    color: var(--text-primary);\n    font-family: var(--font-mono);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .dark-badge {\n    position: fixed; top: 12px; right: 12px; z-index: 200;\n    background: var(--accent); color: #ffffff;\n    padding: 4px 12px; border-radius: 9999px;\n    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--oc-light);\n    border-bottom: 1px solid var(--border-warm);\n  }\n  .nav-brand { font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--accent); }\n  .nav-cta {\n    display: inline-block; background: var(--oc-dark); color: var(--oc-light);\n    padding: 4px 20px; border-radius: 4px; font-size: 14px; font-weight: 500;\n    text-decoration: none; font-family: var(--font-mono); transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 38px; font-weight: 700; line-height: 1.50;\n    color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--oc-dark); color: var(--oc-light);\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-primary:hover { opacity: 0.85; }\n  .btn-secondary {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 4px 20px; border-radius: 4px; border: 1px solid var(--border-outline);\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-secondary:hover { border-color: var(--text-primary); }\n  .btn-accent {\n    display: inline-block; background: var(--accent); color: #ffffff;\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-accent:hover { background: var(--accent-hover); }\n  .btn-danger {\n    display: inline-block; background: var(--danger); color: #ffffff;\n    padding: 4px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-danger:hover { background: var(--danger-hover); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1000px; margin: 0 auto; }\n  .section-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 38px; font-weight: 700; line-height: 1.50; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--border-warm); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-warm); background: var(--oc-dark-surface); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--text-secondary); }\n  .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-warm); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }\n  .card { background: var(--oc-dark-surface); border-radius: 4px; padding: 24px; border: 1px solid var(--border-warm); transition: border-color 0.15s; }\n  .card:hover { border-color: var(--border-outline); }\n  .card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--oc-input-bg); color: var(--text-primary);\n    border: 1px solid var(--border-warm); padding: 20px; border-radius: 6px;\n    font-family: var(--font-mono); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--accent); }\n  .form-input--focus { border-color: var(--accent); }\n  .form-input--error { border-color: var(--danger); }\n  .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--oc-dark); border-radius: 2px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--oc-dark); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }\n  .radius-context { font-size: 10px; color: var(--text-muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--oc-dark-surface); border-radius: 4px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--text-muted); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-warm); font-size: 14px; color: var(--text-secondary); }\n  .footer a { color: var(--accent); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 28px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 28px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by OpenCode\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in monospace precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Install OpenCode\u003C\u002Fa>\n    \u003Ca class=\"btn-secondary\" href=\"#\">View on GitHub\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#201d1d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">OpenCode Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#201d1d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Background, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fdfcfc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">OpenCode Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fdfcfc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9a9898\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9a9898\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#302c2c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#302c2c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Elevated surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Border\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f1eeee\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f1eeee\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f8f7f7\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Input BG\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f8f7f7\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Form inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#646262\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#646262\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Outline borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6e6e73\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6e6e73\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#007aff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#007aff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0056b3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0056b3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#004085\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Accent Active\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#004085\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff3b30\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff3b30\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error, destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#30d158\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#30d158\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff9f0a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff9f0a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Caution, alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#424245\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#424245\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Captions on light\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:38px; font-weight:700; line-height:1.50;\">Heading 1 -- Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 1 -- 38px \u002F 700 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700; line-height:1.50;\">Heading 2 -- Section Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Heading 2 -- 16px \u002F 700 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium -- Navigation links, interactive text, and button labels live here.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium -- 16px \u002F 500 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body Regular -- Standard paragraph text for descriptions, documentation, and general content across the interface.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Regular -- 16px \u002F 400 \u002F 1.50 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.00;\">Body Tight -- Compact Labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Tight -- 16px \u002F 500 \u002F 1.00 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:2.00;\">Caption -- Footnotes, metadata, and small supplementary text with relaxed line-height for readability.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 14px \u002F 400 \u002F 2.00 \u002F Berkeley Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.50; font-family:var(--font-mono);\">$ opencode --help\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code -- 14px \u002F 400 \u002F 1.50 \u002F Berkeley Mono (monospace)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Install OpenCode\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">View on GitHub\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-accent\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Accent Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-danger\" href=\"#\">Delete\u003C\u002Fa>\u003Cdiv class=\"button-label\">Danger\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--success); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);\">Success\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--warning); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);\">Warning\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(77,163,255,0.15); color:var(--accent);\">AI Agent\u003C\u002Fdiv>\n      \u003Ch3>Terminal-Native Coding\u003C\u002Fh3>\n      \u003Cp>An open source AI coding agent that runs in your terminal. No IDE required -- just you, your code, and the command line.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--border-outline);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(93,232,130,0.15); color:var(--success);\">Open Source\u003C\u002Fdiv>\n      \u003Ch3>Multi-Provider Support\u003C\u002Fh3>\n      \u003Cp>Works with Anthropic, OpenAI, and other LLM providers. Choose the model that fits your workflow and budget.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,184,64,0.15); color:var(--warning);\">CLI\u003C\u002Fdiv>\n      \u003Ch3>Context-Aware Editing\u003C\u002Fh3>\n      \u003Cp>Understands your entire codebase context. Make changes across multiple files with natural language instructions.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"you@example.com\">\u003Cdiv class=\"form-state-label\">Default (warm border, 20px padding)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"sk-ant-...\">\u003Cdiv class=\"form-state-label\">Focus (accent blue border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Invalid Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key-format\">\u003Cdiv class=\"form-state-label\">Error (danger red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Default (buttons, cards)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: none; background: var(--oc-light-surface);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border, no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-warm);\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px rgba(253,252,252,0.12)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border-bottom: 2px solid var(--border-tab);\">\u003Cdiv class=\"elevation-label\">Level 2: Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid #9a9898\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-outline);\">\u003Cdiv class=\"elevation-label\">Level 3: Outline\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #646262\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fopencode.ai\u002F\">opencode.ai\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# OpenCode AI Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fopencode.ai\u002FDESIGN.md) extracted from the public [OpenCode](https:\u002F\u002Fopencode.ai\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fopencode.ai\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the OpenCode AI design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![OpenCode AI Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fopencode.ai\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![OpenCode AI Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fopencode.ai\u002Fpreview-screenshot.png)\n",{"slug":243,"name":244,"category":15,"designMd":245,"previewHtml":246,"previewDarkHtml":247,"readme":248},"pinterest","Pinterest","# Design System Inspiration of Pinterest\n\n## 1. Visual Theme & Atmosphere\n\nPinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive\u002Fsand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.\n\nThe typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (`--comp-*`, `--sema-*`, `--base-*`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.\n\nWhat distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (`#e5e5e0`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (`hsla(60,20%,98%,.5)` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.\n\n**Key Characteristics:**\n- Warm white canvas with olive\u002Fsand-toned neutrals — cozy, not clinical\n- Pinterest Red (`#e60023`) as singular bold accent — never subtle, always confident\n- Pin Sans custom font with global fallback stack (including CJK)\n- Three-tier token architecture: `--comp-*` \u002F `--sema-*` \u002F `--base-*`\n- Warm secondary surfaces: sand gray (`#e5e5e0`), warm badge (`hsla(60,20%,98%,.5)`)\n- Generous border-radius: 16px standard, up to 40px for large containers\n- Photography-first content — pins\u002Fimages are the primary visual element\n- Dark near-purple text (`#211922`) — warm, with a hint of plum\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pinterest Red** (`#e60023`): Primary CTA, brand accent — bold, confident red\n- **Green 700** (`#103c25`): `--base-color-green-700`, success\u002Fnature accent\n- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, pressed green\n\n### Text\n- **Plum Black** (`#211922`): Primary text — warm near-black with plum undertone\n- **Black** (`#000000`): Secondary text, button text\n- **Olive Gray** (`#62625b`): Secondary descriptions, muted text\n- **Warm Silver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, disabled text, input borders\n- **White** (`#ffffff`): Text on dark\u002Fcolored surfaces\n\n### Interactive\n- **Focus Blue** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focus rings\n- **Performance Purple** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performance features\n- **Recommendation Purple** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI recommendation\n- **Link Blue** (`#2b48d4`): Link text color\n- **Facebook Blue** (`#0866ff`): `--facebook-background-color`, social login\n- **Pressed Blue** (`#617bff`): `--base-color-pressed-blue-200`, pressed state\n\n### Surface & Border\n- **Sand Gray** (`#e5e5e0`): Secondary button background — warm, craft-like\n- **Warm Light** (`#e0e0d9`): Circular button backgrounds, badges\n- **Warm Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtle warm badge bg\n- **Fog** (`#f6f6f3`): Light surface (at 50% opacity)\n- **Border Disabled** (`#c8c8c1`): `--sema-color-border-disabled`, disabled borders\n- **Hover Gray** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover border\n- **Dark Surface** (`#33332e`): Dark section backgrounds\n\n### Semantic\n- **Error Red** (`#9e0a0a`): Checkbox\u002Fform error states\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |\n| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |\n| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |\n| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |\n| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |\n| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |\n\n### Principles\n- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.\n- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.\n- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.\n- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Red**\n- Background: `#e60023` (Pinterest Red)\n- Text: `#000000` (black — unusual choice for contrast on red)\n- Padding: 6px 14px\n- Radius: 16px (generously rounded, not pill)\n- Border: `2px solid rgba(255, 255, 255, 0)` (transparent)\n- Focus: semantic border + outline via CSS variables\n\n**Secondary Sand**\n- Background: `#e5e5e0` (warm sand gray)\n- Text: `#000000`\n- Padding: 6px 14px\n- Radius: 16px\n- Focus: same semantic border system\n\n**Circular Action**\n- Background: `#e0e0d9` (warm light)\n- Text: `#211922` (plum black)\n- Radius: 50% (circle)\n- Use: Pin actions, navigation controls\n\n**Ghost \u002F Transparent**\n- Background: transparent\n- Text: `#000000`\n- No border\n- Use: Tertiary actions\n\n### Cards & Containers\n- Photography-first pin cards with generous radius (12px–20px)\n- No traditional box-shadow on most cards\n- White or warm fog backgrounds\n- 8px white thick border on some image containers\n\n### Inputs\n- Email input: white background, `1px solid #91918c` border, 16px radius, 11px 15px padding\n- Focus: semantic border + outline system via CSS variables\n\n### Navigation\n- Clean header on white or warm background\n- Pinterest logo + search bar centered\n- Pin Sans 16px for nav links\n- Pinterest Red accents for active states\n\n### Image Treatment\n- Pin-style masonry grid (signature Pinterest layout)\n- Rounded corners: 12px–20px on images\n- Photography as primary content — every pin is an image\n- Thick white borders (8px) on featured image containers\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px\n- Large jumps: 32px → 80px → 100px for section spacing\n\n### Grid & Container\n- Masonry grid for pin content (signature layout)\n- Centered content sections with generous max-width\n- Full-width dark footer\n- Search bar as primary navigation element\n\n### Whitespace Philosophy\n- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.\n- **Breathing above, density below**: Hero\u002Ffeature sections get generous padding; the pin grid is compact and immersive.\n\n### Border Radius Scale\n- Standard (12px): Small cards, links\n- Button (16px): Buttons, inputs, medium cards\n- Comfortable (20px): Feature cards\n- Large (28px): Large containers\n- Section (32px): Tab elements, large panels\n- Hero (40px): Hero containers, large feature blocks\n- Circle (50%): Action buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |\n| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |\n| Focus (Accessibility) | `--sema-color-border-focus-outer-default` ring | Focus states |\n\n**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm neutrals (`#e5e5e0`, `#e0e0d9`, `#91918c`) — the warm olive\u002Fsand tone is the identity\n- Apply Pinterest Red (`#e60023`) only for primary CTAs — it's bold and singular\n- Use Pin Sans exclusively — one font for everything\n- Apply generous border-radius: 16px for buttons\u002Finputs, 20px+ for cards\n- Keep the masonry grid dense — content density is the value\n- Use warm badge backgrounds (`hsla(60,20%,98%,.5)`) for subtle warm washes\n- Use `#211922` (plum black) for primary text — it's warmer than pure black\n\n### Don't\n- Don't use cool gray neutrals — always warm\u002Folive-toned\n- Don't use pure black (`#000000`) as primary text — use plum black (`#211922`)\n- Don't use pill-shaped buttons — 16px radius is rounded but not pill\n- Don't add heavy shadows — Pinterest is flat by design, depth from content\n- Don't use small border-radius (\u003C12px) on cards — the generous rounding is core\n- Don't introduce additional brand colors — red + warm neutrals is the complete palette\n- Don't use thin font weights — Pin Sans at 400 minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C576px | Single column, compact layout |\n| Mobile Large | 576–768px | 2-column pin grid |\n| Tablet | 768–890px | Expanded grid |\n| Desktop Small | 890–1312px | Standard masonry grid |\n| Desktop | 1312–1440px | Full layout |\n| Large Desktop | 1440–1680px | Expanded grid columns |\n| Ultra-wide | >1680px | Maximum grid density |\n\n### Collapsing Strategy\n- Pin grid: 5+ columns → 3 → 2 → 1\n- Navigation: search bar + icons → simplified mobile nav\n- Feature sections: side-by-side → stacked\n- Hero: 70px → scales down proportionally\n- Footer: dark multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Pinterest Red (`#e60023`)\n- Background: White (`#ffffff`)\n- Text: Plum Black (`#211922`)\n- Secondary text: Olive Gray (`#62625b`)\n- Button surface: Sand Gray (`#e5e5e0`)\n- Border: Warm Silver (`#91918c`)\n- Focus: Focus Blue (`#435ee5`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius).\"\n- \"Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b.\"\n- \"Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon.\"\n- \"Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens.\"\n- \"Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c.\"\n\n### Iteration Guide\n1. Warm neutrals everywhere — olive\u002Fsand grays, never cool steel\n2. Pinterest Red for CTAs only — bold and singular\n3. 16px radius on buttons\u002Finputs, 20px+ on cards — generous but not pill\n4. Pin Sans is the only font — compact at 12px for UI, 70px for display\n5. Photography carries the design — the UI stays warm and minimal\n6. Plum black (#211922) for text — warmer than pure black\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Pinterest (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#ffffff; --plum:#211922; --red:#e60023; --olive:#62625b; --warm-silver:#91918c;\n    --sand:#e5e5e0; --warm-light:#e0e0d9; --fog:#f6f6f3; --dark:#33332e;\n    --focus-blue:#435ee5; --link-blue:#2b48d4;\n    --font:'Nunito Sans',-apple-system,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--plum); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--sand); }\n  .nav-brand { font-size:14px; font-weight:700; color:var(--plum); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--olive); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--plum); }\n  .nav-cta { display:inline-block; background:var(--red); color:var(--white); padding:8px 18px; border-radius:16px; font-size:14px; font-weight:700; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:56px; font-weight:600; line-height:1.10; margin-bottom:12px; }\n  .hero h1 span { color:var(--red); }\n  .hero p { font-size:16px; color:var(--olive); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-red { display:inline-block; background:var(--red); color:var(--white); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }\n  .btn-sand { display:inline-block; background:var(--sand); color:var(--plum); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--warm-light); color:var(--plum); width:40px; height:40px; border-radius:50%; font-size:16px; text-decoration:none; border:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--warm-silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:28px; font-weight:700; line-height:1.20; letter-spacing:-1.2px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--sand); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--sand); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--warm-silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--warm-silver); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--olive); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--fog); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--warm-silver); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--warm-silver); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--sand); border-radius:20px; overflow:hidden; }\n  .card-img { height:140px; background:var(--fog); display:flex; align-items:center; justify-content:center; color:var(--warm-silver); font-size:12px; }\n  .card-body { padding:12px 16px; }\n  .card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }\n  .card p { font-size:12px; color:var(--olive); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:700; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }\n  .form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }\n  .form-input--error { border-color:#9e0a0a; box-shadow:0 0 0 2px rgba(158,10,10,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--warm-silver); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--red); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.6; }\n  .spacing-value { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--sand); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--sand); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--dark); color:var(--warm-silver); font-size:12px; border-radius:40px 40px 0 0; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr 1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Sign up\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Pinterest\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with warm craft.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-red\" href=\"#\">Sign up\u003C\u002Fa>\n    \u003Ca class=\"btn-sand\" href=\"#\">Log in\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e60023\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pinterest Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e60023\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#211922\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Plum Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#211922\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#103c25\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#103c25\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Warm Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#62625b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Olive Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#62625b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#91918c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#91918c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, muted\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Sand Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e0e0d9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e0d9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Circular buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f6f6f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fog\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f6f6f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#33332e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#33332e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Footer\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#435ee5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#435ee5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2b48d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2b48d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6845ab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6845ab\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Performance\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:600; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 70px \u002F 600 \u002F Pin Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:28px; font-weight:700; letter-spacing:-1.2px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 28px \u002F 700 \u002F -1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.40; color:var(--olive);\">Body — Find ideas for weeknight dinner. With Pinterest, discover creative ideas that spark joy.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.40 \u002F Pin Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700;\">Caption Bold — Trending now\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Bold — 14px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:500; color:var(--warm-silver);\">Small — 1,234 pins\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small — 12px \u002F 500\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-red\" href=\"#\">Sign up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Red\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-sand\" href=\"#\">Log in\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Sand\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">❤\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circular\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--plum); padding:6px 14px; font-size:12px;\">Ghost\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Transparent\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Weeknight Dinner\u003C\u002Fh3>\u003Cp>Quick recipes for busy evenings\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:var(--sand);\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Home Decor\u003C\u002Fh3>\u003Cp>Inspiration for every room\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#eee;\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Travel Ideas\u003C\u002Fh3>\u003Cp>Destinations worth exploring\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:var(--warm-light);\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Fashion\u003C\u002Fh3>\u003Cp>Outfit ideas for every season\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"Email address\">\u003Cdiv class=\"form-state-label\">Default (warm silver border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Username\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"pinner123\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"password\" value=\"short\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">About you\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about yourself...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:28px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — content driven\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:var(--warm-silver); margin-top:12px;\">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fpinterest.com\u002F\">pinterest.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Pinterest (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#1a1916; --plum:#e8e5de; --red:#e60023; --olive:#a0a099; --warm-silver:#6a6a64;\n    --sand:#33332e; --warm-light:#e0e0d9; --fog:#252520; --dark:#33332e;\n    --focus-blue:#435ee5; --link-blue:#2b48d4;\n    --font:'Nunito Sans',-apple-system,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--plum); font-family:var(--font); font-size:16px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid #33332e; }\n  .nav-brand { font-size:14px; font-weight:700; color:var(--plum); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--olive); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--plum); }\n  .nav-cta { display:inline-block; background:var(--red); color:var(--white); padding:8px 18px; border-radius:16px; font-size:14px; font-weight:700; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; }\n  .hero h1 { font-size:56px; font-weight:600; line-height:1.10; margin-bottom:12px; }\n  .hero h1 span { color:var(--red); }\n  .hero p { font-size:16px; color:var(--olive); max-width:480px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-red { display:inline-block; background:var(--red); color:var(--white); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }\n  .btn-sand { display:inline-block; background:var(--sand); color:var(--plum); padding:10px 24px; border-radius:16px; font-family:var(--font); font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--warm-light); color:var(--plum); width:40px; height:40px; border-radius:50%; font-size:16px; text-decoration:none; border:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:700; color:var(--warm-silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:28px; font-weight:700; line-height:1.20; letter-spacing:-1.2px; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--sand); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid var(--sand); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--warm-silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--warm-silver); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--olive); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--fog); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--warm-silver); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--warm-silver); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }\n  .card { background:var(--white); border:1px solid var(--sand); border-radius:20px; overflow:hidden; }\n  .card-img { height:140px; background:var(--fog); display:flex; align-items:center; justify-content:center; color:var(--warm-silver); font-size:12px; }\n  .card-body { padding:12px 16px; }\n  .card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }\n  .card p { font-size:12px; color:var(--olive); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:700; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }\n  .form-input--focus { border-color:var(--focus-blue); box-shadow:0 0 0 2px rgba(67,94,229,0.3); }\n  .form-input--error { border-color:#9e0a0a; box-shadow:0 0 0 2px rgba(158,10,10,0.2); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--plum); border:1px solid var(--warm-silver); padding:11px 15px; border-radius:16px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--warm-silver); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--red); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.6; }\n  .spacing-value { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--sand); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--sand); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--warm-silver); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--dark); color:var(--warm-silver); font-size:12px; border-radius:40px 40px 0 0; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:768px) { .hero h1 { font-size:36px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr 1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Sign up\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#e60023;color:#ffffff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:16px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Pinterest\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with warm craft.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-red\" href=\"#\">Sign up\u003C\u002Fa>\n    \u003Ca class=\"btn-sand\" href=\"#\">Log in\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e60023\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pinterest Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e60023\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#211922\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Plum Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#211922\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#103c25\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#103c25\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Warm Neutrals\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#62625b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Olive Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#62625b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#91918c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#91918c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, muted\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e5e0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Sand Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e5e0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e0e0d9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e0e0d9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Circular buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f6f6f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Fog\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f6f6f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#33332e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#33332e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Footer\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#435ee5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#435ee5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2b48d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2b48d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6845ab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6845ab\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Performance\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:600; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 70px \u002F 600 \u002F Pin Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:28px; font-weight:700; letter-spacing:-1.2px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 28px \u002F 700 \u002F -1.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.40; color:var(--olive);\">Body — Find ideas for weeknight dinner. With Pinterest, discover creative ideas that spark joy.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.40 \u002F Pin Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700;\">Caption Bold — Trending now\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Bold — 14px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:500; color:var(--warm-silver);\">Small — 1,234 pins\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small — 12px \u002F 500\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-red\" href=\"#\">Sign up\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Red\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-sand\" href=\"#\">Log in\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Sand\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">❤\u003C\u002Fa>\u003Cdiv class=\"button-label\">Circular\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:transparent; color:var(--plum); padding:6px 14px; font-size:12px;\">Ghost\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Transparent\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Weeknight Dinner\u003C\u002Fh3>\u003Cp>Quick recipes for busy evenings\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:var(--sand);\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Home Decor\u003C\u002Fh3>\u003Cp>Inspiration for every room\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:#eee;\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Travel Ideas\u003C\u002Fh3>\u003Cp>Destinations worth exploring\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-img\" style=\"background:var(--warm-light);\">Pin photo\u003C\u002Fdiv>\u003Cdiv class=\"card-body\">\u003Ch3>Fashion\u003C\u002Fh3>\u003Cp>Outfit ideas for every season\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"Email address\">\u003Cdiv class=\"form-state-label\">Default (warm silver border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Username\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"pinner123\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Password\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"password\" value=\"short\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">About you\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about yourself...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:28px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — content driven\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 2px var(--focus-blue);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:var(--warm-silver); margin-top:12px;\">Pinterest uses minimal shadows — depth comes from photography and warm surface colors.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fpinterest.com\u002F\">pinterest.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Pinterest Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fpinterest\u002FDESIGN.md) extracted from the public [Pinterest](https:\u002F\u002Fpinterest.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fpinterest\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Pinterest design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Pinterest Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fpinterest\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Pinterest Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fpinterest\u002Fpreview-screenshot.png)\n",{"slug":250,"name":251,"category":90,"designMd":252,"previewHtml":253,"previewDarkHtml":254,"readme":255},"posthog","Posthog","# Design System Inspiration of PostHog\n\n## 1. Visual Theme & Atmosphere\n\nPostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (`#fdfdf8`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.\n\nThe personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says \"we're serious engineers\" while everything around it says \"but we don't take ourselves too seriously.\"\n\nThe interaction design carries the same spirit: hover states flash PostHog Orange (`#F54E00`) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (`#1e1f23`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (`#bfc1b7`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn\u002Fui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.\n\n**Key Characteristics:**\n- Warm sage\u002Folive color palette instead of conventional blues — earthy and approachable\n- IBM Plex Sans Variable font at bold weights (700\u002F800) for headings with generous 1.50+ line-heights\n- Hidden brand orange (`#F54E00`) that only appears on hover interactions — a delightful surprise\n- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate\n- Sage-tinted borders (`#bfc1b7`) and backgrounds (`#eeefe9`) creating a unified warm-green system\n- Dark near-black CTAs (`#1e1f23`) with opacity-based hover states\n- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page\n- Tailwind CSS + Radix UI + shadcn\u002Fui component architecture\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Olive Ink** (`#4d4f46`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone\n- **Deep Olive** (`#23251d`): Link text and high-emphasis headings — near-black with green undertone\n- **PostHog Orange** (`#F54E00`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises\n\n### Secondary & Accent\n- **Amber Gold** (`#F7A501`): Secondary hover accent on dark buttons — warm gold that pairs with the orange\n- **Gold Border** (`#b17816`): Special button borders — an amber-gold for featured CTAs\n- **Focus Blue** (`#3b82f6`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility\n\n### Surface & Background\n- **Warm Parchment** (`#fdfdf8`): Primary page background — warm near-white with yellow-green undertone\n- **Sage Cream** (`#eeefe9`): Input backgrounds, secondary surfaces — light sage tint\n- **Light Sage** (`#e5e7e0`): Button backgrounds, tertiary surfaces — muted sage-green\n- **Warm Tan** (`#d4c9b8`): Featured button backgrounds — warm tan\u002Fkhaki for emphasis\n- **Hover White** (`#f4f4f4`): Universal hover background state\n\n### Neutrals & Text\n- **Olive Ink** (`#4d4f46`): Primary body and UI text\n- **Muted Olive** (`#65675e`): Secondary text, button labels on light backgrounds\n- **Sage Placeholder** (`#9ea096`): Placeholder text, disabled states — warm sage-green\n- **Sage Border** (`#bfc1b7`): Primary border color — olive-tinted gray for all borders\n- **Light Border** (`#b6b7af`): Secondary border, toolbar borders — slightly darker sage\n\n### Semantic & Accent\n- **PostHog Orange** (`#F54E00`): Hover text accent — signals interactivity and brand personality\n- **Amber Gold** (`#F7A501`): Dark button hover accent — warmth signal\n- **Focus Blue** (`#3b82f6` at 50% opacity): Keyboard focus rings — accessibility-only color\n- **Dark Text** (`#111827`): High-contrast link text — near-black for important links\n\n### Gradient System\n- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm\n- Depth is achieved through layered surfaces and border containment, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: `IBM Plex Sans Variable` — variable font (100–700+ weight range). Fallbacks: `IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial`\n- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` — system monospace stack\n- **Code Display**: `Source Code Pro` — with fallbacks: `Menlo, Consolas, Monaco`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |\n| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |\n| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |\n| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |\n| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |\n| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |\n| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |\n| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |\n| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |\n| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |\n| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |\n| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |\n| Nav \u002F UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |\n| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |\n| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |\n| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |\n| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |\n\n### Principles\n- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery\n- **Generous body line-heights**: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions\n- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid\u002Fscaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base\n- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention\n- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: `#1e1f23` background, white text, 6px radius, `10px 12px` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident\n- **Sage Light**: `#e5e7e0` background, Olive Ink (`#4d4f46`) text, 4px radius, `4px` padding. Hover: `#f4f4f4` bg with PostHog Orange text. Compact utility button\n- **Warm Tan Featured**: `#d4c9b8` background, black text, no visible radius. Hover: same orange text flash. Featured\u002Fpremium actions\n- **Input-style**: `#eeefe9` background, Sage Placeholder (`#9ea096`) text, 4px radius, 1px `#b6b7af` border. Looks like a search\u002Ffilter control\n- **Near-white Ghost**: `#fdfdf8` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence\n- **Hover pattern**: All buttons flash PostHog Orange (`#F54E00`) or Amber Gold (`#F7A501`) text on hover — the brand's signature interaction surprise\n\n### Cards & Containers\n- **Bordered Card**: Warm Parchment (`#fdfdf8`) or white background, 1px `#bfc1b7` border, 4px–6px radius — clean and minimal\n- **Sage Surface Card**: `#eeefe9` background for secondary content containers\n- **Shadow Card**: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` — a single deep shadow for elevated content (modals, dropdowns)\n- **Hover**: Orange text flash on interactive cards — consistent with button behavior\n\n### Inputs & Forms\n- **Default**: `#eeefe9` background, `#9ea096` placeholder text, 1px `#b6b7af` border, 4px radius, `2px 0px 2px 8px` padding\n- **Focus**: `#3b82f6` ring at 50% opacity (Tailwind blue focus ring)\n- **Text color**: `#374151` for input values — darker than primary text for readability\n- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)\n\n### Navigation\n- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600\n- **Dropdown menus**: Rich mega-menu structure with product categories\n- **Link color**: Deep Olive (`#23251d`) for nav links, underline on hover\n- **CTA**: Dark Primary button (#1e1f23) in the nav — \"Get started - free\"\n- **Mobile**: Collapses to hamburger with simplified menu\n\n### Image Treatment\n- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element\n- **Product screenshots**: UI screenshots embedded in device frames or clean containers\n- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate\n- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar\n- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen\n\n### AI Chat Widget\n- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px\n- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)\n- **Card padding**: 4px–12px internal (notably compact)\n- **Component gaps**: 4px–8px between related elements\n\n### Grid & Container\n- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px\n- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos\n- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px\n\n### Whitespace Philosophy\n- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish\n- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving\n- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally\n\n### Border Radius Scale\n- **2px**: Small inline elements, tags (`span`)\n- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (`button`, `div`, `combobox`)\n- **6px**: Secondary containers — larger buttons, list items, card variants (`button`, `div`, `li`)\n- **9999px**: Pill shape — badges, status indicators, rounded tags (`span`, `div`)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |\n| Level 1 (Border) | `1px solid #bfc1b7` (Sage Border) | Card containment, input borders, section dividers |\n| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |\n| Level 3 (Deep Shadow) | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | Modals, floating elements, mega-menu dropdowns |\n\n### Shadow Philosophy\nPostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:\n- **Border containment**: Sage-tinted borders (`#bfc1b7`) at 1px create gentle warm separation\n- **Surface color shifts**: Moving from `#fdfdf8` to `#eeefe9` to `#e5e7e0` creates layered depth without shadows\n- **The single shadow**: The one defined shadow (`0 25px 50px -12px`) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed\n\n### Decorative Depth\n- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally\n- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation\n- **No glassmorphism**: Fully opaque surfaces throughout\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the olive\u002Fsage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand\n- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature\n- Use IBM Plex Sans at bold weights (700\u002F800) for headings — the font carries technical credibility\n- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability\n- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold\n- Use 4px border-radius for most UI elements — keep corners subtle and functional\n- Include playful, hand-drawn illustration elements — the personality is the differentiator\n- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts\n\n### Don't\n- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive\u002Fsage\n- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders\n- Make the design look \"polished\" or \"premium\" in a conventional sense — PostHog's charm is its irreverent, scrappy energy\n- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout\n- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional\n- Remove the orange hover flash — it's a core interaction pattern, not decoration\n- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand\n- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C425px | Single column, compact padding, stacked cards |\n| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |\n| Tablet | 640px–768px | 2-column grids begin, nav partially visible |\n| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |\n| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |\n| Large Desktop | 1280px–1536px | Max-width container, generous margins |\n| Extra Large | >1536px | Centered container at max-width |\n\n### Touch Targets\n- Buttons: 4px–6px radius with `4px–12px` padding — compact but usable\n- Nav links: 15px text at weight 600 with adequate padding\n- Mobile: Hamburger menu with simplified navigation\n- Inputs: Generous vertical padding for thumb-friendly forms\n\n### Collapsing Strategy\n- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile\n- **Feature grids**: 3-column → 2-column → single column stacked\n- **Typography**: Display sizes reduce across breakpoints (30px → smaller)\n- **Illustrations**: Scale within containers, some may hide on mobile for space\n- **Section spacing**: Reduces proportionally while maintaining readability\n\n### Image Behavior\n- Illustrations scale responsively within containers\n- Product screenshots maintain aspect ratios\n- Trust logos reflow into multi-row grids on mobile\n- AI chat widget may reposition or simplify on small screens\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Olive Ink (`#4d4f46`)\n- Dark Text: Deep Olive (`#23251d`)\n- Hover Accent: PostHog Orange (`#F54E00`)\n- Dark CTA: Near-Black (`#1e1f23`)\n- Button Surface: Light Sage (`#e5e7e0`)\n- Page Background: Warm Parchment (`#fdfdf8`)\n- Border: Sage Border (`#bfc1b7`)\n- Placeholder: Sage Placeholder (`#9ea096`)\n\n### Example Component Prompts\n- \"Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)\"\n- \"Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)\"\n- \"Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right\"\n- \"Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost\u002Ftext button — all flash #F54E00 orange text on hover\"\n- \"Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential\n2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray\n3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this\n4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element\n5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by PostHog\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --olive-ink: #4d4f46;\n    --deep-olive: #23251d;\n    --posthog-orange: #F54E00;\n    --amber-gold: #F7A501;\n    --gold-border: #b17816;\n    --focus-blue: #3b82f6;\n    --warm-parchment: #fdfdf8;\n    --sage-cream: #eeefe9;\n    --light-sage: #e5e7e0;\n    --warm-tan: #d4c9b8;\n    --hover-white: #f4f4f4;\n    --muted-olive: #65675e;\n    --sage-placeholder: #9ea096;\n    --sage-border: #bfc1b7;\n    --light-border: #b6b7af;\n    --near-black: #1e1f23;\n    --dark-text: #111827;\n    --white: #ffffff;\n    --font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;\n    --mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font);\n    background: var(--warm-parchment);\n    color: var(--olive-ink);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: var(--warm-parchment);\n    border-bottom: 1px solid var(--sage-border);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--deep-olive);\n    text-decoration: none;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--olive-ink);\n    text-decoration: none;\n    transition: color 0.15s;\n  }\n  .nav-links a:hover { color: var(--posthog-orange); }\n  .nav-cta {\n    background: var(--near-black);\n    color: var(--white);\n    padding: 8px 16px;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.7; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: var(--warm-parchment);\n    padding: 80px 32px 64px;\n    border-bottom: 1px solid var(--sage-border);\n  }\n  .hero-inner {\n    max-width: 800px;\n    margin: 0 auto;\n  }\n  .hero h1 {\n    font-size: 30px;\n    font-weight: 800;\n    line-height: 1.20;\n    letter-spacing: -0.75px;\n    color: var(--deep-olive);\n    margin-bottom: 16px;\n  }\n  .hero .subtitle {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.56;\n    color: var(--muted-olive);\n    margin-bottom: 32px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n  .btn-dark {\n    background: var(--near-black);\n    color: var(--white);\n    padding: 10px 16px;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    font-family: var(--font);\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .btn-dark:hover { opacity: 0.7; }\n  .btn-sage {\n    background: var(--light-sage);\n    color: var(--olive-ink);\n    padding: 10px 16px;\n    border-radius: 4px;\n    font-size: 15px;\n    font-weight: 600;\n    font-family: var(--font);\n    text-decoration: none;\n    border: 1px solid var(--sage-border);\n    cursor: pointer;\n    transition: color 0.15s, background 0.15s;\n  }\n  .btn-sage:hover { color: var(--posthog-orange); background: var(--hover-white); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 64px 32px;\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.33;\n    color: var(--deep-olive);\n    margin-bottom: 8px;\n  }\n  .section-subtitle {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--muted-olive);\n    margin-bottom: 40px;\n  }\n\n  \u002F* COLORS *\u002F\n  .color-category { margin-bottom: 32px; }\n  .color-category h3 {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--deep-olive);\n    margin-bottom: 16px;\n    text-transform: uppercase;\n    letter-spacing: 0px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: 6px;\n    overflow: hidden;\n    border: 1px solid var(--sage-border);\n    background: var(--white);\n  }\n  .swatch-color { height: 80px; width: 100%; }\n  .swatch-info { padding: 10px 12px; }\n  .swatch-name { font-size: 13px; font-weight: 700; color: var(--deep-olive); margin-bottom: 2px; }\n  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--sage-placeholder); font-family: var(--mono); margin-bottom: 4px; }\n  .swatch-role { font-size: 11px; color: var(--muted-olive); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 20px 0;\n    border-bottom: 1px solid var(--sage-border);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text { color: var(--deep-olive); margin-bottom: 6px; }\n  .type-sample .type-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--posthog-orange);\n    font-family: var(--mono);\n    line-height: 1.4;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n  }\n  .btn-label {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--sage-placeholder);\n    font-family: var(--mono);\n  }\n  .btn-tan {\n    background: var(--warm-tan);\n    color: #000;\n    padding: 10px 16px;\n    border-radius: 4px;\n    font-size: 15px;\n    font-weight: 600;\n    font-family: var(--font);\n    border: none;\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-tan:hover { color: var(--posthog-orange); }\n  .btn-ghost-parchment {\n    background: var(--warm-parchment);\n    color: var(--olive-ink);\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font);\n    border: 1px solid transparent;\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-ghost-parchment:hover { color: var(--posthog-orange); }\n  .btn-input {\n    background: var(--sage-cream);\n    color: var(--sage-placeholder);\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 400;\n    font-family: var(--font);\n    border: 1px solid var(--light-border);\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-input:hover { color: var(--posthog-orange); }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 20px;\n  }\n  .card {\n    border-radius: 6px;\n    padding: 24px;\n    transition: transform 0.15s;\n  }\n  .card-bordered {\n    background: var(--white);\n    border: 1px solid var(--sage-border);\n  }\n  .card-sage {\n    background: var(--sage-cream);\n    border: 1px solid var(--sage-border);\n  }\n  .card-shadow {\n    background: var(--white);\n    border: 1px solid var(--sage-border);\n    box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);\n  }\n  .card-hover:hover { transform: translateY(-2px); }\n  .card h4 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--deep-olive);\n    margin-bottom: 8px;\n    line-height: 1.40;\n  }\n  .card .card-desc {\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.71;\n    color: var(--muted-olive);\n  }\n  .card .card-label {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--posthog-orange);\n    font-family: var(--mono);\n    margin-top: 12px;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 20px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--deep-olive);\n  }\n  .form-group input,\n  .form-group textarea {\n    font-family: var(--font);\n    font-size: 15px;\n    font-weight: 400;\n    padding: 8px 12px;\n    border-radius: 4px;\n    border: 1px solid var(--light-border);\n    background: var(--sage-cream);\n    color: var(--deep-olive);\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-group input::placeholder,\n  .form-group textarea::placeholder { color: var(--sage-placeholder); }\n  .form-group input:focus,\n  .form-group textarea:focus {\n    border-color: var(--focus-blue);\n    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\n  }\n  .form-group input.error { border-color: var(--posthog-orange); }\n  .form-group textarea { resize: vertical; min-height: 80px; }\n  .form-hint { font-size: 11px; color: var(--sage-placeholder); font-family: var(--mono); }\n  .form-error-text { font-size: 11px; color: var(--posthog-orange); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n  }\n  .spacing-box {\n    background: var(--posthog-orange);\n    border-radius: 2px;\n    height: 40px;\n    opacity: 0.7;\n  }\n  .spacing-label {\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--muted-olive);\n    font-family: var(--mono);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: center;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--light-sage);\n    border: 1px solid var(--sage-border);\n  }\n  .radius-label { font-size: 12px; font-weight: 700; color: var(--deep-olive); font-family: var(--mono); }\n  .radius-context { font-size: 10px; color: var(--sage-placeholder); text-align: center; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-section {\n    background: var(--sage-cream);\n    border-radius: 6px;\n    padding: 40px;\n    border: 1px solid var(--sage-border);\n  }\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n    gap: 20px;\n  }\n  .elevation-card {\n    background: var(--white);\n    border-radius: 6px;\n    padding: 24px;\n    min-height: 120px;\n  }\n  .elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--deep-olive); margin-bottom: 6px; }\n  .elevation-card p { font-size: 12px; color: var(--muted-olive); line-height: 1.5; }\n  .elev-flat { box-shadow: none; border: none; }\n  .elev-border { box-shadow: none; border: 1px solid var(--sage-border); }\n  .elev-compound { box-shadow: none; border-top: 1px solid var(--sage-border); border-left: 1px solid var(--sage-border); border-bottom: 1px solid var(--sage-border); }\n  .elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25); border: none; }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    text-align: center;\n    padding: 40px 32px;\n    border-top: 1px solid var(--sage-border);\n    font-size: 13px;\n    color: var(--sage-placeholder);\n  }\n\n  @media (max-width: 768px) {\n    nav { padding: 10px 16px; }\n    .nav-links { display: none; }\n    .hero { padding: 48px 16px 40px; }\n    .hero h1 { font-size: 24px; }\n    .section { padding: 40px 16px; }\n    .section-title { font-size: 20px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 20px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get started - free\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-inner\">\n    \u003Ch1>Design System Inspired by PostHog\u003C\u002Fh1>\n    \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Cbutton class=\"btn-dark\">Explore Tokens\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-sage\">View DESIGN.md\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">PostHog's warm olive\u002Fsage palette — no blues, no purples, just earthy warmth.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#4d4f46;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Olive Ink\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#4d4f46\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary text color\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#23251d;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Deep Olive\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#23251d\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Links and headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#F54E00;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">PostHog Orange\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F54E00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Hidden hover accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#F7A501;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F7A501\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark button hover accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#b17816;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Gold Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b17816\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Featured button borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#3b82f6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b82f6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Focus ring (accessibility)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#fdfdf8; border-bottom: 1px solid #e5e7e0;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Parchment\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#fdfdf8\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#eeefe9;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Cream\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#eeefe9\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Input & secondary surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#e5e7e0;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Sage\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#e5e7e0\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Button backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#d4c9b8;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Tan\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#d4c9b8\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Featured button background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#f4f4f4;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Hover White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Hover background state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#65675e;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Muted Olive\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#65675e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#9ea096;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Placeholder\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#9ea096\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Placeholder text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#bfc1b7;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#bfc1b7\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#b6b7af;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b6b7af\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Toolbar borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#1e1f23;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near-Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1e1f23\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark CTA button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">IBM Plex Sans Variable with bold headings and generous body line-heights.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Display Hero — 30px \u002F 800 \u002F 1.20 \u002F -0.75px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:36px; font-weight:700; line-height:1.50;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Heading — 36px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:24px; font-weight:700; line-height:1.33;\">Feature Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Feature Heading — 24px \u002F 700 \u002F 1.33 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading — 20px \u002F 700 \u002F 1.40 \u002F -0.5px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;\">Sub-heading Uppercase\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading Uppercase — 20px \u002F 700 \u002F 1.40 \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:18px; font-weight:600; line-height:1.56;\">Body Semi — Semi-bold body text for callouts and emphasis\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Semi — 18px \u002F 600 \u002F 1.56 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text with comfortable line-height for content-heavy pages.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 400 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:15px; font-weight:400; line-height:1.71;\">Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Relaxed — 15px \u002F 400 \u002F 1.71 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:15px; font-weight:600; line-height:1.50;\">Nav \u002F UI Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav \u002F UI — 15px \u002F 600 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:600; line-height:1.43;\">Caption Semi — Emphasized captions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption Semi — 14px \u002F 600 \u002F 1.43 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:13px; font-weight:700; line-height:1.50;\">Small Label Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Small Label — 13px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;\">Micro Uppercase\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Uppercase — 12px \u002F 700 \u002F 1.33 \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);\">Code — Source Code Pro monospace\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Code — 14px \u002F 500 \u002F 1.43 \u002F Source Code Pro\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">All buttons flash PostHog Orange on hover — the brand's signature surprise.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dark\">Dark Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#1e1f23 \u002F white \u002F 6px \u002F opacity hover\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-sage\">Sage Light\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#e5e7e0 \u002F #4d4f46 \u002F 4px \u002F orange hover\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-tan\">Warm Tan\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#d4c9b8 \u002F black \u002F 4px \u002F featured\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-input\">Input Style\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#eeefe9 \u002F #9ea096 \u002F 4px \u002F bordered\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-ghost-parchment\">Ghost\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#fdfdf8 \u002F #4d4f46 \u002F 4px \u002F minimal\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Bordered, sage-surface, and deep-shadow card variants.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered card-hover\">\n      \u003Ch4>Bordered Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">White background with sage border. Hover to see lift. The standard container pattern.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #fff \u002F border: 1px #bfc1b7 \u002F radius: 6px\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-sage\">\n      \u003Ch4>Sage Surface Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Sage cream background for secondary content areas and grouped information.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #eeefe9 \u002F border: 1px #bfc1b7 \u002F radius: 6px\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-shadow\">\n      \u003Ch4>Deep Shadow Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">The single dramatic shadow — reserved for modals, dropdowns, and floating elements.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">shadow: 0 25px 50px -12px rgba(0,0,0,0.25)\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Sage-tinted inputs with blue focus rings.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Default Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Search or ask a question...\">\n      \u003Cspan class=\"form-hint\">bg: #eeefe9 \u002F border: #b6b7af \u002F radius: 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Focus State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Focused input\" style=\"border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\">\n      \u003Cspan class=\"form-hint\">focus: blue ring rgba(59,130,246,0.3)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"error\" placeholder=\"Invalid\" value=\"bad input\">\n      \u003Cspan class=\"form-error-text\">Validation error — border turns PostHog Orange\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Textarea\u003C\u002Flabel>\n      \u003Ctextarea placeholder=\"Type your message...\">\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-hint\">Same styles as input, resizable\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">2\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">10\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:18px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">18\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">32\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:34px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">34\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Tight and functional — 2px to pill (9999px).\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Tags, inline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, inputs\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">6px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Cards, containers\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:80px; height:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Pill badges\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal shadows — borders and surface colors do the heavy lifting.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\n        \u003Ch4>Level 0 — Flat\u003C\u002Fh4>\n        \u003Cp>No shadow, warm parchment background. The default for most surfaces.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-border\">\n        \u003Ch4>Level 1 — Border\u003C\u002Fh4>\n        \u003Cp>1px solid Sage Border (#bfc1b7). Card containment, input borders, section dividers.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-compound\">\n        \u003Ch4>Level 2 — Compound\u003C\u002Fh4>\n        \u003Cp>Multiple 1px borders on different sides. Input groupings and toolbar elements.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-deep\">\n        \u003Ch4>Level 3 — Deep Shadow\u003C\u002Fh4>\n        \u003Cp>0px 25px 50px -12px rgba(0,0,0,0.25). Reserved for modals, dropdowns, floating elements.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\n  Generated from DESIGN.md — PostHog Design System Catalog\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by PostHog — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --olive-ink: #4d4f46;\n    --deep-olive: #23251d;\n    --posthog-orange: #F54E00;\n    --amber-gold: #F7A501;\n    --gold-border: #b17816;\n    --focus-blue: #3b82f6;\n    --warm-parchment: #fdfdf8;\n    --sage-cream: #eeefe9;\n    --light-sage: #e5e7e0;\n    --warm-tan: #d4c9b8;\n    --hover-white: #f4f4f4;\n    --muted-olive: #65675e;\n    --sage-placeholder: #9ea096;\n    --sage-border: #bfc1b7;\n    --light-border: #b6b7af;\n    --near-black: #1e1f23;\n    --dark-text: #111827;\n    --white: #ffffff;\n    --font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;\n    --mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n\n    \u002F* Dark mode *\u002F\n    --dk-bg: #151614;\n    --dk-surface: #1c1d1a;\n    --dk-surface-elevated: #252621;\n    --dk-border: #3a3b36;\n    --dk-text-primary: #e5e7e0;\n    --dk-text-secondary: #9ea096;\n    --dk-text-muted: #65675e;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font);\n    background: var(--dk-bg);\n    color: var(--dk-text-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 12px;\n    right: 12px;\n    z-index: 200;\n    background: var(--posthog-orange);\n    color: var(--white);\n    padding: 5px 12px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(21, 22, 20, 0.92);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border-bottom: 1px solid var(--dk-border);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--dk-text-primary);\n    text-decoration: none;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--dk-text-secondary);\n    text-decoration: none;\n    transition: color 0.15s;\n  }\n  .nav-links a:hover { color: var(--posthog-orange); }\n  .nav-cta {\n    background: var(--warm-parchment);\n    color: var(--deep-olive);\n    padding: 8px 16px;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: var(--dk-bg);\n    padding: 80px 32px 64px;\n    border-bottom: 1px solid var(--dk-border);\n  }\n  .hero-inner { max-width: 800px; margin: 0 auto; }\n  .hero h1 {\n    font-size: 30px;\n    font-weight: 800;\n    line-height: 1.20;\n    letter-spacing: -0.75px;\n    color: var(--dk-text-primary);\n    margin-bottom: 16px;\n  }\n  .hero .subtitle {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.56;\n    color: var(--dk-text-secondary);\n    margin-bottom: 32px;\n  }\n  .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }\n  .btn-light {\n    background: var(--warm-parchment);\n    color: var(--deep-olive);\n    padding: 10px 16px;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    font-family: var(--font);\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .btn-light:hover { opacity: 0.85; }\n  .btn-outline-dk {\n    background: transparent;\n    color: var(--dk-text-primary);\n    padding: 10px 16px;\n    border-radius: 4px;\n    font-size: 15px;\n    font-weight: 600;\n    font-family: var(--font);\n    border: 1px solid var(--dk-border);\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-outline-dk:hover { color: var(--posthog-orange); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }\n  .section-title {\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.33;\n    color: var(--dk-text-primary);\n    margin-bottom: 8px;\n  }\n  .section-subtitle {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--dk-text-secondary);\n    margin-bottom: 40px;\n  }\n\n  \u002F* COLORS *\u002F\n  .color-category { margin-bottom: 32px; }\n  .color-category h3 {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--dk-text-primary);\n    margin-bottom: 16px;\n    text-transform: uppercase;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border-radius: 6px;\n    overflow: hidden;\n    border: 1px solid var(--dk-border);\n    background: var(--dk-surface);\n  }\n  .swatch-color { height: 80px; width: 100%; }\n  .swatch-info { padding: 10px 12px; }\n  .swatch-name { font-size: 13px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 2px; }\n  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); margin-bottom: 4px; }\n  .swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 20px 0;\n    border-bottom: 1px solid var(--dk-border);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text { color: var(--dk-text-primary); margin-bottom: 6px; }\n  .type-sample .type-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--posthog-orange);\n    font-family: var(--mono);\n    line-height: 1.4;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }\n  .btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); }\n  .btn-dk-primary {\n    background: var(--warm-parchment);\n    color: var(--deep-olive);\n    padding: 10px 16px;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    font-family: var(--font);\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.15s;\n  }\n  .btn-dk-primary:hover { opacity: 0.85; }\n  .btn-dk-sage {\n    background: var(--dk-surface-elevated);\n    color: var(--dk-text-primary);\n    padding: 10px 16px;\n    border-radius: 4px;\n    font-size: 15px;\n    font-weight: 600;\n    font-family: var(--font);\n    border: 1px solid var(--dk-border);\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-dk-sage:hover { color: var(--posthog-orange); }\n  .btn-dk-tan {\n    background: #4a3f30;\n    color: var(--warm-tan);\n    padding: 10px 16px;\n    border-radius: 4px;\n    font-size: 15px;\n    font-weight: 600;\n    font-family: var(--font);\n    border: none;\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-dk-tan:hover { color: var(--posthog-orange); }\n  .btn-dk-input {\n    background: var(--dk-surface);\n    color: var(--dk-text-muted);\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 400;\n    font-family: var(--font);\n    border: 1px solid var(--dk-border);\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-dk-input:hover { color: var(--posthog-orange); }\n  .btn-dk-ghost {\n    background: transparent;\n    color: var(--dk-text-secondary);\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font);\n    border: 1px solid transparent;\n    cursor: pointer;\n    transition: color 0.15s;\n  }\n  .btn-dk-ghost:hover { color: var(--posthog-orange); }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 20px;\n  }\n  .card { border-radius: 6px; padding: 24px; transition: transform 0.15s; }\n  .card-dk-bordered { background: var(--dk-surface); border: 1px solid var(--dk-border); }\n  .card-dk-elevated { background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }\n  .card-dk-shadow {\n    background: var(--dk-surface);\n    border: 1px solid var(--dk-border);\n    box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.5);\n  }\n  .card-hover:hover { transform: translateY(-2px); }\n  .card h4 { font-size: 20px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 8px; line-height: 1.40; }\n  .card .card-desc { font-size: 15px; font-weight: 400; line-height: 1.71; color: var(--dk-text-secondary); }\n  .card .card-label { font-size: 11px; font-weight: 500; color: var(--posthog-orange); font-family: var(--mono); margin-top: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text-primary); }\n  .form-group input, .form-group textarea {\n    font-family: var(--font);\n    font-size: 15px;\n    font-weight: 400;\n    padding: 8px 12px;\n    border-radius: 4px;\n    border: 1px solid var(--dk-border);\n    background: var(--dk-surface);\n    color: var(--dk-text-primary);\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }\n  .form-group input:focus, .form-group textarea:focus {\n    border-color: var(--focus-blue);\n    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\n  }\n  .form-group input.error { border-color: var(--posthog-orange); }\n  .form-group textarea { resize: vertical; min-height: 80px; }\n  .form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--mono); }\n  .form-error-text { font-size: 11px; color: var(--posthog-orange); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n  .spacing-box { background: var(--posthog-orange); border-radius: 2px; height: 40px; opacity: 0.6; }\n  .spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--mono); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }\n  .radius-label { font-size: 12px; font-weight: 700; color: var(--dk-text-primary); font-family: var(--mono); }\n  .radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-section {\n    background: var(--dk-surface);\n    border-radius: 6px;\n    padding: 40px;\n    border: 1px solid var(--dk-border);\n  }\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }\n  .elevation-card {\n    background: var(--dk-surface-elevated);\n    border-radius: 6px;\n    padding: 24px;\n    min-height: 120px;\n  }\n  .elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 6px; }\n  .elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }\n  .elev-flat { box-shadow: none; border: none; }\n  .elev-border { box-shadow: none; border: 1px solid var(--dk-border); }\n  .elev-compound { box-shadow: none; border-top: 1px solid var(--dk-border); border-left: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border); }\n  .elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.6); border: none; }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    text-align: center;\n    padding: 40px 32px;\n    border-top: 1px solid var(--dk-border);\n    font-size: 13px;\n    color: var(--dk-text-muted);\n  }\n\n  @media (max-width: 768px) {\n    nav { padding: 10px 16px; }\n    .nav-links { display: none; }\n    .hero { padding: 48px 16px 40px; }\n    .hero h1 { font-size: 24px; }\n    .section { padding: 40px 16px; }\n    .section-title { font-size: 20px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 20px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n    .dark-badge { top: 10px; right: 10px; font-size: 10px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get started - free\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-inner\">\n    \u003Ch1>Design System Inspired by PostHog\u003C\u002Fh1>\n    \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Cbutton class=\"btn-light\">Explore Tokens\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-outline-dk\">View DESIGN.md\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">PostHog's warm olive\u002Fsage palette on dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#4d4f46;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Olive Ink\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#4d4f46\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary text color\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#23251d;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Deep Olive\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#23251d\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Links and headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#F54E00;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">PostHog Orange\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F54E00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Hidden hover accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#F7A501;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Amber Gold\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F7A501\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark button hover accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#b17816;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Gold Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b17816\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Featured button borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#3b82f6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#3b82f6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Focus ring (accessibility)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#fdfdf8;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Parchment\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#fdfdf8\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Page background (light)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#eeefe9;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Cream\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#eeefe9\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Input & secondary surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#e5e7e0;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Sage\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#e5e7e0\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Button backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#d4c9b8;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Tan\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#d4c9b8\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Featured button background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#f4f4f4;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Hover White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Hover background state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#65675e;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Muted Olive\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#65675e\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#9ea096;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Placeholder\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#9ea096\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Placeholder text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#bfc1b7;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Sage Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#bfc1b7\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#b6b7af;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Light Border\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#b6b7af\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Toolbar borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-color\" style=\"background:#1e1f23;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Near-Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1e1f23\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Dark CTA button\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">IBM Plex Sans Variable with bold headings and generous body line-heights.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Display Hero — 30px \u002F 800 \u002F 1.20 \u002F -0.75px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:36px; font-weight:700; line-height:1.50;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Heading — 36px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:24px; font-weight:700; line-height:1.33;\">Feature Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Feature Heading — 24px \u002F 700 \u002F 1.33 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading — 20px \u002F 700 \u002F 1.40 \u002F -0.5px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;\">Sub-heading Uppercase\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading Uppercase — 20px \u002F 700 \u002F 1.40 \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:18px; font-weight:600; line-height:1.56;\">Body Semi — Semi-bold body text for callouts and emphasis\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Semi — 18px \u002F 600 \u002F 1.56 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body — Standard reading text with comfortable line-height for content-heavy pages.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 400 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:15px; font-weight:400; line-height:1.71;\">Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Relaxed — 15px \u002F 400 \u002F 1.71 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:15px; font-weight:600; line-height:1.50;\">Nav \u002F UI Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav \u002F UI — 15px \u002F 600 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:600; line-height:1.43;\">Caption Semi — Emphasized captions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption Semi — 14px \u002F 600 \u002F 1.43 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:13px; font-weight:700; line-height:1.50;\">Small Label Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Small Label — 13px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;\">Micro Uppercase\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Uppercase — 12px \u002F 700 \u002F 1.33 \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);\">Code — Source Code Pro monospace\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Code — 14px \u002F 500 \u002F 1.43 \u002F Source Code Pro\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Inverted for dark surfaces — orange hover flash preserved.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dk-primary\">Light Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#fdfdf8 \u002F #23251d \u002F 6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dk-sage\">Sage Outline\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#252621 \u002F border \u002F 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dk-tan\">Warm Tan\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">dark tan bg \u002F tan text \u002F 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dk-input\">Input Style\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">dark surface \u002F muted \u002F 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dk-ghost\">Ghost\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">transparent \u002F secondary \u002F 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark surface cards with olive-tinted borders.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-dk-bordered card-hover\">\n      \u003Ch4>Bordered Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Dark surface with subtle olive border. Hover to see lift effect.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #1c1d1a \u002F border: 1px #3a3b36 \u002F radius: 6px\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dk-elevated\">\n      \u003Ch4>Elevated Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Slightly lighter surface for secondary content groupings.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #252621 \u002F border: 1px #3a3b36 \u002F radius: 6px\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dk-shadow\">\n      \u003Ch4>Deep Shadow Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Dramatic shadow for modals and floating elements on dark backgrounds.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">shadow: 0 25px 50px -12px rgba(0,0,0,0.5)\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark surface inputs with blue focus rings.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Default Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Search or ask a question...\">\n      \u003Cspan class=\"form-hint\">bg: #1c1d1a \u002F border: #3a3b36 \u002F radius: 4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Focus State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Focused input\" style=\"border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\">\n      \u003Cspan class=\"form-hint\">focus: blue ring rgba(59,130,246,0.3)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"error\" placeholder=\"Invalid\" value=\"bad input\">\n      \u003Cspan class=\"form-error-text\">Validation error — PostHog Orange border\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Textarea\u003C\u002Flabel>\n      \u003Ctextarea placeholder=\"Type your message...\">\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-hint\">Same styles as input, resizable\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">2\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">10\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:18px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">18\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">32\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:34px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">34\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Tight and functional — 2px to pill (9999px).\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Tags, inline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, inputs\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">6px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Cards, containers\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:80px; height:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">9999px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Pill badges\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal shadows — borders and surface colors do the heavy lifting.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\n        \u003Ch4>Level 0 — Flat\u003C\u002Fh4>\n        \u003Cp>No shadow, dark surface. Default canvas for most elements.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-border\">\n        \u003Ch4>Level 1 — Border\u003C\u002Fh4>\n        \u003Cp>1px solid olive-tinted border. Card containment and dividers.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-compound\">\n        \u003Ch4>Level 2 — Compound\u003C\u002Fh4>\n        \u003Cp>Multiple borders on different sides. Toolbar and input groupings.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-deep\">\n        \u003Ch4>Level 3 — Deep Shadow\u003C\u002Fh4>\n        \u003Cp>Dramatic shadow for modals, dropdowns, and floating elements.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\n  Generated from DESIGN.md — PostHog Design System Catalog (Dark Mode)\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Posthog Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fposthog\u002FDESIGN.md) extracted from the public [PostHog](https:\u002F\u002Fposthog.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fposthog\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Posthog design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Posthog Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fposthog\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Posthog Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fposthog\u002Fpreview-screenshot.png)\n",{"slug":257,"name":258,"category":90,"designMd":259,"previewHtml":260,"previewDarkHtml":261,"readme":262},"raycast","Raycast","# Design System Inspiration of Raycast\n\n## 1. Visual Theme & Atmosphere\n\nRaycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.\n\nThe signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (`#FF6363`) — deployed almost exclusively in the hero's iconic diagonal stripe pattern — the palette creates a brand that reads as \"powerful tool with personality.\" The red doesn't dominate; it punctuates.\n\nInter is used everywhere — headings, body, buttons, captions — with extensive OpenType features (`calt`, `kern`, `liga`, `ss03`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px–0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.\n\n**Key Characteristics:**\n- Near-black blue-tinted background (`#07080a`) — not pure black, subtly blue-shifted\n- macOS-native shadow system with multi-layer inset highlights simulating physical depth\n- Raycast Red (`#FF6363`) as a punctuation color — hero stripes, not pervasive\n- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience\n- Radix UI component primitives powering the interaction layer\n- Subtle rgba white borders (0.06–0.1 opacity) for containment on dark surfaces\n- Keyboard shortcut styling with gradient key caps and heavy shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near-Black Blue** (`#07080a`): Primary page background — the foundational void with a subtle blue-cold undertone\n- **Pure White** (`#ffffff`): Primary heading text, high-emphasis elements\n- **Raycast Red** (`#FF6363` \u002F `hsl(0, 100%, 69%)`): Brand accent — hero stripes, danger states, critical highlights\n\n### Secondary & Accent\n- **Raycast Blue** (`hsl(202, 100%, 67%)` \u002F ~`#55b3ff`): Interactive accent — links, focus states, selected items\n- **Raycast Green** (`hsl(151, 59%, 59%)` \u002F ~`#5fc992`): Success states, positive indicators\n- **Raycast Yellow** (`hsl(43, 100%, 60%)` \u002F ~`#ffbc33`): Warning accents, highlights\n- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`): Blue tint overlay for interactive surfaces\n- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`): Red tint overlay for danger\u002Ferror surfaces\n\n### Surface & Background\n- **Deep Background** (`#07080a`): Page canvas, the darkest surface\n- **Surface 100** (`#101111`): Elevated surface, card backgrounds\n- **Key Start** (`#121212`): Keyboard key gradient start\n- **Key End** (`#0d0d0d`): Keyboard key gradient end\n- **Card Surface** (`#1b1c1e`): Badge backgrounds, tag fills, elevated containers\n- **Button Foreground** (`#18191a`): Dark surface for button text on light backgrounds\n\n### Neutrals & Text\n- **Near White** (`#f9f9f9` \u002F `hsl(240, 11%, 96%)`): Primary body text, high-emphasis content\n- **Light Gray** (`#cecece` \u002F `#cdcdce`): Secondary body text, descriptions\n- **Silver** (`#c0c0c0`): Tertiary text, subdued labels\n- **Medium Gray** (`#9c9c9d`): Link default color, secondary navigation\n- **Dim Gray** (`#6a6b6c`): Disabled text, low-emphasis labels\n- **Dark Gray** (`#434345`): Muted borders, inactive navigation links\n- **Border** (`hsl(195, 5%, 15%)` \u002F ~`#252829`): Standard border color for cards and dividers\n- **Dark Border** (`#2f3031`): Separator lines, table borders\n\n### Semantic & Accent\n- **Error Red** (`hsl(0, 100%, 69%)`): Error states, destructive actions\n- **Success Green** (`hsl(151, 59%, 59%)`): Success confirmations, positive states\n- **Warning Yellow** (`hsl(43, 100%, 60%)`): Warnings, attention-needed states\n- **Info Blue** (`hsl(202, 100%, 67%)`): Informational highlights, links\n\n### Gradient System\n- **Keyboard Key Gradient**: Linear gradient from `#121212` (top) to `#0d0d0d` (bottom) — simulates physical key depth\n- **Warm Glow**: `rgba(215, 201, 175, 0.05)` radial spread — subtle warm ambient glow behind featured elements\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter` — humanist sans-serif, used everywhere. Fallbacks: `Inter Fallback`, system sans-serif\n- **System**: `SF Pro Text` — Apple system font for select macOS-native UI elements. Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`\n- **Monospace**: `GeistMono` — Vercel's monospace font for code elements. Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`\n- **OpenType features**: `calt`, `kern`, `liga`, `ss03` enabled globally; `ss02`, `ss08` on display text; `liga` disabled (`\"liga\" 0`) on hero headings\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |\n| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |\n| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |\n| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |\n| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |\n| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |\n| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |\n| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |\n| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |\n| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |\n| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |\n| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |\n| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |\n\n### Principles\n- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px — creating an airy, readable feel that compensates for the dark background\n- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) — subtle extra heft improves legibility on dark surfaces\n- **Display restraint**: Hero text at 64px\u002F600 is confident but not oversized — Raycast avoids typographic spectacle in favor of functional elegance\n- **OpenType everywhere**: `ss03` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`). Hover: opacity 0.6\n- **Secondary Button**: Transparent background, white text, 6px radius, `1px solid rgba(255, 255, 255, 0.1)` border, subtle drop shadow (`rgba(0, 0, 0, 0.03) 0px 7px 3px`). Hover: opacity 0.6\n- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white\n- **CTA (Download)**: Semi-transparent white background (`hsla(0, 0%, 100%, 0.815)`), dark text (`#18191a`), pill shape. Hover: full white background (`hsl(0, 0%, 100%)`)\n- **Transition**: All buttons use opacity transition for hover rather than background-color change — a signature Raycast interaction pattern\n\n### Cards & Containers\n- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px–16px border-radius\n- **Elevated Card**: Ring shadow `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner — creates a double-ring containment\n- **Feature Card**: 16px–20px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements\n- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement\n\n### Inputs & Forms\n- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius\n- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears\n- Text: `#f9f9f9` input color, `#6a6b6c` placeholder\n- Labels: `#9c9c9d` at 14px weight 500\n\n### Navigation\n- **Top nav**: Dark background blending with page, white text links at 16px weight 500\n- **Nav links**: Gray text (`#9c9c9d`) → white on hover, underline decoration on hover\n- **CTA button**: Semi-transparent white pill at nav end\n- **Mobile**: Collapses to hamburger, maintains dark theme\n- **Sticky**: Nav fixed at top with subtle border separator\n\n### Image Treatment\n- **Product screenshots**: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows\n- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background\n- **Hero illustration**: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining\n- **App UI embeds**: Showing actual Raycast command palette and extensions — product as content\n\n### Keyboard Shortcut Keys\n- **Key cap styling**: Gradient background (`#121212` → `#0d0d0d`), heavy multi-layer shadow (`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows), creating realistic physical key appearance\n- Border-radius: 4px–6px for individual keys\n\n### Badges & Tags\n- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding\n- Compact, pill-like treatment for categorization\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px\n- **Section padding**: 80px–120px vertical between major sections\n- **Card padding**: 16px–32px internal spacing\n- **Component gaps**: 8px–16px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container (breakpoint at 1204px), centered\n- **Column patterns**: Single-column hero, 2–3 column feature grids, full-width showcase sections\n- **App showcase**: Product UI presented in centered window frames\n\n### Whitespace Philosophy\n- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features\n- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing\n- **Vertical rhythm**: Consistent 24px–32px gaps between elements within sections\n\n### Border Radius Scale\n- **2px–3px**: Micro-elements, code spans, tiny indicators\n- **4px–5px**: Keyboard keys, small interactive elements\n- **6px**: Buttons, badges, tags — the workhorse radius\n- **8px**: Input fields, inline components\n- **9px–11px**: Images, medium containers\n- **12px**: Standard cards, product screenshots\n- **16px**: Large cards, feature sections\n- **20px**: Hero cards, prominent containers\n- **86px+**: Pill buttons, nav CTAs — full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Void) | No shadow, `#07080a` surface | Page background |\n| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | Minimal lift, inline elements |\n| Level 2 (Ring) | `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner | Card containment, double-ring technique |\n| Level 3 (Button) | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` + `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` + `rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | macOS-native button press — white highlight top, dark inset bottom |\n| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps — physical 3D appearance |\n| Level 5 (Floating) | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` + `rgba(255, 255, 255, 0.19) 0px 0px 14px` + insets | Command palette, floating panels — heavy depth with glow |\n\n### Shadow Philosophy\nRaycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:\n- **Outer rings** for containment (replacing traditional borders)\n- **Inset top highlights** (`rgba(255, 255, 255, 0.05–0.25)`) simulating light source from above\n- **Inset bottom darks** (`rgba(0, 0, 0, 0.2)`) simulating shadow underneath\n- The effect is physical: elements feel like glass or brushed metal, not flat rectangles\n\n### Decorative Depth\n- **Warm glow**: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` behind featured elements — a subtle warm aura on the cold dark canvas\n- **Blue info glow**: `rgba(0, 153, 255, 0.15)` for interactive state emphasis\n- **Red danger glow**: `rgba(255, 99, 99, 0.15)` for error\u002Fdestructive state emphasis\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#07080a` (not pure black) as the background — the blue-cold tint is essential to the Raycast feel\n- Apply positive letter-spacing (+0.2px) on body text — this is deliberately different from most dark UIs\n- Use multi-layer shadows with inset highlights for interactive elements — the macOS-native depth is signature\n- Keep Raycast Red (`#FF6363`) as punctuation, not pervasive — reserve it for hero moments and error states\n- Use `rgba(255, 255, 255, 0.06)` borders for card containment — barely visible, structurally essential\n- Apply weight 500 as the body text baseline — medium weight improves dark-mode legibility\n- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px–8px) for secondary actions\n- Enable OpenType features `calt`, `kern`, `liga`, `ss03` on all Inter text\n- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes\n\n### Don't\n- Use pure black (`#000000`) as the background — the blue tint differentiates Raycast from generic dark themes\n- Apply negative letter-spacing on body text — Raycast deliberately uses positive spacing for readability\n- Use Raycast Blue as the primary accent for everything — blue is for interactive\u002Finfo, red is the brand color\n- Create single-layer flat shadows — the multi-layer inset system is core to the macOS-native aesthetic\n- Use regular weight (400) for body text when 500 is available — the extra weight prevents dark-mode text from feeling thin\n- Mix warm and cool borders — stick to the cool gray (`hsl(195, 5%, 15%)`) border palette\n- Apply heavy drop shadows without inset companions — shadows always come in pairs (outer + inset)\n- Use decorative elements, gradients, or colorful backgrounds — the dark void is the stage, content is the performer\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |\n| Small Tablet | 600px–768px | 2-column grid begins, nav partially visible |\n| Tablet | 768px–1024px | 2–3 column features, nav expanding, screenshots scale |\n| Desktop | 1024px–1200px | Full layout, all nav links visible, 64px hero display |\n| Large Desktop | >1200px | Max-width container centered, generous side margins |\n\n### Touch Targets\n- Pill buttons: 86px radius with 20px padding — well above 44px minimum\n- Secondary buttons: 8px padding minimum, but border provides visual target expansion\n- Nav links: 16px text with surrounding padding for accessible touch targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger at mobile with slide-out menu\n- **Hero**: 64px display → 48px → 36px across breakpoints\n- **Feature grids**: 3-column → 2-column → single-column stack\n- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions\n- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant\n\n### Image Behavior\n- Product screenshots scale responsively within fixed-ratio containers\n- Hero diagonal stripe pattern scales proportionally\n- macOS window chrome rounded corners maintained at all sizes\n- No lazy-loading artifacts — images are critical to the product narrative\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Near-Black Blue (`#07080a`)\n- Primary Text: Near White (`#f9f9f9`)\n- Brand Accent: Raycast Red (`#FF6363`)\n- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` \u002F ~`#55b3ff`)\n- Secondary Text: Medium Gray (`#9c9c9d`)\n- Card Surface: Surface 100 (`#101111`)\n- Border: Dark Border (`hsl(195, 5%, 15%)` \u002F ~`#252829`)\n\n### Example Component Prompts\n- \"Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)\"\n- \"Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text\"\n- \"Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end\"\n- \"Create a keyboard shortcut display with key caps using gradient background (#121212→#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text\"\n- \"Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Check the background is `#07080a` not pure black — the blue tint is critical\n2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic\n3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong\n4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled\n5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Raycast\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #07080a;\n    --bg-100: #101111;\n    --bg-card: #1b1c1e;\n    --white: #ffffff;\n    --fg: #f9f9f9;\n    --light-gray: #cecece;\n    --silver: #c0c0c0;\n    --med-gray: #9c9c9d;\n    --dim-gray: #6a6b6c;\n    --dark-gray: #434345;\n    --border: #252829;\n    --dark-border: #2f3031;\n    --button-fg: #18191a;\n    --red: #ff6363;\n    --blue: #55b3ff;\n    --green: #5fc992;\n    --yellow: #ffbc33;\n    --red-t: rgba(255, 99, 99, 0.15);\n    --blue-t: rgba(85, 179, 255, 0.15);\n    --border-subtle: rgba(255, 255, 255, 0.06);\n    --border-med: rgba(255, 255, 255, 0.1);\n    --button-bg: hsla(0, 0%, 100%, 0.815);\n    --shadow-ring: rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;\n    --shadow-button: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;\n    --shadow-float: rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset;\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font);\n    background: var(--bg);\n    color: var(--fg);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss03\";\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(7, 8, 10, 0.88);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: 0.2px; }\n  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }\n  .nav-links a {\n    color: var(--med-gray); text-decoration: none; font-size: 14px; font-weight: 500;\n    letter-spacing: 0.2px; transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--white); }\n  .nav-cta {\n    background: var(--button-bg); color: var(--button-fg) !important;\n    padding: 8px 20px; border-radius: 86px; font-weight: 600; font-size: 14px;\n    transition: background 0.2s; letter-spacing: 0.2px;\n  }\n  .nav-cta:hover { background: var(--white); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    padding: 120px 32px 100px; text-align: center;\n    max-width: 1200px; margin: 0 auto;\n    position: relative; overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute; top: -40px; right: -60px;\n    width: 400px; height: 400px;\n    background: repeating-linear-gradient(\n      -45deg,\n      var(--red) 0px, var(--red) 18px,\n      transparent 18px, transparent 36px\n    );\n    opacity: 0.15; filter: blur(1px);\n    border-radius: 20px;\n    transform: rotate(12deg);\n  }\n  .hero h1 {\n    font-size: 72px; font-weight: 600; letter-spacing: 0px; line-height: 1.1;\n    color: var(--white); margin-bottom: 20px; position: relative;\n    font-feature-settings: \"liga\" 0, \"ss02\", \"ss08\";\n  }\n  .hero .subtitle {\n    font-size: 18px; color: var(--med-gray); letter-spacing: 0.2px;\n    line-height: 1.5; max-width: 520px; margin: 0 auto 40px; position: relative;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }\n\n  .btn-primary {\n    display: inline-flex; align-items: center;\n    background: var(--button-bg); color: var(--button-fg);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 600; text-decoration: none;\n    border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s;\n    letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-primary:hover { background: var(--white); }\n  .btn-secondary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--white);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 500; text-decoration: none;\n    border: 1px solid var(--border-med); cursor: pointer;\n    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-secondary:hover { opacity: 0.6; }\n\n  \u002F* SECTIONS *\u002F\n  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }\n  .section-title {\n    font-size: 44px; font-weight: 600; letter-spacing: 0px; line-height: 1.1; margin-bottom: 12px;\n    font-feature-settings: \"liga\" 0, \"ss02\", \"ss08\";\n  }\n  .section-desc { font-size: 16px; color: var(--med-gray); margin-bottom: 48px; letter-spacing: 0.2px; }\n  .section-divider {\n    border: none; border-top: 1px solid var(--border-subtle);\n    max-width: 1136px; margin: 0 auto;\n  }\n\n  \u002F* COLORS *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 12px; font-weight: 600; color: var(--dim-gray);\n    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 16px;\n  }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }\n  .color-swatch {\n    border-radius: 12px; overflow: hidden;\n    background: var(--bg-100); box-shadow: var(--shadow-ring);\n  }\n  .color-swatch-preview { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0.1px; }\n  .color-swatch-hex { font-size: 11px; color: var(--dim-gray); font-family: var(--font-mono); letter-spacing: 0.2px; }\n  .color-swatch-role { font-size: 11px; color: var(--med-gray); margin-top: 3px; line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-size: 11px; color: var(--blue); letter-spacing: 0.4px;\n    text-transform: uppercase; margin-bottom: 8px; font-weight: 600;\n  }\n  .type-spec { font-size: 12px; color: var(--dim-gray); margin-top: 8px; letter-spacing: 0.2px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .btn-ghost {\n    background: transparent; color: var(--dim-gray);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 500; border: none; cursor: pointer;\n    box-shadow: var(--shadow-button); transition: opacity 0.2s;\n    letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-ghost:hover { opacity: 0.6; }\n  .btn-rect {\n    background: transparent; color: var(--white);\n    padding: 10px 20px; border-radius: 6px;\n    font-size: 14px; font-weight: 500;\n    border: 1px solid var(--border-med); cursor: pointer;\n    box-shadow: rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;\n    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-rect:hover { opacity: 0.6; }\n  .btn-label { display: block; font-size: 11px; color: var(--dim-gray); margin-top: 8px; text-align: center; letter-spacing: 0.2px; }\n  .btn-item { text-align: center; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }\n  .card {\n    background: var(--bg-100); border-radius: 16px; padding: 28px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ring); transition: border-color 0.3s;\n  }\n  .card:hover { border-color: rgba(255, 255, 255, 0.12); }\n  .card-float { box-shadow: var(--shadow-float); border: none; }\n  .card-title { font-size: 20px; font-weight: 600; letter-spacing: 0px; margin-bottom: 8px; line-height: 1.2; }\n  .card-text { font-size: 14px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }\n  .card-tag {\n    display: inline-block; padding: 2px 8px;\n    background: var(--bg-card); border-radius: 6px;\n    font-size: 12px; font-weight: 600; color: var(--light-gray);\n    margin-bottom: 12px; letter-spacing: 0.1px;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 14px; font-weight: 500; color: var(--med-gray); letter-spacing: 0.2px; }\n  .form-input {\n    background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 8px; padding: 12px 14px; color: var(--fg);\n    font-size: 14px; font-family: var(--font); outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s; letter-spacing: 0.2px;\n  }\n  .form-input::placeholder { color: var(--dim-gray); }\n  .form-input:focus {\n    border-color: var(--blue);\n    box-shadow: 0 0 0 3px var(--blue-t);\n  }\n  .form-input-error {\n    border-color: var(--red);\n    box-shadow: 0 0 0 3px var(--red-t);\n  }\n  .form-error-text { font-size: 12px; color: var(--red); letter-spacing: 0.2px; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }\n  .spacing-box { height: 28px; background: var(--blue); border-radius: 4px; opacity: 0.5; }\n  .spacing-label { font-size: 12px; color: var(--dim-gray); min-width: 50px; text-align: right; letter-spacing: 0.2px; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 64px; height: 64px;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid var(--border-subtle); margin-bottom: 8px;\n  }\n  .radius-value { font-size: 11px; color: var(--dim-gray); letter-spacing: 0.2px; }\n  .radius-context { font-size: 10px; color: var(--dark-gray); margin-top: 2px; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }\n  .elevation-card {\n    padding: 24px; border-radius: 12px; background: var(--bg-100); min-height: 110px;\n  }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.1px; }\n  .elevation-desc { font-size: 12px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    text-align: center; padding: 48px 32px;\n    border-top: 1px solid var(--border-subtle); margin-top: 40px;\n  }\n  .footer p { font-size: 13px; color: var(--dim-gray); letter-spacing: 0.2px; }\n  .footer a { color: var(--blue); text-decoration: none; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 44px; }\n    .hero .subtitle { font-size: 16px; }\n    .section-title { font-size: 32px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n    .hero::before { width: 250px; height: 250px; top: -20px; right: -40px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Download\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Raycast\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens, components, and patterns extracted from Raycast's marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Near-black blue-tinted backgrounds, precision grays, and bold semantic accents.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #07080a; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near-Black Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#07080a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #f9f9f9;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f9f9f9\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ff6363;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff6363\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Brand accent, hero stripes\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #55b3ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#55b3ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Links, interactive accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #5fc992;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#5fc992\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Success states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ffbc33;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffbc33\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warning, highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #101111; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Surface 100\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#101111\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #1b1c1e; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Card Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1b1c1e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Badge fills, elevated containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: hsla(0,0%,100%,0.815);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Button White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(0,0%,100%,0.815)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary CTA background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #cecece;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#cecece\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #9c9c9d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Medium Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#9c9c9d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Links, nav, descriptions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #6a6b6c;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dim Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#6a6b6c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Disabled, low-emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #434345;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#434345\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Muted borders, inactive\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #252829; border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#252829\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Inter with positive letter-spacing for airy dark-mode readability. GeistMono for code.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 64px \u002F 600 \u002F 1.10 \u002F 0px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 64px; font-weight: 600; line-height: 1.1; font-feature-settings: 'liga' 0, 'ss02', 'ss08';\">Your shortcut to everything\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: liga 0, ss02, ss08\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 56px \u002F 400 \u002F 1.17 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 48px; font-weight: 400; line-height: 1.17; letter-spacing: 0.2px;\">Supercharged productivity\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: calt, kern, liga, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Heading — 24px \u002F 500 \u002F normal \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 24px; font-weight: 500; letter-spacing: 0.2px;\">Built for speed, designed for flow\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: calt, kern, liga, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Card Heading — 22px \u002F 400 \u002F 1.15\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 22px; font-weight: 400; line-height: 1.15;\">Extensions that transform your workflow\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: calt, kern, liga, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 500 \u002F 1.60 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.2px; color: var(--med-gray);\">Raycast lets you control your tools with a few keystrokes. It's designed to keep you in the flow state — search, navigate, and execute without touching the mouse.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — weight 500 baseline for dark-mode legibility\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Button — 16px \u002F 600 \u002F 1.15 \u002F +0.3px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: 0.3px;\">Download for Free\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — semibold with wider tracking for CTAs\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 500 \u002F 1.14 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.2px; color: var(--med-gray);\">Available on macOS 12.0 and later\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — small labels, metadata\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Small — 12px \u002F 600 \u002F 1.33\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 12px; font-weight: 600; line-height: 1.33; color: var(--light-gray);\">NEW EXTENSION\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — badges, micro-labels\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Code — 14px \u002F 500 \u002F 1.60 \u002F +0.3px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.3px; color: var(--blue);\">brew install --cask raycast\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GeistMono — code blocks, terminal output\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill CTAs with translucent white, ghost variants with macOS-native inset shadows, rectangular for secondary.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Download Raycast\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Primary \u002F White Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Secondary \u002F Outline Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">Explore Store\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost \u002F Inset Shadow\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-rect\">View Extension\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Rectangular \u002F 6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\" style=\"padding: 8px 20px; font-size: 14px;\">Sign Up\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Small \u002F Nav CTA\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark surface cards with double-ring shadows and subtle white border containment.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Extensions\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Store Ecosystem\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Browse thousands of extensions built by the community. Install with one click and customize to fit your workflow.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-float\">\n      \u003Cdiv class=\"card-tag\">AI\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Raycast AI\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Chat with AI, generate text, translate, summarize — all from your command bar without switching context.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Productivity\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Clipboard History\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Never lose copied text again. Search your entire clipboard history and paste anything from the past.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark inputs with blue focus rings and red error glows — matching the semantic accent system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@raycast.com\" style=\"border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">API Key (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key-123\">\n      \u003Cspan class=\"form-error-text\">Invalid API key format\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your extension...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit with precise sub-values for fine-tuned layout control.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 8px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 40px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 64px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 88px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 120px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 152px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 200px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 260px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From micro 2px spans to full 86px+ pill buttons — radius signals interaction importance.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">2px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Keys\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">6px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons\u002FTags\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">16px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Large cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Hero cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 86px; width: 64px; height: 40px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">86px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Pill CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">macOS-native shadow system — multi-layer inset highlights simulating physical glass and metal depth.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Void\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow, flat on the dark canvas. The baseline everything rises from.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px;\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Subtle\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Minimal lift. Fine drop shadow for inline elements.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-ring);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Ring\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Double-ring containment — outer + inset. The standard card treatment.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-button);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Button\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">macOS-native press — white top highlight, dark bottom inset, outer ring.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-float);\">\n      \u003Cdiv class=\"elevation-label\">Level 4 — Floating\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Command palette depth — heavy ring + white glow + double inset. Maximum presence.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fraycast.com\">raycast.com\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Raycast — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #040506;\n    --bg-100: #0c0d0e;\n    --bg-card: #151617;\n    --white: #ffffff;\n    --fg: #f4f4f6;\n    --light-gray: #c8c8ca;\n    --silver: #b0b0b2;\n    --med-gray: #8e8e90;\n    --dim-gray: #5e5f61;\n    --dark-gray: #3a3b3d;\n    --border: #1e1f21;\n    --dark-border: #262728;\n    --button-fg: #121314;\n    --red: #ff6363;\n    --blue: #55b3ff;\n    --green: #5fc992;\n    --yellow: #ffbc33;\n    --red-t: rgba(255, 99, 99, 0.15);\n    --blue-t: rgba(85, 179, 255, 0.15);\n    --border-subtle: rgba(255, 255, 255, 0.04);\n    --border-med: rgba(255, 255, 255, 0.08);\n    --button-bg: hsla(0, 0%, 100%, 0.815);\n    --shadow-ring: rgb(22, 23, 25) 0px 0px 0px 1px, rgb(4, 5, 6) 0px 0px 0px 1px inset;\n    --shadow-button: rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px -1px 0px 0px inset;\n    --shadow-float: rgba(0, 0, 0, 0.6) 0px 0px 0px 2px, rgba(255, 255, 255, 0.14) 0px 0px 14px 0px, rgba(0, 0, 0, 0.25) 0px -1px 0.4px 0px inset, rgba(255, 255, 255, 0.8) 0px 1px 0.4px 0px inset;\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font);\n    background: var(--bg);\n    color: var(--fg);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n    font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss03\";\n  }\n\n  .dark-badge {\n    position: fixed; top: 14px; right: 14px; z-index: 200;\n    background: var(--white); color: var(--bg);\n    padding: 5px 12px; border-radius: 86px;\n    font-size: 11px; font-weight: 600; letter-spacing: 0.2px;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(4, 5, 6, 0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: 0.2px; }\n  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }\n  .nav-links a {\n    color: var(--med-gray); text-decoration: none; font-size: 14px; font-weight: 500;\n    letter-spacing: 0.2px; transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--white); }\n  .nav-cta {\n    background: var(--button-bg); color: var(--button-fg) !important;\n    padding: 8px 20px; border-radius: 86px; font-weight: 600; font-size: 14px;\n    transition: background 0.2s; letter-spacing: 0.2px;\n  }\n  .nav-cta:hover { background: var(--white); }\n\n  .hero {\n    padding: 120px 32px 100px; text-align: center;\n    max-width: 1200px; margin: 0 auto;\n    position: relative; overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute; top: -40px; right: -60px;\n    width: 400px; height: 400px;\n    background: repeating-linear-gradient(-45deg, var(--red) 0px, var(--red) 18px, transparent 18px, transparent 36px);\n    opacity: 0.1; filter: blur(1px);\n    border-radius: 20px; transform: rotate(12deg);\n  }\n  .hero h1 {\n    font-size: 72px; font-weight: 600; letter-spacing: 0px; line-height: 1.1;\n    color: var(--white); margin-bottom: 20px; position: relative;\n    font-feature-settings: 'liga' 0, 'ss02', 'ss08';\n  }\n  .hero .subtitle {\n    font-size: 18px; color: var(--med-gray); letter-spacing: 0.2px;\n    line-height: 1.5; max-width: 520px; margin: 0 auto 40px; position: relative;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }\n\n  .btn-primary {\n    display: inline-flex; align-items: center;\n    background: var(--button-bg); color: var(--button-fg);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 600; text-decoration: none;\n    border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s;\n    letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-primary:hover { background: var(--white); }\n  .btn-secondary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--white);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 500; text-decoration: none;\n    border: 1px solid var(--border-med); cursor: pointer;\n    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-secondary:hover { opacity: 0.6; }\n\n  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }\n  .section-title {\n    font-size: 44px; font-weight: 600; letter-spacing: 0px; line-height: 1.1; margin-bottom: 12px;\n    font-feature-settings: 'liga' 0, 'ss02', 'ss08';\n  }\n  .section-desc { font-size: 16px; color: var(--med-gray); margin-bottom: 48px; letter-spacing: 0.2px; }\n  .section-divider {\n    border: none; border-top: 1px solid var(--border-subtle);\n    max-width: 1136px; margin: 0 auto;\n  }\n\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 12px; font-weight: 600; color: var(--dim-gray);\n    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 16px;\n  }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }\n  .color-swatch {\n    border-radius: 12px; overflow: hidden;\n    background: var(--bg-100); box-shadow: var(--shadow-ring);\n  }\n  .color-swatch-preview { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0.1px; }\n  .color-swatch-hex { font-size: 11px; color: var(--dim-gray); font-family: var(--font-mono); letter-spacing: 0.2px; }\n  .color-swatch-role { font-size: 11px; color: var(--med-gray); margin-top: 3px; line-height: 1.4; }\n\n  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 11px; color: var(--blue); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }\n  .type-spec { font-size: 12px; color: var(--dim-gray); margin-top: 8px; letter-spacing: 0.2px; }\n\n  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .btn-ghost {\n    background: transparent; color: var(--dim-gray);\n    padding: 12px 28px; border-radius: 86px;\n    font-size: 16px; font-weight: 500; border: none; cursor: pointer;\n    box-shadow: var(--shadow-button); transition: opacity 0.2s;\n    letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-ghost:hover { opacity: 0.6; }\n  .btn-rect {\n    background: transparent; color: var(--white);\n    padding: 10px 20px; border-radius: 6px;\n    font-size: 14px; font-weight: 500;\n    border: 1px solid var(--border-med); cursor: pointer;\n    box-shadow: rgba(0, 0, 0, 0.05) 0px 7px 3px 0px, rgba(0, 0, 0, 0.3) 0px 4px 4px 0px;\n    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);\n  }\n  .btn-rect:hover { opacity: 0.6; }\n  .btn-label { display: block; font-size: 11px; color: var(--dim-gray); margin-top: 8px; text-align: center; letter-spacing: 0.2px; }\n  .btn-item { text-align: center; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }\n  .card {\n    background: var(--bg-100); border-radius: 16px; padding: 28px;\n    border: 1px solid var(--border-subtle);\n    box-shadow: var(--shadow-ring); transition: border-color 0.3s;\n  }\n  .card:hover { border-color: rgba(255, 255, 255, 0.1); }\n  .card-float { box-shadow: var(--shadow-float); border: none; }\n  .card-title { font-size: 20px; font-weight: 600; letter-spacing: 0px; margin-bottom: 8px; line-height: 1.2; }\n  .card-text { font-size: 14px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }\n  .card-tag {\n    display: inline-block; padding: 2px 8px;\n    background: var(--bg-card); border-radius: 6px;\n    font-size: 12px; font-weight: 600; color: var(--light-gray);\n    margin-bottom: 12px; letter-spacing: 0.1px;\n  }\n\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 14px; font-weight: 500; color: var(--med-gray); letter-spacing: 0.2px; }\n  .form-input {\n    background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.06);\n    border-radius: 8px; padding: 12px 14px; color: var(--fg);\n    font-size: 14px; font-family: var(--font); outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s; letter-spacing: 0.2px;\n  }\n  .form-input::placeholder { color: var(--dim-gray); }\n  .form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t); }\n  .form-input-error { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-t); }\n  .form-error-text { font-size: 12px; color: var(--red); letter-spacing: 0.2px; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }\n  .spacing-box { height: 28px; background: var(--blue); border-radius: 4px; opacity: 0.4; }\n  .spacing-label { font-size: 12px; color: var(--dim-gray); min-width: 50px; text-align: right; letter-spacing: 0.2px; }\n\n  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 64px; height: 64px;\n    background: rgba(255, 255, 255, 0.03);\n    border: 1px solid var(--border-subtle); margin-bottom: 8px;\n  }\n  .radius-value { font-size: 11px; color: var(--dim-gray); letter-spacing: 0.2px; }\n  .radius-context { font-size: 10px; color: var(--dark-gray); margin-top: 2px; }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }\n  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-100); min-height: 110px; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.1px; }\n  .elevation-desc { font-size: 12px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }\n\n  .footer {\n    text-align: center; padding: 48px 32px;\n    border-top: 1px solid var(--border-subtle); margin-top: 40px;\n  }\n  .footer p { font-size: 13px; color: var(--dim-gray); letter-spacing: 0.2px; }\n  .footer a { color: var(--blue); text-decoration: none; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 44px; }\n    .hero .subtitle { font-size: 16px; }\n    .section-title { font-size: 32px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n    .hero::before { width: 250px; height: 250px; top: -20px; right: -40px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Download\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Raycast\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens, components, and patterns extracted from Raycast's marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Near-black blue-tinted backgrounds, precision grays, and bold semantic accents.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #07080a; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near-Black Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#07080a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #f9f9f9;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f9f9f9\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ff6363;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ff6363\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Brand accent, hero stripes\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #55b3ff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#55b3ff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Links, interactive accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #5fc992;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#5fc992\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Success states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #ffbc33;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Raycast Yellow\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffbc33\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warning, highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #101111; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Surface 100\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#101111\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #1b1c1e; border-bottom: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Card Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1b1c1e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Badge fills, containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: hsla(0,0%,100%,0.815);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Button White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(0,0%,100%,0.815)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary CTA background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #cecece;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#cecece\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #9c9c9d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Medium Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#9c9c9d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Links, nav, descriptions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #6a6b6c;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dim Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#6a6b6c\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Disabled, low-emphasis\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #434345;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#434345\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Muted borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #252829; border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#252829\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Inter with positive letter-spacing for airy dark-mode readability. GeistMono for code.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 64px \u002F 600 \u002F 1.10 \u002F 0px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 64px; font-weight: 600; line-height: 1.1; font-feature-settings: 'liga' 0, 'ss02', 'ss08';\">Your shortcut to everything\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: liga 0, ss02, ss08\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 56px \u002F 400 \u002F 1.17 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 48px; font-weight: 400; line-height: 1.17; letter-spacing: 0.2px;\">Supercharged productivity\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: calt, kern, liga, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Heading — 24px \u002F 500 \u002F normal \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 24px; font-weight: 500; letter-spacing: 0.2px;\">Built for speed, designed for flow\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — OpenType: calt, kern, liga, ss03\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 500 \u002F 1.60 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.2px; color: var(--med-gray);\">Raycast lets you control your tools with a few keystrokes. It's designed to keep you in the flow state — search, navigate, and execute without touching the mouse.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — weight 500 baseline for dark-mode legibility\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 500 \u002F 1.14 \u002F +0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.2px; color: var(--med-gray);\">Available on macOS 12.0 and later\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Inter — small labels, metadata\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Code — 14px \u002F 500 \u002F 1.60 \u002F +0.3px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.3px; color: var(--blue);\">brew install --cask raycast\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">GeistMono — code blocks, terminal output\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill CTAs with translucent white, ghost variants with macOS-native inset shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Download Raycast\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Primary \u002F White Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Secondary \u002F Outline Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">Explore Store\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost \u002F Inset Shadow\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-rect\">View Extension\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Rectangular \u002F 6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark surface cards with double-ring shadows and subtle border containment.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Extensions\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Store Ecosystem\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Browse thousands of extensions built by the community. Install with one click and customize to fit your workflow.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-float\">\n      \u003Cdiv class=\"card-tag\">AI\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Raycast AI\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Chat with AI, generate text, translate, summarize — all from your command bar without switching context.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Productivity\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Clipboard History\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Never lose copied text again. Search your entire clipboard history and paste anything from the past.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Dark inputs with blue focus rings and red error glows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@raycast.com\" style=\"border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">API Key (Error State)\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key-123\">\n      \u003Cspan class=\"form-error-text\">Invalid API key format\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your extension...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit with precise sub-values for fine-tuned layout.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 8px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 40px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 64px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 88px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 120px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 152px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 200px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 260px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From micro 2px spans to full 86px+ pill buttons.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 2px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Keys\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Hero\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 86px; width: 64px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">86px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">macOS-native shadow system with multi-layer inset highlights.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Void\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow. The baseline void.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0, 0, 0, 0.35) 0px 1.189px 2.377px 0px;\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Subtle\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Minimal lift for inline elements.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-ring);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Ring\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Double-ring containment. Standard card.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-button);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Button\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">macOS press effect. White top, dark inset.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-float);\">\n      \u003Cdiv class=\"elevation-label\">Level 4 — Floating\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Command palette depth. Maximum presence.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fraycast.com\">raycast.com\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Raycast Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fraycast\u002FDESIGN.md) extracted from the public [Raycast](https:\u002F\u002Fraycast.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fraycast\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Raycast design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Raycast Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fraycast\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Raycast Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fraycast\u002Fpreview-screenshot.png)\n",{"slug":264,"name":265,"category":30,"designMd":266,"previewHtml":267,"previewDarkHtml":268,"readme":269},"renault","Renault","# Design System Inspiration of Renault\n\n## 1. Visual Theme & Atmosphere\n\nRenault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy — a departure from the monochromatic austerity of German or Italian luxury brands. The page opens with a full-screen hero that washes the viewport in a sweeping aurora gradient — ribbons of magenta, violet, and teal bleeding across the frame behind a dramatically lit vehicle. This chromatic expressiveness is the site's signature: while the interface structure is disciplined (NouvelR typography, black-and-white CTA framework, zero-radius buttons), the content is alive with color — gradient washes on hero slides, saturated vehicle photography, and splashes of Renault Yellow (`#EFDF00`) on accent CTAs. The effect is a showroom that feels energized rather than hushed.\n\nThe layout follows a card-based editorial rhythm. Below the hero carousel, content is organized into a grid of PromoCards — each a full-bleed photographic panel with a dark gradient overlay at top (fading from `rgba(0,0,0,0.6)` to transparent) to ensure white heading text remains legible over vivid imagery. These cards alternate between light and dark modes: white editorial panels with black text sit beside black `is-alternative-mode` sections with white text, creating a chessboard-like visual cadence. The grid is generous — large card formats dominate, giving each vehicle or campaign its own visual territory. The lower sections shift to a fully dark canvas (Absolute Black backgrounds) for the E-Tech electric and technology showcases, establishing a deliberate mood shift: electrification lives in darkness, tradition in light.\n\nTypography is unified under NouvelR — a proprietary geometric sans-serif designed by Black[Foundry] exclusively for Renault's rebrand. The typeface features a distinctive \"radical r\" with a terminal cut at 28 degrees to echo the Renault diamond logo's angles. Available in 6 weights from Light to Extrabold, the site primarily uses Bold (700) for headings and Regular (400) for body. Display headlines run large — 56px\u002F0.95 line-height for hero titles, creating dense, impactful text blocks that sit tight against each other. The font supports Latin, Greek, Cyrillic, Hebrew, Arabic, and Korean, reflecting Renault's global market reach. All text rendering feels precise and engineered, with the geometric proportions lending a sense of modernity that aligns with Renault's electric-first brand positioning.\n\n**Key Characteristics:**\n- Full-screen hero carousel with vivid aurora gradient backgrounds (magenta\u002Fviolet\u002Fteal) behind vehicle imagery\n- NouvelR proprietary typeface with 28-degree \"radical r\" cut matching the diamond logo geometry\n- Renault Yellow (`#EFDF00`) as the super-primary accent — used sparingly for highest-priority CTAs\n- Zero border-radius on all buttons — sharp rectangular forms expressing precision engineering\n- Card-based editorial grid with full-bleed photography and dark gradient overlays\n- Binary black\u002Fwhite CTA system: primary (black bg\u002Fwhite text) and ghost (transparent\u002Fwhite border)\n- PromoCard dark-mode alternation creating a chessboard rhythm between light and dark sections\n- PrimeReact (21 components) + Element Plus (19 components) powering interactive elements\n- Link hover state in Renault Blue (`#1883FD`) — the sole chromatic interaction color\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Renault Yellow** (`#EFDF00`): The brand's signature Pantone — a vivid, saturated yellow used for super-primary CTAs and the highest-priority action buttons. Appears as `--CtaLink-background-color` on `.is-cta-super-primary` class. Carries the energy of the diamond logo\n- **Absolute Black** (`#000000`): Primary button background, heading text on light surfaces, and the dominant dark section surface. The structural anchor of the entire interface\n- **Pure White** (`#FFFFFF`): Primary surface for editorial content, inverted button backgrounds, hero text color, and the dominant light-mode canvas (--rt-color-white)\n\n### Secondary & Accent\n- **Soft Yellow** (`#F8EB4C`): Lighter, warmer variant of Renault Yellow — used for hover\u002Fpressed states on yellow CTAs and secondary accent contexts\n- **Renault Blue** (`#1883FD`): Link hover color across all link variants — a bright, confident blue that signals interactivity without competing with the yellow brand accent\n- **Warm Gray** (`#D9D9D6`): Subtle warm neutral used for disabled states, inactive UI elements, and soft borders — carries a slight warmth that distinguishes it from cold grays\n\n### Surface & Background\n- **Pure White** (`#FFFFFF`): Page background, light editorial sections, navigation bar, and footer\n- **Absolute Black** (`#000000`): Hero backgrounds, PromoCard dark-mode sections (`is-alternative-mode`), and E-Tech showcase areas\n- **Charcoal** (`#222222`): Secondary dark surface for text-heavy dark sections and footer sub-regions (--rt-color-dark)\n- **Pale Silver** (`#F2F2F2`): Subtle alternate light surface for section differentiation and card borders\n\n### Neutrals & Text\n- **Absolute Black** (`#000000`): Primary heading and body text on light surfaces — Renault uses true black rather than near-black\n- **Pure White** (`#FFFFFF`): Primary text on dark surfaces — hero headlines, dark-section headings, and inverted button labels\n- **Warm Gray** (`#D9D9D6`): Tertiary text, metadata, and subdued labels\n- **Border Gray** (`#D1D1D1`): Input field borders and subtle separators\n\n### Semantic & Accent\n- **Success Green** (`#8DC572`): Positive status indicators and confirmation messages (--rt-color-success)\n- **Error Rose** (`#BE6464`): Form validation errors and warning states (--rt-color-error)\n- **Warning Amber** (`#F0AD4E`): Cautionary alerts and attention-requiring states (--rt-color-warning)\n- **Info Blue** (`#337AB7`): Informational callouts and neutral status messaging (--rt-color-info)\n\n### Gradient System\n- **Hero Aurora**: Sweeping multi-color gradients (magenta → violet → teal) applied to hero slide backgrounds — the site's most distinctive visual element. These are photographic\u002Fcomposited rather than CSS gradients\n- **PromoCard Overlay**: `linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)` — applied to card tops to ensure heading text legibility over photography\n- No flat CSS gradients on surfaces — depth comes from photographic treatment and the black\u002Fwhite alternation\n\n## 3. Typography Rules\n\n### Font Family\n- **NouvelR**: The sole typeface. A proprietary geometric sans-serif designed by Black[Foundry] for Renault's 2021+ rebrand. Features a distinctive \"radical r\" with a 28-degree terminal cut matching the diamond logo angle. Available in 6 weights (Light to Extrabold), supports 6 writing systems. Fallback: `sans-serif`. Declared as `\"NouvelR, sans-serif\"` in CSS\n- **No secondary typeface**: Unlike Ferrari (FerrariSans + Body-Font) or Lamborghini (LamboType + Open Sans), Renault uses a single font family for all text — headings, body, buttons, captions, and navigation\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Title | 56px (3.50rem) | 700 | 0.95 (53.2px) | normal | NouvelR, white on dark hero, all-caps model names |\n| Section Heading | 40px (2.50rem) | 700 | 0.95 (38px) | normal | NouvelR, PromoCard headings on dark\u002Flight sections |\n| Card Heading | 32px (2.00rem) | 700 | 0.95 | normal | NouvelR, medium-scale card headings |\n| Subheading | 24px (1.50rem) | 700 | 0.95 | normal | NouvelR, section sub-titles |\n| Module Title | 21.92px (1.37rem) | 600 | 1.20 | normal | NouvelR, component headings |\n| Content Title | 20px (1.25rem) | 700 | 0.95 | normal | NouvelR, smaller section titles |\n| UI Heading | 19.2px (1.20rem) | 600 | 1.30 | normal | NouvelR, card UI headings |\n| Emphasis | 18px (1.13rem) | 700 | 1.00 | normal | NouvelR, emphasized inline text and links |\n| Body Heading | 16px (1.00rem) | 700 | 1.40 | normal | NouvelR, paragraph-level headings |\n| Body Text | 14px (0.88rem) | 400 | 1.40 | normal | NouvelR, paragraph and descriptive content |\n| Body Bold | 14px (0.88rem) | 700 | 1.57 | normal | NouvelR, emphasized body text |\n| Button Label | 14.4px (0.90rem) | 700 | 1.00 | 0.144px | NouvelR, primary button text |\n| Nav Link | 13px (0.81rem) | 700 | 1.50 | normal | NouvelR, navigation and footer links |\n| Caption | 12.8px (0.80rem) | 400 | 1.10 | normal | NouvelR, small descriptive text |\n| Small Label | 12px (0.75rem) | 700 | 1.00 | normal | NouvelR, labels and tags |\n| Micro Text | 10px (0.63rem) | 700 | 1.45 | normal | NouvelR, smallest UI text, legal fine print |\n| Micro Caption | 8.5px (0.53rem) | 400 | normal | normal | NouvelR, absolute smallest text (legal) |\n\n### Principles\n- **Single-family discipline**: NouvelR handles everything from 56px hero headlines to 8.5px legal captions — the font's geometric precision allows it to scale across this extreme range without losing character\n- **Bold-default headings**: Weight 700 dominates the heading hierarchy. Unlike brands that use medium (500) for headings, Renault's Bold weight creates a more assertive, energetic reading experience\n- **Ultra-tight display line-heights**: 0.95 line-height on hero and section headings — the lines nearly collide, creating a compressed, punchy typographic texture that feels urgent and modern\n- **28-degree radical r**: The typeface's signature detail — the lowercase \"r\" terminal is cut at precisely 28 degrees to mirror the angles of the Renault diamond logo, embedding brand identity into every word\n- **Capitalize transform on captions**: Some caption text uses `text-transform: capitalize` for editorial labeling, while micro text uses `lowercase` — a deliberate inversion for hierarchy signaling\n\n## 4. Component Stylings\n\n### Buttons\nRenault's buttons are sharp-edged rectangles with zero border-radius — the industrial precision of a pressed metal body panel.\n\n**Super Primary (Yellow)** — The highest-emphasis CTA:\n- Default: bg `#EFDF00` (Renault Yellow), text `#000000`, borderRadius 0px, padding 10px 15px, border 1px solid `#EFDF00`\n- Inverted: bg `#EFDF00`, text `#000000` — same yellow on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700, minHeight 46px, minWidth 46px\n- Used for: Primary conversion actions (configure, buy now)\n\n**Primary (Black)** — The default action button:\n- Default: bg `#000000`, text `#FFFFFF`, borderRadius 0px, padding 10px 15px, border 1px solid `#000000`\n- Inverted: bg `#FFFFFF`, text `#000000`, border 1px solid `#FFFFFF` — white fill on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"keşfedin\" (explore), secondary conversion actions\n\n**Ghost** — Transparent outline button:\n- Default (on dark): bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, borderRadius 0px, padding 10px 15px\n- Default (on light): bg transparent, text `#000000`, border 1px solid `#000000`\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"ilk sen öğren\" (be the first to know), \"satın alın\" (buy), secondary actions\n\n**Text Link** — Inline navigation:\n- Default (light): text `#000000`, no border, no background\n- Default (dark): text `#FFFFFF`\n- Hover: color shifts to `#1883FD` (Renault Blue), text-decoration none\n- All link variants hover to the same blue — consistent interactive feedback\n\n### Cards & Containers\n\n**PromoCard (Light)** — Editorial content card:\n- Background: white or transparent\n- Full-bleed photography with dark gradient overlay at top: `linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)`\n- Heading: NouvelR 40px\u002F700, white text positioned over gradient\n- Border-radius: 0px — sharp rectangular containers\n- No shadow, no visible border\n\n**PromoCard (Dark \u002F `is-alternative-mode`)** — Cinematic card:\n- Background: `#000000` (Absolute Black)\n- Same gradient overlay treatment\n- Heading: white NouvelR text\n- CTA buttons: inverted primary (white bg) or ghost (white border)\n\n**VehicleRangeCard** — Vehicle showcase:\n- Background: transparent\n- Vehicle image above, model name and price\u002Fspec below\n- No shadow, no border, clean flat treatment\n- Spacing between cards via grid gap\n\n### Inputs & Forms\n\n**Search\u002FText Input:**\n- Background: `#FFFFFF`\n- Text: `#000000`\n- Border: 1px solid `#D1D1D1` (Border Gray)\n- Border-radius: 50px (pill-shaped — unusual deviation from the zero-radius button system)\n- Padding: 6px 35px 6px 15px (extra right padding for search icon)\n- Font: NouvelR, 12.8px\n- Focus: standard browser focus ring\n\n### Navigation\n- **Desktop**: Renault diamond logo centered\u002Fleft, horizontal nav links, sticky positioning\n- **Background**: white, no shadow at rest\n- **Links**: NouvelR, 13px, weight 700, black text\n- **Hover**: color shifts to `#1883FD` (Renault Blue)\n- **Mobile**: Hamburger collapse to full-screen navigation drawer\n- **CTA in nav**: Primary black button for main conversion action\n\n### Image Treatment\n- **Hero**: Full-viewport carousel with dramatic aurora-gradient backgrounds and art-directed vehicle photography — edge-to-edge, no padding\n- **PromoCards**: Full-bleed photography within card bounds, dark gradient overlay at top for text legibility\n- **Vehicle images**: Transparent-background renders on neutral\u002Fgradient backgrounds\n- **Aspect ratios**: Mixed — hero at roughly 16:9 viewport, promo cards at various ratios from square to wide panoramic\n- **Lazy loading**: Below-fold sections use lazy loading (framework-handled)\n\n### Carousel Component\n- Full-screen hero carousel with auto-advancing slides\n- Each slide: background gradient\u002Fphoto + vehicle image + headline + CTA buttons\n- Dot indicators for slide position\n- Navigation arrows at edges\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px (detected system base)\n- **Scale**: 1px, 4px, 5px, 6px, 6.25px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 32px, 40px\n- **Button padding**: 10px 15px — consistent across all button variants\n- **Section padding**: Generous vertical spacing (40–80px) between major content blocks\n- **Card gaps**: 16–24px between grid items\n- **Minimum interactive size**: 46px (minWidth and minHeight on all buttons)\n\n### Grid & Container\n- **Max width**: 1440px (largest defined breakpoint)\n- **Hero**: Full-bleed, edge-to-edge, viewport-height\n- **PromoCard grid**: 2-up and 3-up layouts with mixed card sizes\n- **Vehicle range**: Horizontal scrollable card row or grid\n- **Footer**: Multi-column layout on white background\n\n### Whitespace Philosophy\nRenault uses whitespace moderately — more generously than Ferrari but less extremely than Tesla. The card-based layout means content is organized into defined containers rather than floating in void. The visual breathing room comes primarily from the large card formats and the full-bleed hero carousel, which gives each vehicle its own cinematic moment. Between sections, spacing is consistent (32–40px) creating a rhythmic scroll experience. The alternation between light and dark sections also creates perceived whitespace — the mode switch itself acts as a visual separator.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | All buttons, PromoCards, most containers — the zero-radius default |\n| 2px | Small UI elements (region controls) |\n| 3px | Content panels (div, tabpanel) |\n| 4px | Labels and tag elements |\n| 46px | Pill-shaped elements (search input, filter chips) |\n| 50px | Full pill for search\u002Finput fields |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow | Default for PromoCards, buttons, most containers |\n| Level 1 (Soft) | `rgba(0,0,0,0.2) 0px 4px 8px` | Card hover states, subtle lift effect |\n| Level 2 (Medium) | `rgba(0,0,0,0.2) 0px 0px 18px` | Floating UI elements, dropdown menus |\n| Level 3 (Layered) | `rgba(0,0,0,0) 0px 2px 4px, rgba(50,50,93,0.1) 0px 7px 14px` | Compound shadow for elevated cards and modals |\n| Level 4 (Deep) | `rgba(0,0,0,0.15) 0px 40px 80px` | Large floating panels, configurator overlays |\n| Level 5 (Directional) | `rgba(0,0,0,0.2) 5px 5px 8px` | Offset directional shadow for specific components |\n| Level 6 (Ambient) | `rgb(199,197,199) 0px 0px 12px 2px` | Ambient glow effect for highlighted elements |\n\n### Shadow Philosophy\nRenault uses a richer shadow system than Ferrari or Tesla — seven distinct shadow tokens reflecting a more layered, dimensional interface. The shadows progress from subtle 4px hover lifts to dramatic 80px deep panels. The compound shadow (Level 3) with its dual-layer approach (a tight dark shadow plus a wider purple-tinted one from `rgba(50,50,93,0.1)`) is particularly refined — it creates a photorealistic floating effect. The ambient glow (Level 6) in warm gray adds a unique touch that connects to Renault's warmer color personality.\n\n### Decorative Depth\n- **Hero aurora gradients**: The primary decorative depth element — vivid color gradients create atmospheric depth behind vehicle imagery\n- **PromoCard overlays**: `linear-gradient(rgba(0,0,0,0.6) → transparent)` creates depth within cards through transparency\n- **No blur effects** on UI elements — depth is communicated through shadow and color contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Renault Yellow (`#EFDF00`) exclusively for super-primary CTAs — it carries the full weight of the diamond logo's identity\n- Maintain zero border-radius on all buttons — sharp edges are non-negotiable in the Renault system\n- Use NouvelR Bold (700) as the default heading weight — the assertive weight is central to the brand's energetic personality\n- Apply the dark gradient overlay (`rgba(0,0,0,0.6) → transparent`) on PromoCards to ensure text legibility over photography\n- Keep hero line-heights ultra-tight (0.95) for display text — the compressed texture feels urgent and modern\n- Alternate between black and white sections to create the signature chessboard rhythm\n- Use `#1883FD` (Renault Blue) consistently for all link hover states — one interactive color signal\n- Set minimum interactive size at 46×46px for all buttons — accessibility built into the component spec\n- Reserve pill-shaped radius (46–50px) exclusively for search inputs and filter elements — never for buttons\n- Use the PromoCard gradient overlay on every card that has text over photography\n\n### Don't\n- Apply Renault Yellow as a background color for sections or surfaces — it's a CTA signal, not an atmosphere color\n- Add border-radius to buttons — the zero-radius rectangle is a core brand marker\n- Use any typeface besides NouvelR — the single-family discipline is a brand pillar\n- Mix multiple chromatic accent colors in a single section — the palette is monochrome-plus-yellow\n- Soften heading weights to 400 or 500 — NouvelR Bold is the brand voice, lighter weights read as off-brand\n- Add decorative borders to PromoCards or content containers — separation comes from background color alternation\n- Use the semantic colors (Success Green, Error Rose) for decorative purposes — they're reserved for form states\n- Apply the 56px hero size to anything below the fold — hero typography scale is reserved for the carousel\n- Create rounded-pill buttons — pill shapes are reserved for inputs, never for action elements\n- Use flat CSS gradients on UI surfaces — the only gradients should be the photographic hero auroras and the text-legibility overlays\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | ≤425px | Single-column, full-width cards, hero text scales to ~32px, stacked CTAs, hamburger nav |\n| Mobile | 426–640px | Single-column, slightly larger cards, hero text at 32–40px |\n| Tablet Small | 641–768px | 2-column PromoCard grid begins, hero maintains full-width |\n| Tablet | 769–896px | Full 2-column layout, vehicle range shows 2–3 cards |\n| Desktop Small | 897–1024px | Navigation fully expanded, hero at 56px, 2-up card grid |\n| Desktop | 1025–1280px | Full layout, 3-up card grid, generous whitespace |\n| Large Desktop | 1281–1440px | Maximum content width, centered container, hero at full cinematic scale |\n\n### Touch Targets\n- All buttons: minimum 46×46px (`minWidth: 46px, minHeight: 46px`) — exceeds WCAG AAA 44×44px requirement\n- Search input pill: adequate touch target with 50px border-radius creating a large tappable area\n- Navigation links: NouvelR 13px with adequate spacing between items\n- Carousel navigation: large arrow targets at viewport edges\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to Renault diamond logo + hamburger menu on mobile\n- **Hero carousel**: Full-width at all breakpoints, headline scales from 56px (desktop) to ~32px (mobile)\n- **PromoCard grid**: 3-up → 2-up → single-column as viewport narrows\n- **Vehicle range**: Horizontal scroll maintained at all sizes, visible cards reduce\n- **CTA pairs**: Side-by-side buttons stack vertically on mobile\n- **Footer**: Multi-column collapses to single-column accordion on mobile\n\n### Image Behavior\n- Hero images: full-bleed at all breakpoints with `object-fit: cover`\n- PromoCard images: responsive within card containers, gradient overlay scales proportionally\n- Vehicle images: transparent-background renders scale proportionally within grid cells\n- Art direction: mobile may crop to tighter vehicle views, reducing environmental context\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA (Super): \"Renault Yellow (#EFDF00)\"\n- Primary CTA (Default): \"Absolute Black (#000000)\"\n- Background Light: \"Pure White (#FFFFFF)\"\n- Background Dark: \"Absolute Black (#000000)\"\n- Secondary Dark: \"Charcoal (#222222)\"\n- Heading text (light bg): \"Absolute Black (#000000)\"\n- Body text: \"Absolute Black (#000000)\"\n- Link Hover: \"Renault Blue (#1883FD)\"\n- Border: \"Pale Silver (#F2F2F2)\"\n- Semantic Error: \"Error Rose (#BE6464)\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport aurora gradient background (magenta to violet to teal), a centered vehicle image, a NouvelR Bold headline at 56px with 0.95 line-height in white, and two buttons: a Primary (white bg, black text, 0px radius) 'Explore' and a Ghost (transparent bg, white border, white text, 0px radius) 'Learn More'\"\n- \"Design a PromoCard with a full-bleed photography background, a dark gradient overlay (rgba(0,0,0,0.6) top to transparent at 40%), a NouvelR Bold 40px white heading, a 14px body text line in white, and a Primary inverted button (white bg, black text, 0px radius, 10px 15px padding)\"\n- \"Build a vehicle range grid with 3 columns on white background, each card showing a transparent-background car render above a NouvelR Bold 24px model name in black, a 14px price caption, and a ghost button (black border, black text, 0px radius) labeled 'Configure'\"\n- \"Create a dark E-Tech section on Absolute Black (#000000) with a NouvelR Bold 40px white heading 'E-Tech electric powertrain', a 14px subtitle in white, and a Renault Yellow (#EFDF00) super-primary button with black text, 0px radius, and 10px 15px padding\"\n- \"Design a search input as a pill-shaped field (50px border-radius) with white background, 1px solid #D1D1D1 border, NouvelR 12.8px text, 6px 35px 6px 15px padding, and a search icon positioned inside the right padding area\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Renault's system has clear component boundaries (PromoCard, VehicleRangeCard, CTA variants)\n2. Reference specific color names and hex codes — the palette is small but each color has a precise function\n3. Use natural language descriptions, not CSS values — \"sharp zero-radius rectangle\" conveys intent better than \"border-radius: 0\"\n4. Describe the desired \"feel\" alongside specific measurements — \"assertive automotive energy\" communicates the NouvelR Bold heading personality better than \"font-weight: 700\"\n5. Always check whether a section should be light or dark — the chessboard alternation is a core pattern\n6. Reserve Renault Yellow for ONE button per screen — if yellow appears in more than one CTA, the hierarchy collapses\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Renault\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --renault-yellow: #EFDF00;\n    --soft-yellow: #F8EB4C;\n    --renault-blue: #1883FD;\n    --absolute-black: #000000;\n    --pure-white: #FFFFFF;\n    --charcoal: #222222;\n    --pale-silver: #F2F2F2;\n    --warm-gray: #D9D9D6;\n    --border-gray: #D1D1D1;\n    --success-green: #8DC572;\n    --error-rose: #BE6464;\n    --warning-amber: #F0AD4E;\n    --info-blue: #337AB7;\n    --font-main: 'Nunito Sans', sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-main);\n    background: var(--pure-white);\n    color: var(--absolute-black);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.40;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 40px;\n    background: var(--pure-white);\n    min-height: 56px;\n    border-bottom: 1px solid var(--pale-silver);\n  }\n  .nav-brand {\n    font-family: var(--font-main);\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--absolute-black);\n    text-decoration: none;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-family: var(--font-main);\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--absolute-black);\n    text-decoration: none;\n    padding: 8px 14px;\n    transition: color 0.3s;\n  }\n  .nav-links a:hover { color: var(--renault-blue); }\n  .nav-cta {\n    background: var(--absolute-black);\n    color: var(--pure-white) !important;\n    padding: 10px 15px;\n    border-radius: 0;\n    font-family: var(--font-main);\n    font-size: 14.4px;\n    font-weight: 700;\n    text-decoration: none;\n    transition: background-color 0.3s;\n    display: inline-flex;\n    align-items: center;\n    min-height: 46px;\n    border: 1px solid var(--absolute-black);\n    cursor: pointer;\n  }\n  .nav-cta:hover { background: var(--charcoal); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    min-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 100px 40px 80px;\n    background: linear-gradient(135deg, #8B1A6E 0%, #5B2D8E 25%, #2E4A9E 50%, #1A7A8E 75%, #1A9E7A 100%);\n    text-align: center;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -20%;\n    right: -10%;\n    width: 60%;\n    height: 140%;\n    background: radial-gradient(ellipse, rgba(239,223,0,0.12) 0%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-main);\n    font-size: 56px;\n    font-weight: 700;\n    line-height: 0.95;\n    letter-spacing: normal;\n    color: var(--pure-white);\n    margin-bottom: 20px;\n    position: relative;\n    text-transform: uppercase;\n  }\n  .hero .subtitle {\n    font-family: var(--font-main);\n    font-size: 16px;\n    font-weight: 400;\n    color: rgba(255,255,255,0.85);\n    margin-bottom: 40px;\n    line-height: 1.40;\n    position: relative;\n    max-width: 600px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    position: relative;\n  }\n  .btn-super-primary {\n    background: var(--renault-yellow);\n    color: var(--absolute-black);\n    border: 1px solid var(--renault-yellow);\n    border-radius: 0;\n    padding: 10px 28px;\n    font-family: var(--font-main);\n    font-size: 16px;\n    font-weight: 700;\n    min-height: 46px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-super-primary:hover { background: var(--soft-yellow); }\n  .btn-ghost-white {\n    background: transparent;\n    color: var(--pure-white);\n    border: 1px solid var(--pure-white);\n    border-radius: 0;\n    padding: 10px 28px;\n    font-family: var(--font-main);\n    font-size: 16px;\n    font-weight: 700;\n    min-height: 46px;\n    cursor: pointer;\n    transition: background-color 0.3s, color 0.3s;\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btn-ghost-white:hover { background: rgba(255,255,255,0.15); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-family: var(--font-main);\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--absolute-black);\n    margin-bottom: 8px;\n    line-height: 0.95;\n  }\n  .section-desc {\n    font-family: var(--font-main);\n    font-size: 14px;\n    color: var(--charcoal);\n    margin-bottom: 40px;\n    line-height: 1.40;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--pale-silver);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group-label {\n    font-family: var(--font-main);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--absolute-black);\n    margin-bottom: 16px;\n    margin-top: 32px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch { border-radius: 0; overflow: hidden; }\n  .color-swatch .swatch-block { height: 80px; }\n  .color-swatch .swatch-info {\n    padding: 12px;\n    background: var(--pure-white);\n    border: 1px solid var(--pale-silver);\n    border-top: none;\n  }\n  .color-swatch .swatch-name { font-size: 13px; font-weight: 700; color: var(--absolute-black); margin-bottom: 2px; }\n  .color-swatch .swatch-hex { font-size: 12px; color: var(--charcoal); margin-bottom: 4px; font-family: monospace; }\n  .color-swatch .swatch-role { font-size: 11px; color: var(--warm-gray); line-height: 1.3; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--pale-silver); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 12px; font-weight: 400; color: var(--warm-gray); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin-bottom: 24px; }\n  .button-item { display: flex; flex-direction: column; gap: 8px; }\n  .button-item .btn-label { font-size: 11px; font-weight: 700; color: var(--warm-gray); text-transform: uppercase; }\n  .btn-primary-black {\n    background: var(--absolute-black); color: var(--pure-white); border: 1px solid var(--absolute-black);\n    border-radius: 0; padding: 10px 15px; font-family: var(--font-main); font-size: 14.4px;\n    font-weight: 700; min-height: 46px; min-width: 120px; text-align: center; cursor: pointer;\n    transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-primary-black:hover { background: var(--charcoal); }\n  .btn-yellow {\n    background: var(--renault-yellow); color: var(--absolute-black); border: 1px solid var(--renault-yellow);\n    border-radius: 0; padding: 10px 15px; font-family: var(--font-main); font-size: 14.4px;\n    font-weight: 700; min-height: 46px; min-width: 120px; text-align: center; cursor: pointer;\n    transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-yellow:hover { background: var(--soft-yellow); }\n  .btn-ghost-black {\n    background: transparent; color: var(--absolute-black); border: 1px solid var(--absolute-black);\n    border-radius: 0; padding: 10px 15px; font-family: var(--font-main); font-size: 14.4px;\n    font-weight: 700; min-height: 46px; min-width: 120px; text-align: center; cursor: pointer;\n    transition: background-color 0.3s, color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-ghost-black:hover { background: var(--absolute-black); color: var(--pure-white); }\n  .btn-ghost-white-2 {\n    background: transparent; color: var(--pure-white); border: 1px solid var(--pure-white);\n    border-radius: 0; padding: 10px 15px; font-family: var(--font-main); font-size: 14.4px;\n    font-weight: 700; min-height: 46px; min-width: 120px; text-align: center; cursor: pointer;\n    transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-ghost-white-2:hover { background: rgba(255,255,255,0.15); }\n  .btn-text-link {\n    background: none; border: none; color: var(--absolute-black); font-family: var(--font-main);\n    font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: color 0.3s; padding: 0;\n  }\n  .btn-text-link:hover { color: var(--renault-blue); }\n  .dark-btn-row {\n    background: var(--absolute-black); padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;\n  }\n  .dark-btn-row .btn-label { color: var(--warm-gray); }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; }\n  .card {\n    position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column;\n    justify-content: flex-end; padding: 24px; background-size: cover; background-position: center;\n  }\n  .card::before {\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;\n    background: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); pointer-events: none;\n  }\n  .card-heading { font-family: var(--font-main); font-size: 40px; font-weight: 700; color: var(--pure-white); line-height: 0.95; margin-bottom: 8px; position: relative; }\n  .card-text { font-family: var(--font-main); font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.40; position: relative; margin-bottom: 16px; }\n  .card-btn {\n    position: relative; display: inline-flex; align-items: center; background: var(--pure-white);\n    color: var(--absolute-black); border: 1px solid var(--pure-white); border-radius: 0;\n    padding: 10px 15px; font-family: var(--font-main); font-size: 14.4px; font-weight: 700;\n    min-height: 46px; cursor: pointer; text-decoration: none; width: fit-content;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 700px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full { grid-column: 1 \u002F -1; }\n  .form-label { font-size: 12px; font-weight: 700; color: var(--absolute-black); text-transform: uppercase; }\n  .form-input {\n    font-family: var(--font-main); font-size: 12.8px; color: var(--absolute-black);\n    background: var(--pure-white); border: 1px solid var(--border-gray); border-radius: 50px;\n    padding: 10px 15px; outline: none; transition: border-color 0.3s; line-height: 1.10;\n  }\n  .form-input::placeholder { color: var(--warm-gray); }\n  .form-input:focus { border-color: var(--absolute-black); }\n  .form-input-error { border-color: var(--error-rose); }\n  .form-error-text { font-size: 11px; color: var(--error-rose); }\n  textarea.form-input { resize: vertical; min-height: 100px; border-radius: 8px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n  .spacing-box { background: var(--renault-yellow); height: 40px; }\n  .spacing-label { font-family: monospace; font-size: 10px; color: var(--warm-gray); white-space: nowrap; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }\n  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .radius-box { width: 80px; height: 80px; background: var(--pale-silver); border: 1px solid var(--border-gray); }\n  .radius-label { font-family: monospace; font-size: 11px; color: var(--charcoal); text-align: center; }\n  .radius-context { font-size: 11px; color: var(--warm-gray); text-align: center; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 40px; background: var(--pale-silver); }\n  .elevation-card {\n    background: var(--pure-white); padding: 24px; min-height: 120px;\n    display: flex; flex-direction: column; justify-content: flex-end;\n  }\n  .elevation-label { font-size: 14px; font-weight: 700; color: var(--absolute-black); margin-bottom: 4px; }\n  .elevation-desc { font-size: 12px; color: var(--charcoal); line-height: 1.40; }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 60px 20px; min-height: 70vh; }\n    .hero h1 { font-size: 32px; }\n    .hero-buttons { flex-direction: column; gap: 12px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 24px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .form-group.full { grid-column: auto; }\n    .button-row, .dark-btn-row { flex-direction: column; align-items: flex-start; }\n    .elevation-grid { grid-template-columns: 1fr; padding: 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav-cta\" href=\"#elevation\">Explore\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Renault\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual reference generated from DESIGN.md — every color, type rule, and component token documented from Renault's design system.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-super-primary\">Configure\u003C\u002Fa>\n    \u003Ca href=\"#typography\" class=\"btn-ghost-white\">Explore\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Cdiv id=\"colors\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color extracted from Renault's design system with semantic names, hex values, and functional roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#EFDF00;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Renault Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#EFDF00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Super-primary CTA, brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#000000;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary button bg, headings, dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF; border:1px solid #D9D9D6;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary surface, light canvas (--rt-color-white)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Secondary & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F8EB4C;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Soft Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F8EB4C\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Yellow hover\u002Fpressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#1883FD;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Renault Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1883FD\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Link hover color across all variants\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#D9D9D6;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#D9D9D6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Disabled states, subtle borders\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#222222;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#222222\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary dark surface (--rt-color-dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F2F2F2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pale Silver\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F2F2F2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Alternate light surface, card borders\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#D1D1D1;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Border Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#D1D1D1\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Input borders, subtle separators\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#8DC572;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Success Green\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#8DC572\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Positive status (--rt-color-success)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#BE6464;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Error Rose\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#BE6464\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Validation errors (--rt-color-error)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#F0AD4E;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warning Amber\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F0AD4E\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Cautionary alerts (--rt-color-warning)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background:#337AB7;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Info Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#337AB7\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Informational callouts (--rt-color-info)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Cdiv id=\"typography\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">NouvelR proprietary typeface — geometric sans-serif with a 28-degree \"radical r\" cut. Rendered with Nunito Sans as Google Font substitute.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px;font-weight:700;line-height:0.95;text-transform:uppercase;\">Hero Title\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Hero Title — 56px \u002F 700 \u002F 0.95 LH \u002F uppercase — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px;font-weight:700;line-height:0.95;\">Section Heading — Electric Models\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Section Heading — 40px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px;font-weight:700;line-height:0.95;\">Card Heading — New Scenic\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Card Heading — 32px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px;font-weight:700;line-height:0.95;\">Subheading — Campaign Offers\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Subheading — 24px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:21.92px;font-weight:600;line-height:1.20;\">Module Title — Vehicle Range\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Module Title — 21.92px \u002F 600 \u002F 1.20 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:19.2px;font-weight:600;line-height:1.30;\">UI Heading — Configuration Options\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">UI Heading — 19.2px \u002F 600 \u002F 1.30 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px;font-weight:700;line-height:1.00;\">Emphasis — E-Tech Hybrid\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Emphasis — 18px \u002F 700 \u002F 1.00 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px;font-weight:700;line-height:1.40;\">Body Heading — Performance Details\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Heading — 16px \u002F 700 \u002F 1.40 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px;font-weight:400;line-height:1.40;color:var(--charcoal);\">Body Text — The all-new Scenic E-Tech electric delivers a driving experience that combines range, comfort, and advanced technology for everyday journeys.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Text — 14px \u002F 400 \u002F 1.40 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14.4px;font-weight:700;line-height:1.00;letter-spacing:0.144px;\">Button Label — Configure\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Button Label — 14.4px \u002F 700 \u002F 1.00 LH \u002F 0.144px — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px;font-weight:700;line-height:1.50;\">Nav Link — Models & Range\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Nav Link — 13px \u002F 700 \u002F 1.50 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12.8px;font-weight:400;line-height:1.10;color:var(--charcoal);\">Caption — Photographed at the Renault Design Center\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Caption — 12.8px \u002F 400 \u002F 1.10 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px;font-weight:700;line-height:1.45;color:var(--warm-gray);\">Micro Text — Legal Disclaimer\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Micro Text — 10px \u002F 700 \u002F 1.45 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Cdiv id=\"buttons\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All buttons use zero border-radius — sharp rectangular forms. Four variants cover light and dark contexts.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Super Primary (Yellow)\u003C\u002Fspan>\u003Cbutton class=\"btn-yellow\">Configure\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Primary (Black)\u003C\u002Fspan>\u003Cbutton class=\"btn-primary-black\">Explore\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Ghost (Black)\u003C\u002Fspan>\u003Cbutton class=\"btn-ghost-black\">Learn More\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Text Link\u003C\u002Fspan>\u003Ca href=\"#\" class=\"btn-text-link\">View Details\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">On Dark Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"dark-btn-row\">\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Super Primary (Yellow)\u003C\u002Fspan>\u003Cbutton class=\"btn-yellow\">Configure\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Primary Inverted (White)\u003C\u002Fspan>\u003Cbutton style=\"background:#fff;color:#000;border:1px solid #fff;border-radius:0;padding:10px 15px;font-family:var(--font-main);font-size:14.4px;font-weight:700;min-height:46px;min-width:120px;cursor:pointer;\">Explore\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Ghost (White)\u003C\u002Fspan>\u003Cbutton class=\"btn-ghost-white-2\">Learn More\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Text Link\u003C\u002Fspan>\u003Ca href=\"#\" style=\"color:#fff;font-size:14px;font-weight:700;font-family:var(--font-main);text-decoration:none;transition:color 0.3s;\">View All\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Cdiv id=\"cards\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">PromoCards with dark gradient overlays for text legibility over photography. Alternating light and dark modes.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #5B2D8E 0%, #1A7A8E 100%);\">\n      \u003Cdiv class=\"card-heading\">Scenic E-Tech\u003Cbr>Electric\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-text\">The next generation of electric mobility, reimagined.\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-btn\">Explore\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #000 0%, #222 100%);\">\n      \u003Cdiv class=\"card-heading\">E-Tech\u003Cbr>Hybrid\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-text\">Intelligent hybrid powertrain for everyday efficiency.\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-btn\" style=\"background:var(--renault-yellow);color:#000;border-color:var(--renault-yellow);\">Configure\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #8B1A6E 0%, #5B2D8E 100%);\">\n      \u003Cdiv class=\"card-heading\">Renault\u003Cbr>Clio\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-text\">The iconic city car, now with hybrid technology.\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-btn\" style=\"background:transparent;color:#fff;border-color:#fff;\">Learn More\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Cdiv id=\"forms\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill-shaped inputs (50px radius) contrasting with zero-radius buttons. NouvelR 12.8px text.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">First Name\u003C\u002Flabel>\u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter first name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Last Name\u003C\u002Flabel>\u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter last name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\u003Cinput type=\"email\" class=\"form-input\" placeholder=\"email@example.com\" style=\"border-color:#000;\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Phone (Error State)\u003C\u002Flabel>\u003Cinput type=\"tel\" class=\"form-input form-input-error\" value=\"+90 555\">\u003Cspan class=\"form-error-text\">Please enter a valid phone number\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full\">\u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\u003Ctextarea class=\"form-input\" placeholder=\"Write your message...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Cdiv id=\"spacing\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit: 8px. The full spacing scale from Renault's design tokens.\u003C\u002Fp>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">1px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:5px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">5px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:15px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">15px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:40px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Cdiv id=\"radius\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Zero-radius dominates buttons and cards. Pill shapes reserved for inputs only.\u003C\u002Fp>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">0px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Buttons, Cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Small UI\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:3px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">3px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Panels, Tabs\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Labels, Tags\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:46px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">46px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Filter Chips\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">50px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Search Input\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Cdiv id=\"elevation\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Seven shadow tokens progressing from subtle hover lifts to dramatic deep panels.\u003C\u002Fp>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;border:1px solid var(--pale-silver);\">\u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Default for PromoCards and buttons.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.2) 0px 4px 8px;\">\u003Cdiv class=\"elevation-label\">Level 1 — Soft\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Card hover states, subtle lift effect.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.2) 0px 0px 18px;\">\u003Cdiv class=\"elevation-label\">Level 2 — Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Floating elements, dropdown menus.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0) 0px 2px 4px, rgba(50,50,93,0.1) 0px 7px 14px;\">\u003Cdiv class=\"elevation-label\">Level 3 — Layered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Compound shadow for elevated cards and modals.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.15) 0px 40px 80px;\">\u003Cdiv class=\"elevation-label\">Level 4 — Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Large floating panels, configurator overlays.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.2) 5px 5px 8px;\">\u003Cdiv class=\"elevation-label\">Level 5 — Directional\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Offset directional shadow for specific components.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgb(199,197,199) 0px 0px 12px 2px;\">\u003Cdiv class=\"elevation-label\">Level 6 — Ambient\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm ambient glow for highlighted elements.\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;\">\n  \u003Cp style=\"font-size:12px;color:var(--warm-gray);\">Generated from DESIGN.md — Renault Design System Tokens\u003C\u002Fp>\n  \u003Cp style=\"font-size:13px;font-weight:700;color:var(--pure-white);margin-top:8px;\">awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Renault — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Nunito+Sans:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --renault-yellow: #EFDF00;\n    --soft-yellow: #F8EB4C;\n    --renault-blue: #1883FD;\n    --absolute-black: #000000;\n    --pure-white: #FFFFFF;\n    --charcoal: #222222;\n    --pale-silver: #F2F2F2;\n    --warm-gray: #D9D9D6;\n    --border-gray: #D1D1D1;\n    --success-green: #8DC572;\n    --error-rose: #BE6464;\n    --warning-amber: #F0AD4E;\n    --info-blue: #337AB7;\n    --font-main: 'Nunito Sans', sans-serif;\n    \u002F* Dark mode *\u002F\n    --page-bg: #111111;\n    --card-bg: var(--charcoal);\n    --card-border: #333333;\n    --text-primary: var(--pure-white);\n    --text-secondary: var(--warm-gray);\n    --text-muted: #888888;\n    --divider: #333333;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-main);\n    background: var(--page-bg);\n    color: var(--text-secondary);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.40;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--renault-yellow); color: var(--absolute-black);\n    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;\n    padding: 6px 14px; border-radius: 0;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky; top: 0; z-index: 100; display: flex; align-items: center;\n    justify-content: space-between; padding: 12px 40px; background: var(--absolute-black);\n    min-height: 56px; border-bottom: 1px solid var(--card-border);\n  }\n  .nav-brand { font-size: 13px; font-weight: 700; color: var(--pure-white); text-decoration: none; }\n  .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }\n  .nav-links a { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-decoration: none; padding: 8px 14px; transition: color 0.3s; }\n  .nav-links a:hover { color: var(--pure-white); }\n  .nav-cta {\n    background: var(--renault-yellow); color: var(--absolute-black) !important;\n    padding: 10px 15px; border-radius: 0; font-size: 14.4px; font-weight: 700;\n    text-decoration: none; display: inline-flex; align-items: center; min-height: 46px;\n    border: 1px solid var(--renault-yellow); cursor: pointer; transition: background-color 0.3s;\n  }\n  .nav-cta:hover { background: var(--soft-yellow); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative; min-height: 90vh; display: flex; flex-direction: column;\n    align-items: center; justify-content: center; padding: 100px 40px 80px;\n    background: linear-gradient(135deg, #8B1A6E 0%, #5B2D8E 25%, #2E4A9E 50%, #1A7A8E 75%, #1A9E7A 100%);\n    text-align: center; overflow: hidden;\n  }\n  .hero::before {\n    content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;\n    background: radial-gradient(ellipse, rgba(239,223,0,0.12) 0%, transparent 70%); pointer-events: none;\n  }\n  .hero h1 { font-size: 56px; font-weight: 700; line-height: 0.95; color: var(--pure-white); margin-bottom: 20px; position: relative; text-transform: uppercase; }\n  .hero .subtitle { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.85); margin-bottom: 40px; line-height: 1.40; position: relative; max-width: 600px; }\n  .hero-buttons { display: flex; gap: 16px; position: relative; }\n  .btn-super-primary {\n    background: var(--renault-yellow); color: var(--absolute-black); border: 1px solid var(--renault-yellow);\n    border-radius: 0; padding: 10px 28px; font-size: 16px; font-weight: 700; min-height: 46px;\n    cursor: pointer; transition: background-color 0.3s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;\n  }\n  .btn-super-primary:hover { background: var(--soft-yellow); }\n  .btn-ghost-white {\n    background: transparent; color: var(--pure-white); border: 1px solid var(--pure-white);\n    border-radius: 0; padding: 10px 28px; font-size: 16px; font-weight: 700; min-height: 46px;\n    cursor: pointer; transition: background-color 0.3s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;\n  }\n  .btn-ghost-white:hover { background: rgba(255,255,255,0.15); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }\n  .section-title { font-size: 32px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 0.95; }\n  .section-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.40; }\n  .section-divider { border: none; border-top: 1px solid var(--divider); margin: 0 40px; max-width: 1200px; margin-left: auto; margin-right: auto; }\n\n  \u002F* COLORS *\u002F\n  .color-group-label { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; margin-top: 32px; }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; margin-bottom: 32px; }\n  .color-swatch { overflow: hidden; }\n  .color-swatch .swatch-block { height: 80px; }\n  .color-swatch .swatch-info { padding: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-top: none; }\n  .color-swatch .swatch-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }\n  .color-swatch .swatch-hex { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-family: monospace; }\n  .color-swatch .swatch-role { font-size: 11px; color: var(--text-muted); line-height: 1.3; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--divider); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin-bottom: 24px; }\n  .button-item { display: flex; flex-direction: column; gap: 8px; }\n  .button-item .btn-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }\n  .btn-yellow {\n    background: var(--renault-yellow); color: var(--absolute-black); border: 1px solid var(--renault-yellow);\n    border-radius: 0; padding: 10px 15px; font-size: 14.4px; font-weight: 700; min-height: 46px;\n    min-width: 120px; text-align: center; cursor: pointer; transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-yellow:hover { background: var(--soft-yellow); }\n  .btn-primary-white {\n    background: var(--pure-white); color: var(--absolute-black); border: 1px solid var(--pure-white);\n    border-radius: 0; padding: 10px 15px; font-size: 14.4px; font-weight: 700; min-height: 46px;\n    min-width: 120px; text-align: center; cursor: pointer; transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-ghost-dark-2 {\n    background: transparent; color: var(--pure-white); border: 1px solid var(--pure-white);\n    border-radius: 0; padding: 10px 15px; font-size: 14.4px; font-weight: 700; min-height: 46px;\n    min-width: 120px; text-align: center; cursor: pointer; transition: background-color 0.3s; letter-spacing: 0.144px;\n  }\n  .btn-ghost-dark-2:hover { background: rgba(255,255,255,0.1); }\n  .btn-text-link-dark { background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: color 0.3s; padding: 0; }\n  .btn-text-link-dark:hover { color: var(--renault-blue); }\n  .dark-btn-row { background: var(--absolute-black); padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; border: 1px solid var(--card-border); }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; }\n  .card {\n    position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column;\n    justify-content: flex-end; padding: 24px; background-size: cover; background-position: center;\n  }\n  .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }\n  .card-heading { font-size: 40px; font-weight: 700; color: var(--pure-white); line-height: 0.95; margin-bottom: 8px; position: relative; }\n  .card-text { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.40; position: relative; margin-bottom: 16px; }\n  .card-btn {\n    position: relative; display: inline-flex; align-items: center; background: var(--pure-white);\n    color: var(--absolute-black); border: 1px solid var(--pure-white); border-radius: 0;\n    padding: 10px 15px; font-size: 14.4px; font-weight: 700; min-height: 46px; cursor: pointer; text-decoration: none; width: fit-content;\n  }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 700px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full { grid-column: 1 \u002F -1; }\n  .form-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }\n  .form-input {\n    font-family: var(--font-main); font-size: 12.8px; color: var(--text-primary);\n    background: transparent; border: 1px solid var(--card-border); border-radius: 50px;\n    padding: 10px 15px; outline: none; transition: border-color 0.3s; line-height: 1.10;\n  }\n  .form-input::placeholder { color: var(--text-muted); }\n  .form-input:focus { border-color: var(--renault-yellow); }\n  .form-input-error { border-color: var(--error-rose); }\n  .form-error-text { font-size: 11px; color: var(--error-rose); }\n  textarea.form-input { resize: vertical; min-height: 100px; border-radius: 8px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n  .spacing-box { background: var(--renault-yellow); height: 40px; }\n  .spacing-label { font-family: monospace; font-size: 10px; color: var(--text-muted); white-space: nowrap; }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }\n  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n  .radius-box { width: 80px; height: 80px; background: var(--card-bg); border: 1px solid var(--card-border); }\n  .radius-label { font-family: monospace; font-size: 11px; color: var(--text-secondary); text-align: center; }\n  .radius-context { font-size: 11px; color: var(--text-muted); text-align: center; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 40px; background: var(--absolute-black); border: 1px solid var(--card-border); }\n  .elevation-card { background: var(--card-bg); padding: 24px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--card-border); }\n  .elevation-label { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }\n  .elevation-desc { font-size: 12px; color: var(--text-muted); line-height: 1.40; }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 60px 20px; min-height: 70vh; }\n    .hero h1 { font-size: 32px; }\n    .hero-buttons { flex-direction: column; gap: 12px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 24px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .form-group.full { grid-column: auto; }\n    .button-row, .dark-btn-row { flex-direction: column; align-items: flex-start; }\n    .elevation-grid { grid-template-columns: 1fr; padding: 20px; }\n    .dark-badge { top: 8px; right: 8px; font-size: 10px; padding: 4px 10px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca class=\"nav-cta\" href=\"#elevation\">Explore\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Renault\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual reference generated from DESIGN.md — every color, type rule, and component token documented from Renault's design system.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-super-primary\">Configure\u003C\u002Fa>\n    \u003Ca href=\"#typography\" class=\"btn-ghost-white\">Explore\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Cdiv id=\"colors\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Every color extracted from Renault's design system with semantic names, hex values, and functional roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#EFDF00;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Renault Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#EFDF00\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Super-primary CTA, brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#000000;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Absolute Black\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary button bg, headings, dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#FFFFFF;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Primary surface, light canvas (--rt-color-white)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Secondary & Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#F8EB4C;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Soft Yellow\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F8EB4C\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Yellow hover\u002Fpressed state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#1883FD;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Renault Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#1883FD\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Link hover color across all variants\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#D9D9D6;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#D9D9D6\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Disabled states, subtle borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#222222;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#222222\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Secondary dark surface (--rt-color-dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#F2F2F2;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Pale Silver\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F2F2F2\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Alternate light surface, card borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#D1D1D1;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Border Gray\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#D1D1D1\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Input borders, subtle separators\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#8DC572;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Success Green\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#8DC572\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Positive status (--rt-color-success)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#BE6464;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Error Rose\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#BE6464\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Validation errors (--rt-color-error)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#F0AD4E;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Warning Amber\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#F0AD4E\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Cautionary alerts (--rt-color-warning)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"swatch-block\" style=\"background:#337AB7;\">\u003C\u002Fdiv>\u003Cdiv class=\"swatch-info\">\u003Cdiv class=\"swatch-name\">Info Blue\u003C\u002Fdiv>\u003Cdiv class=\"swatch-hex\">#337AB7\u003C\u002Fdiv>\u003Cdiv class=\"swatch-role\">Informational callouts (--rt-color-info)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Cdiv id=\"typography\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">NouvelR proprietary typeface — geometric sans-serif with a 28-degree \"radical r\" cut. Rendered with Nunito Sans as Google Font substitute.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px;font-weight:700;line-height:0.95;text-transform:uppercase;color:var(--text-primary);\">Hero Title\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Hero Title — 56px \u002F 700 \u002F 0.95 LH \u002F uppercase — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px;font-weight:700;line-height:0.95;color:var(--text-primary);\">Section Heading — Electric Models\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Section Heading — 40px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px;font-weight:700;line-height:0.95;color:var(--text-primary);\">Card Heading — New Scenic\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Card Heading — 32px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px;font-weight:700;line-height:0.95;color:var(--text-primary);\">Subheading — Campaign Offers\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Subheading — 24px \u002F 700 \u002F 0.95 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:21.92px;font-weight:600;line-height:1.20;color:var(--text-primary);\">Module Title — Vehicle Range\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Module Title — 21.92px \u002F 600 \u002F 1.20 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px;font-weight:700;line-height:1.00;color:var(--text-primary);\">Emphasis — E-Tech Hybrid\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Emphasis — 18px \u002F 700 \u002F 1.00 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px;font-weight:700;line-height:1.40;color:var(--text-primary);\">Body Heading — Performance Details\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Heading — 16px \u002F 700 \u002F 1.40 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px;font-weight:400;line-height:1.40;color:var(--text-secondary);\">Body Text — The all-new Scenic E-Tech electric delivers a driving experience that combines range, comfort, and advanced technology.\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Body Text — 14px \u002F 400 \u002F 1.40 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14.4px;font-weight:700;line-height:1.00;letter-spacing:0.144px;color:var(--text-primary);\">Button Label — Configure\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Button Label — 14.4px \u002F 700 \u002F 1.00 LH \u002F 0.144px — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px;font-weight:700;line-height:1.50;color:var(--text-primary);\">Nav Link — Models & Range\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Nav Link — 13px \u002F 700 \u002F 1.50 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px;font-weight:700;line-height:1.45;color:var(--text-muted);\">Micro Text — Legal Disclaimer\u003C\u002Fdiv>\u003Cdiv class=\"type-label\">Micro Text — 10px \u002F 700 \u002F 1.45 LH — NouvelR\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Cdiv id=\"buttons\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">All buttons use zero border-radius. Four variants for dark contexts.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Super Primary (Yellow)\u003C\u002Fspan>\u003Cbutton class=\"btn-yellow\">Configure\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Primary Inverted (White)\u003C\u002Fspan>\u003Cbutton class=\"btn-primary-white\">Explore\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Ghost (White)\u003C\u002Fspan>\u003Cbutton class=\"btn-ghost-dark-2\">Learn More\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\">Text Link\u003C\u002Fspan>\u003Ca href=\"#\" class=\"btn-text-link-dark\">View Details\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">On Deeper Dark Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"dark-btn-row\">\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Super Primary (Yellow)\u003C\u002Fspan>\u003Cbutton class=\"btn-yellow\">Configure\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Primary Inverted (White)\u003C\u002Fspan>\u003Cbutton class=\"btn-primary-white\">Explore\u003C\u002Fbutton>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"btn-label\" style=\"color:var(--text-muted);\">Ghost (White)\u003C\u002Fspan>\u003Cbutton class=\"btn-ghost-dark-2\">Learn More\u003C\u002Fbutton>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Cdiv id=\"cards\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">PromoCards with dark gradient overlays for text legibility over photography.\u003C\u002Fp>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #5B2D8E 0%, #1A7A8E 100%);\">\u003Cdiv class=\"card-heading\">Scenic E-Tech\u003Cbr>Electric\u003C\u002Fdiv>\u003Cdiv class=\"card-text\">The next generation of electric mobility.\u003C\u002Fdiv>\u003Cdiv class=\"card-btn\">Explore\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #111 0%, #333 100%);\">\u003Cdiv class=\"card-heading\">E-Tech\u003Cbr>Hybrid\u003C\u002Fdiv>\u003Cdiv class=\"card-text\">Intelligent hybrid powertrain for everyday efficiency.\u003C\u002Fdiv>\u003Cdiv class=\"card-btn\" style=\"background:var(--renault-yellow);color:#000;border-color:var(--renault-yellow);\">Configure\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:linear-gradient(135deg, #8B1A6E 0%, #5B2D8E 100%);\">\u003Cdiv class=\"card-heading\">Renault\u003Cbr>Clio\u003C\u002Fdiv>\u003Cdiv class=\"card-text\">The iconic city car, now with hybrid technology.\u003C\u002Fdiv>\u003Cdiv class=\"card-btn\" style=\"background:transparent;color:#fff;border-color:#fff;\">Learn More\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Cdiv id=\"forms\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Pill-shaped inputs (50px radius) with transparent background for dark mode.\u003C\u002Fp>\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">First Name\u003C\u002Flabel>\u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter first name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Last Name\u003C\u002Flabel>\u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter last name\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email (Focus State)\u003C\u002Flabel>\u003Cinput type=\"email\" class=\"form-input\" placeholder=\"email@example.com\" style=\"border-color:var(--renault-yellow);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Phone (Error State)\u003C\u002Flabel>\u003Cinput type=\"tel\" class=\"form-input form-input-error\" value=\"+90 555\" style=\"color:var(--text-primary);\">\u003Cspan class=\"form-error-text\">Please enter a valid phone number\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full\">\u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\u003Ctextarea class=\"form-input\" placeholder=\"Write your message...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Cdiv id=\"spacing\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Base unit: 8px. The full spacing scale from Renault's design tokens.\u003C\u002Fp>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:1px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">1px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:10px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">10px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width:40px;\">\u003C\u002Fdiv>\u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Cdiv id=\"radius\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Zero-radius dominates buttons and cards. Pill shapes reserved for inputs only.\u003C\u002Fp>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">0px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Buttons, Cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">2px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Small UI\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">4px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Labels, Tags\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:46px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">46px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Filter Chips\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50px;\">\u003C\u002Fdiv>\u003Cspan class=\"radius-label\">50px\u003C\u002Fspan>\u003Cspan class=\"radius-context\">Search Input\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Cdiv id=\"elevation\" class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Seven shadow tokens from subtle hover lifts to dramatic deep panels.\u003C\u002Fp>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:none;\">\u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow. Default for PromoCards and buttons.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.4) 0px 4px 8px;\">\u003Cdiv class=\"elevation-label\">Level 1 — Soft\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Card hover states, subtle lift.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.4) 0px 0px 18px;\">\u003Cdiv class=\"elevation-label\">Level 2 — Medium\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Floating elements, dropdowns.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.2) 0px 2px 4px, rgba(50,50,93,0.15) 0px 7px 14px;\">\u003Cdiv class=\"elevation-label\">Level 3 — Layered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Compound shadow for modals.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.3) 0px 40px 80px;\">\u003Cdiv class=\"elevation-label\">Level 4 — Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Large floating panels.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.4) 5px 5px 8px;\">\u003Cdiv class=\"elevation-label\">Level 5 — Directional\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Offset directional shadow.\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgb(80,80,80) 0px 0px 12px 2px;\">\u003Cdiv class=\"elevation-label\">Level 6 — Ambient\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm ambient glow.\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"background:var(--absolute-black);padding:40px;text-align:center;margin-top:40px;border-top:1px solid var(--card-border);\">\n  \u003Cp style=\"font-size:12px;color:var(--text-muted);\">Generated from DESIGN.md — Renault Design System Tokens\u003C\u002Fp>\n  \u003Cp style=\"font-size:13px;font-weight:700;color:var(--text-secondary);margin-top:8px;\">awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# Renault Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frenault\u002FDESIGN.md) extracted from the public [Renault](https:\u002F\u002Frenault.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frenault\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Renault design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Renault Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frenault\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Renault Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frenault\u002Fpreview-screenshot.png)\n",{"slug":271,"name":272,"category":45,"designMd":273,"previewHtml":274,"previewDarkHtml":275,"readme":276},"replicate","Replicate","# Design System Inspiration of Replicate\n\n## 1. Visual Theme & Atmosphere\n\nReplicate's interface is a developer playground crackling with creative energy — a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section explodes with a vibrant orange-red-magenta gradient that immediately signals \"this is where AI models come alive,\" while the body of the page grounds itself in a clean white canvas where code snippets and model galleries take center stage.\n\nThe design personality is defined by two extreme choices: **massive display typography** (up to 128px) using the custom rb-freigeist-neue face, and **exclusively pill-shaped geometry** (9999px radius on everything). The display font is thick, bold, and confident — its heavy weight at enormous sizes creates text that feels like it's shouting with joy rather than whispering authority. Combined with basier-square for body text (a clean geometric sans) and JetBrains Mono for code, the system serves developers who want power and playfulness in equal measure.\n\nWhat makes Replicate distinctive is its community-powered energy. The model gallery with AI-generated images, the dotted-underline links, the green status badges, and the \"Imagine what you can build\" closing manifesto all create a space that feels alive and participatory — not a corporate product page but a launchpad for creative developers.\n\n**Key Characteristics:**\n- Explosive orange-red-magenta gradient hero (#ea2804 brand anchor)\n- Massive display typography (128px) in heavy rb-freigeist-neue\n- Exclusively pill-shaped geometry: 9999px radius on EVERYTHING\n- High-contrast black (#202020) and white palette with red brand accent\n- Developer-community energy: model galleries, code examples, dotted-underline links\n- Green status badges (#2b9a66) for live\u002Foperational indicators\n- Bold\u002Fheavy font weights (600-700) creating maximum typographic impact\n- Playful closing manifesto: \"Imagine what you can build.\"\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Replicate Dark** (`#202020`): The primary text color and dark surface — a near-black that's the anchor of all text and borders. Slightly warmer than pure #000.\n- **Replicate Red** (`#ea2804`): The core brand color — a vivid, saturated orange-red used in the hero gradient, accent borders, and high-signal moments.\n- **Secondary Red** (`#dd4425`): A slightly warmer variant for button borders and link hover states.\n\n### Secondary & Accent\n- **Status Green** (`#2b9a66`): Badge\u002Fpill background for \"running\" or operational status indicators.\n- **GitHub Dark** (`#24292e`): A blue-tinted dark used for code block backgrounds and developer contexts.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page body background.\n- **Near White** (`#fcfcfc`): Button text on dark surfaces and the lightest content.\n- **Hero Gradient**: A dramatic orange → red → magenta → pink gradient for the hero section. Transitions from warm (#ea2804 family) through hot pink.\n\n### Neutrals & Text\n- **Medium Gray** (`#646464`): Secondary body text and de-emphasized content.\n- **Warm Gray** (`#4e4e4e`): Emphasized secondary text.\n- **Mid Silver** (`#8d8d8d`): Tertiary text, footnotes.\n- **Light Silver** (`#bbbbbb`): Dotted-underline link decoration color, muted metadata.\n- **Pure Black** (`#000000`): Maximum-emphasis borders and occasional text.\n\n### Gradient System\n- **Hero Blaze**: A dramatic multi-stop gradient flowing through orange (`#ea2804`) → red → magenta → hot pink. This gradient occupies the full hero section and is the most visually dominant element on the page.\n- **Dark Sections**: Deep dark (#202020) sections with white\u002Fnear-white text provide contrast against the white body.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `rb-freigeist-neue`, with fallbacks: `ui-sans-serif, system-ui`\n- **Body \u002F UI**: `basier-square`, with fallbacks: `ui-sans-serif, system-ui`\n- **Code**: `jetbrains-mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | rb-freigeist-neue | 128px (8rem) | 700 | 1.00 (tight) | normal | The maximum: closing manifesto |\n| Display \u002F Hero | rb-freigeist-neue | 72px (4.5rem) | 700 | 1.00 (tight) | -1.8px | Hero section headline |\n| Section Heading | rb-freigeist-neue | 48px (3rem) | 400–700 | 1.00 (tight) | normal | Feature section titles |\n| Sub-heading | rb-freigeist-neue | 30px (1.88rem) | 600 | 1.20 (tight) | normal | Card headings |\n| Sub-heading Sans | basier-square | 38.4px (2.4rem) | 400 | 0.83 (ultra-tight) | normal | Large body headings |\n| Feature Title | basier-square \u002F rb-freigeist-neue | 18px (1.13rem) | 600 | 1.56 | normal | Small section titles, labels |\n| Body Large | basier-square | 20px (1.25rem) | 400 | 1.40 | normal | Intro paragraphs |\n| Body \u002F Button | basier-square | 16–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | Standard text, buttons |\n| Caption | basier-square | 14px (0.88rem) | 400–600 | 1.43 | -0.35px to normal | Metadata, descriptions |\n| Small \u002F Tag | basier-square | 12px (0.75rem) | 400 | 1.33 | normal | Tags (lowercase transform) |\n| Code | jetbrains-mono | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, API examples |\n| Code Small | jetbrains-mono | 11px (0.69rem) | 400 | 1.50 | normal | Tiny code references |\n\n### Principles\n- **Heavy display, light body**: rb-freigeist-neue at 700 weight creates thundering headlines, while basier-square at 400 handles body text with quiet efficiency. The contrast is extreme and intentional.\n- **128px is a real size**: The closing manifesto \"Imagine what you can build.\" uses 128px — bigger than most mobile screens. This is the design equivalent of shouting from a rooftop.\n- **Negative tracking on hero**: -1.8px letter-spacing at 72px creates dense, impactful hero text.\n- **Lowercase tags**: 12px basier-square uses `text-transform: lowercase` — an unusual choice that creates a casual, developer-friendly vibe.\n- **Weight 600 as emphasis**: When basier-square needs emphasis, it uses 600 (semibold) — never bold (700), which is reserved for rb-freigeist-neue display text.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Solid**\n- Background: Replicate Dark (`#202020`)\n- Text: Near White (`#fcfcfc`)\n- Padding: 0px 4px (extremely compact)\n- Outline: Replicate Dark 4px solid\n- Radius: pill-shaped (implied by system)\n- Maximum emphasis — dark pill on light surface\n\n**White Outlined**\n- Background: Pure White (`#ffffff`)\n- Text: Replicate Dark (`#202020`)\n- Border: `1px solid #202020`\n- Radius: pill-shaped\n- Clean outlined pill for secondary actions\n\n**Transparent Glass**\n- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)\n- Text: Replicate Dark (`#202020`)\n- Padding: 6px 56px 6px 28px (asymmetric — icon\u002Fsearch layout)\n- Border: transparent\n- Outline: Light Silver (`#bbbbbb`) 1px solid\n- Used for search\u002Finput-like buttons\n\n### Cards & Containers\n- Background: Pure White or subtle gray\n- Border: `1px solid #202020` for prominent containment\n- Radius: pill-shaped (9999px) for badges, labels, images\n- Shadow: minimal standard shadows\n- Model gallery: grid of AI-generated image thumbnails\n- Accent border: `1px solid #ea2804` for highlighted\u002Ffeatured items\n\n### Inputs & Forms\n- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)\n- Text: Replicate Dark (`#202020`)\n- Border: transparent with outline\n- Padding: 6px 56px 6px 28px (search-bar style)\n\n### Navigation\n- Clean horizontal nav on white\n- Logo: Replicate wordmark in dark\n- Links: dark text with dotted underline on hover\n- CTA: Dark pill button\n- GitHub link and sign-in\n\n### Image Treatment\n- AI-generated model output images in a gallery grid\n- Pill-shaped image containers (9999px)\n- Full-width gradient hero section\n- Product screenshots with dark backgrounds\n\n### Distinctive Components\n\n**Model Gallery Grid**\n- Horizontal scrolling or grid of AI-generated images\n- Each image in a pill-shaped container\n- Model names and run counts displayed\n- The visual heart of the community platform\n\n**Dotted Underline Links**\n- Links use `text-decoration: underline dotted #bbbbbb`\n- A distinctive, developer-notebook aesthetic\n- Lighter and more casual than solid underlines\n\n**Status Badges**\n- Status Green (`#2b9a66`) background with white text\n- Pill-shaped (9999px)\n- 14px font size\n- Indicates model availability\u002Foperational status\n\n**Manifesto Section**\n- \"Imagine what you can build.\" at 128px\n- Dark background with white text\n- Images embedded between words\n- The emotional climax of the page\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 160px, 192px\n- Button padding: varies widely (0px 4px to 6px 56px)\n- Section vertical spacing: very generous (96–192px)\n\n### Grid & Container\n- Fluid width with responsive constraints\n- Hero: full-width gradient with centered content\n- Model gallery: multi-column responsive grid\n- Feature sections: mixed layouts\n- Code examples: contained dark blocks\n\n### Whitespace Philosophy\n- **Bold and generous**: Massive spacing between sections (up to 192px) creates distinct zones.\n- **Dense within galleries**: Model images are tightly packed in the grid for browsable density.\n- **The gradient IS the whitespace**: The hero gradient section occupies significant vertical space as a colored void.\n\n### Border Radius Scale\n- **Pill (9999px)**: The ONLY radius in the system. Everything interactive, every image, every badge, every label, every container uses 9999px. This is the most extreme pill-radius commitment in any major tech brand.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White body, text blocks |\n| Bordered (Level 1) | `1px solid #202020` | Cards, buttons, containers |\n| Accent Border (Level 2) | `1px solid #ea2804` | Featured\u002Fhighlighted items |\n| Gradient Hero (Level 3) | Full-width blaze gradient | Hero section, maximum visual impact |\n| Dark Section (Level 4) | Dark bg (#202020) with light text | Manifesto, footer, feature sections |\n\n**Shadow Philosophy**: Replicate relies on **borders and background color** for depth rather than shadows. The `1px solid #202020` border is the primary containment mechanism. The dramatic gradient hero and dark\u002Flight section alternation provide all the depth the design needs.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pill-shaped (9999px) radius on EVERYTHING — buttons, images, badges, containers\n- Use rb-freigeist-neue at weight 700 for display text — go big (72px+) or go home\n- Use the orange-red brand gradient for hero sections\n- Use Replicate Dark (#202020) as the primary dark — not pure black\n- Apply dotted underline decoration on text links (#bbbbbb)\n- Use Status Green (#2b9a66) for operational\u002Fsuccess badges\n- Keep body text in basier-square at 400–600 weight\n- Use JetBrains Mono for all code content\n- Create a \"manifesto\" section with 128px type for emotional impact\n\n### Don't\n- Don't use any border-radius other than 9999px — the pill system is absolute\n- Don't use the brand red (#ea2804) as a surface\u002Fbackground color — it's for gradients and accent borders\n- Don't reduce display text below 48px on desktop — the heavy display font needs size to breathe\n- Don't use light\u002Fthin font weights on rb-freigeist-neue — 600–700 is the range\n- Don't use solid underlines on links — dotted is the signature\n- Don't add drop shadows — depth comes from borders and background color\n- Don't use warm neutrals — the gray scale is purely neutral (#202020 → #bbbbbb)\n- Don't skip the code examples — they're primary content, not decoration\n- Don't make the hero gradient subtle — it should be BOLD and vibrant\n\n## 8. Responsive Behavior\n\n### Breakpoints\n*No explicit breakpoints detected — likely using fluid\u002Fcontainer-query responsive system.*\n\n### Touch Targets\n- Pill buttons with generous padding\n- Gallery images as large touch targets\n- Navigation adequately spaced\n\n### Collapsing Strategy\n- **Hero text**: 128px → 72px → 48px progressive scaling\n- **Model gallery**: Grid reduces columns\n- **Navigation**: Collapses to hamburger\n- **Manifesto**: Scales down but maintains impact\n\n### Image Behavior\n- AI-generated images scale within pill containers\n- Gallery reflows to fewer columns on narrow screens\n- Hero gradient maintained at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Replicate Dark (#202020)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Brand Accent: \"Replicate Red (#ea2804)\"\n- Secondary Text: \"Medium Gray (#646464)\"\n- Muted\u002FDecoration: \"Light Silver (#bbbbbb)\"\n- Status: \"Status Green (#2b9a66)\"\n- Dark Surface: \"Replicate Dark (#202020)\"\n\n### Example Component Prompts\n- \"Create a hero section with a vibrant orange-red-magenta gradient background. Headline at 72px rb-freigeist-neue weight 700, white text, -1.8px letter-spacing. Include a dark pill CTA button and a white outlined pill button.\"\n- \"Design a model card with pill-shaped (9999px) image container, model name at 16px basier-square weight 600, run count at 14px in Medium Gray. Border: 1px solid #202020.\"\n- \"Build a status badge: pill-shaped (9999px), Status Green (#2b9a66) background, white text at 14px basier-square.\"\n- \"Create a manifesto section on Replicate Dark (#202020) with 'Imagine what you can build.' at 128px rb-freigeist-neue weight 700, white text. Embed small AI-generated images between the words.\"\n- \"Design a code block: dark background (#24292e), JetBrains Mono at 14px, white text. Pill-shaped container.\"\n\n### Iteration Guide\n1. Everything is pill-shaped — never specify any other border-radius\n2. Display text is HEAVY — weight 700, sizes 48px+\n3. Links use dotted underline (#bbbbbb) — never solid\n4. The gradient hero is the visual anchor — make it bold\n5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Replicate (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-replicate-dark: #202020;\n    --color-replicate-red: #ea2804;\n    --color-secondary-red: #dd4425;\n    --color-status-green: #2b9a66;\n    --color-github-dark: #24292e;\n    --color-white: #ffffff;\n    --color-near-white: #fcfcfc;\n    --color-medium-gray: #646464;\n    --color-warm-gray: #4e4e4e;\n    --color-mid-silver: #8d8d8d;\n    --color-light-silver: #bbbbbb;\n    --color-pure-black: #000000;\n    --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Light mode *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-nav: rgba(255,255,255,0.95);\n    --text-primary: #202020;\n    --text-secondary: #646464;\n    --text-muted: #8d8d8d;\n    --border-color: #202020;\n    --border-subtle: #e0e0e0;\n    --section-label-color: var(--color-replicate-red);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .logo-icon {\n    width: 20px;\n    height: 20px;\n    background: var(--color-replicate-red);\n    border-radius: 9999px;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: underline dotted var(--color-light-silver);\n    text-underline-offset: 4px;\n    font-size: 14px;\n    font-weight: 500;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-replicate-red); }\n  .nav-cta {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    padding: 8px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    outline: 4px solid var(--color-replicate-dark);\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: linear-gradient(135deg, #ea2804 0%, #d42020 25%, #c41858 50%, #e0407a 75%, #f06090 100%);\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 72px;\n    font-weight: 700;\n    line-height: 1.0;\n    letter-spacing: -1.8px;\n    margin-bottom: 24px;\n    color: #ffffff;\n    position: relative;\n  }\n  .hero p {\n    color: rgba(255,255,255,0.85);\n    font-size: 20px;\n    line-height: 1.4;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-hero-dark {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    padding: 12px 32px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n    outline: 4px solid var(--color-replicate-dark);\n  }\n  .btn-hero-outlined {\n    background: rgba(255,255,255,0.15);\n    color: #ffffff;\n    padding: 12px 32px;\n    border: 1px solid rgba(255,255,255,0.4);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 700;\n    line-height: 1.0;\n    letter-spacing: -0.5px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n    border-radius: 9999px 9999px 0 0;\n  }\n  .color-swatch-info {\n    padding: 12px 16px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n  }\n  .btn-dark-solid {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    padding: 12px 32px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n    outline: 4px solid var(--color-replicate-dark);\n  }\n  .btn-white-outlined {\n    background: var(--color-white);\n    color: var(--color-replicate-dark);\n    padding: 12px 32px;\n    border: 1px solid var(--color-replicate-dark);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-frosted-glass {\n    background: rgba(255,255,255,0.1);\n    color: var(--color-replicate-dark);\n    padding: 6px 56px 6px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    outline: 1px solid var(--color-light-silver);\n  }\n  .btn-red-accent {\n    background: transparent;\n    color: var(--color-replicate-red);\n    padding: 12px 32px;\n    border: 1px solid var(--color-replicate-red);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-status {\n    background: var(--color-status-green);\n    color: #ffffff;\n    padding: 6px 18px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 9999px;\n    padding: 28px 32px;\n  }\n  .card-standard { border: 1px solid var(--color-replicate-dark); }\n  .card-accent { border: 1px solid var(--color-replicate-red); }\n  .card-dark {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    border: 1px solid var(--color-warm-gray);\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 30px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }\n  .card-dark p { color: var(--color-light-silver); }\n  .card-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n    color: var(--color-replicate-red);\n    margin-bottom: 16px;\n  }\n  .card-dark .card-label { color: var(--color-replicate-red); }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-github-dark);\n    border: 1px solid var(--color-warm-gray);\n    border-radius: 9999px;\n    padding: 20px 32px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.43;\n    color: #e6edf3;\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: #ff7b72; }\n  .code-block .string { color: #a5d6ff; }\n  .code-block .comment { color: #8b949e; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(234,40,4,0.08);\n    border: 1px solid rgba(234,40,4,0.25);\n    border-radius: 9999px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 9999px;\n    padding: 24px 28px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--color-replicate-dark); }\n  .elevation-accent-border { border: 1px solid var(--color-replicate-red); }\n  .elevation-gradient {\n    background: linear-gradient(135deg, #ea2804, #c41858, #e0407a);\n    color: #ffffff;\n  }\n  .elevation-dark-section {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    border: 1px solid var(--color-warm-gray);\n  }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-gradient .elevation-desc,\n  .elevation-dark-section .elevation-desc { color: rgba(255,255,255,0.75); }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-replicate-red);\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n    margin-top: 12px;\n  }\n  .elevation-gradient .elevation-level,\n  .elevation-dark-section .elevation-level { color: rgba(255,255,255,0.6); }\n\n  \u002F* DOTTED LINK STYLE *\u002F\n  .dotted-link {\n    color: var(--text-primary);\n    text-decoration: underline dotted var(--color-light-silver);\n    text-underline-offset: 4px;\n    cursor: pointer;\n  }\n  .dotted-link:hover { color: var(--color-replicate-red); }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 42px; letter-spacing: -1px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cdiv class=\"logo-icon\">\u003C\u002Fdiv> Replicate\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Sign In\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Replicate\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-hero-dark\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-hero-outlined\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #202020;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Replicate Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#202020\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, dark surfaces, borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ea2804;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Replicate Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ea2804\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand, hero gradient, accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #dd4425;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Secondary Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#dd4425\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders, link hover states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2b9a66;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Status Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2b9a66\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Running\u002Foperational status badges\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #24292e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">GitHub Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#24292e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Code block backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #e0e0e0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page body background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fcfcfc; border-bottom: 1px solid #e0e0e0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fcfcfc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: linear-gradient(135deg, #ea2804, #c41858, #e0407a, #f06090);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Hero Blaze Gradient\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">multi-stop\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hero section, maximum visual impact\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #646464;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Medium Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#646464\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4e4e4e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4e4e4e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Emphasized secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #8d8d8d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#8d8d8d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, footnotes\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #bbbbbb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#bbbbbb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dotted-underline link decoration\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Maximum-emphasis borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -1.8px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 72px \u002F 700 \u002F 1.00 \u002F -1.8px — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.0;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 400-700 \u002F 1.00 \u002F normal — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.2;\">Sub-heading Display\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 30px \u002F 600 \u002F 1.20 \u002F normal — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 38.4px; font-weight: 400; line-height: 0.83;\">Sub-heading Sans\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Sans — 38.4px \u002F 400 \u002F 0.83 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.56;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 18px \u002F 600 \u002F 1.56 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.4;\">Body large text for intro paragraphs. Basier-square at 400 weight provides quiet geometric precision for all readable content.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;\">Standard body text for paragraphs, navigation, and button labels. The workhorse of the type system.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400-600 \u002F 1.50 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata descriptions for model cards\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400-600 \u002F 1.43 \u002F -0.35px — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.33; text-transform: lowercase; color: var(--text-muted);\">small tag \u002F lowercase transform\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small \u002F Tag — 12px \u002F 400 \u002F 1.33 \u002F normal \u002F lowercase — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;\">replicate.run(\"stability-ai\u002Fsdxl\", input={\"prompt\": \"...\"})\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 14px \u002F 400 \u002F 1.43 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.5;\">import replicate\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 11px \u002F 400 \u002F 1.50 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-solid\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">dark solid pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-outlined\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">white outlined pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-frosted-glass\">Search models...\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">frosted glass \u002F search\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-red-accent\">Highlighted\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">red accent pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-status\">running\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">status badge\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\"># Run a model with Replicate\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">import\u003C\u002Fspan> replicate\u003Cbr>\n    output = replicate.\u003Cspan class=\"keyword\">run\u003C\u002Fspan>(\u003Cspan class=\"string\">\"stability-ai\u002Fsdxl\"\u003C\u002Fspan>)\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">standard card\u003C\u002Fdiv>\n      \u003Ch3>Hard Border Pill\u003C\u002Fh3>\n      \u003Cp>Content card with 1px solid #202020 border and 9999px pill radius. The default container for model galleries and feature sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-accent\">\n      \u003Cdiv class=\"card-label\">accent highlighted\u003C\u002Fdiv>\n      \u003Ch3>Red Accent Border\u003C\u002Fh3>\n      \u003Cp>Featured or highlighted card with 1px solid Replicate Red border. Used for promoted models and primary emphasis.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark\">\n      \u003Cdiv class=\"card-label\">dark surface\u003C\u002Fdiv>\n      \u003Ch3>Dark Section Card\u003C\u002Fh3>\n      \u003Cp>Dark background card for manifesto-style sections, code examples, and high-contrast feature showcases.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 1px to 192px with generous section spacing.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Replicate uses exclusively pill-shaped geometry. There is only ONE radius in the entire system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Pill — the ONLY radius\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 120px; height: 60px; background: var(--color-replicate-dark);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 160px; height: 80px; border-color: var(--color-replicate-red);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 40px; height: 40px; background: var(--color-status-green);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 80px; height: 80px; background: linear-gradient(135deg, #ea2804, #e0407a);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. White body and inline text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #202020. Cards, buttons, containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-accent-border\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Accent Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #ea2804. Featured and highlighted items.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-gradient\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Gradient Hero\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-width blaze gradient for maximum visual impact.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dark-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Dark Section\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark bg #202020 with light text. Manifesto, footer, features.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Replicate (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-replicate-dark: #202020;\n    --color-replicate-red: #ea2804;\n    --color-secondary-red: #dd4425;\n    --color-status-green: #2b9a66;\n    --color-github-dark: #24292e;\n    --color-white: #ffffff;\n    --color-near-white: #fcfcfc;\n    --color-medium-gray: #646464;\n    --color-warm-gray: #4e4e4e;\n    --color-mid-silver: #8d8d8d;\n    --color-light-silver: #bbbbbb;\n    --color-pure-black: #000000;\n    --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Dark mode *\u002F\n    --bg-page: #202020;\n    --bg-card: #2a2a2a;\n    --bg-nav: rgba(32,32,32,0.95);\n    --text-primary: #fcfcfc;\n    --text-secondary: #bbbbbb;\n    --text-muted: #8d8d8d;\n    --border-color: #4e4e4e;\n    --border-subtle: #3a3a3a;\n    --section-label-color: var(--color-replicate-red);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .logo-icon {\n    width: 20px;\n    height: 20px;\n    background: var(--color-replicate-red);\n    border-radius: 9999px;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: underline dotted var(--color-warm-gray);\n    text-underline-offset: 4px;\n    font-size: 14px;\n    font-weight: 500;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-replicate-red); }\n  .nav-cta {\n    background: var(--color-near-white);\n    color: var(--color-replicate-dark);\n    padding: 8px 24px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: linear-gradient(135deg, #ea2804 0%, #d42020 25%, #c41858 50%, #e0407a 75%, #f06090 100%);\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 72px;\n    font-weight: 700;\n    line-height: 1.0;\n    letter-spacing: -1.8px;\n    margin-bottom: 24px;\n    color: #ffffff;\n    position: relative;\n  }\n  .hero p {\n    color: rgba(255,255,255,0.85);\n    font-size: 20px;\n    line-height: 1.4;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-hero-dark {\n    background: var(--color-replicate-dark);\n    color: var(--color-near-white);\n    padding: 12px 32px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n    outline: 4px solid var(--color-replicate-dark);\n  }\n  .btn-hero-outlined {\n    background: rgba(255,255,255,0.15);\n    color: #ffffff;\n    padding: 12px 32px;\n    border: 1px solid rgba(255,255,255,0.4);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    backdrop-filter: blur(8px);\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 48px;\n    font-weight: 700;\n    line-height: 1.0;\n    letter-spacing: -0.5px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n    border-radius: 9999px 9999px 0 0;\n  }\n  .color-swatch-info {\n    padding: 12px 16px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n  }\n  .btn-dark-solid {\n    background: var(--color-near-white);\n    color: var(--color-replicate-dark);\n    padding: 12px 32px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-white-outlined {\n    background: transparent;\n    color: var(--color-near-white);\n    padding: 12px 32px;\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-frosted-glass {\n    background: rgba(255,255,255,0.08);\n    color: var(--color-light-silver);\n    padding: 6px 56px 6px 28px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 400;\n    cursor: pointer;\n    outline: 1px solid var(--color-warm-gray);\n  }\n  .btn-red-accent {\n    background: transparent;\n    color: var(--color-replicate-red);\n    padding: 12px 32px;\n    border: 1px solid var(--color-replicate-red);\n    border-radius: 9999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .btn-status {\n    background: var(--color-status-green);\n    color: #ffffff;\n    padding: 6px 18px;\n    border: none;\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 9999px;\n    padding: 28px 32px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-accent { border: 1px solid var(--color-replicate-red); }\n  .card-darker {\n    background: #1a1a1a;\n    color: var(--color-near-white);\n    border: 1px solid #3a3a3a;\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 30px;\n    font-weight: 600;\n    line-height: 1.2;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }\n  .card-darker p { color: var(--color-mid-silver); }\n  .card-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n    color: var(--color-replicate-red);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: #1a1a1a;\n    border: 1px solid var(--border-color);\n    border-radius: 9999px;\n    padding: 20px 32px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.43;\n    color: #e6edf3;\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: #ff7b72; }\n  .code-block .string { color: #a5d6ff; }\n  .code-block .comment { color: #8b949e; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(234,40,4,0.12);\n    border: 1px solid rgba(234,40,4,0.3);\n    border-radius: 9999px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 9999px;\n    padding: 24px 28px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--border-color); }\n  .elevation-accent-border { border: 1px solid var(--color-replicate-red); }\n  .elevation-gradient {\n    background: linear-gradient(135deg, #ea2804, #c41858, #e0407a);\n    color: #ffffff;\n  }\n  .elevation-dark-section {\n    background: #1a1a1a;\n    color: var(--color-near-white);\n    border: 1px solid #3a3a3a;\n  }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-gradient .elevation-desc,\n  .elevation-dark-section .elevation-desc { color: rgba(255,255,255,0.75); }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-replicate-red);\n    text-transform: lowercase;\n    letter-spacing: 0.3px;\n    margin-top: 12px;\n  }\n  .elevation-gradient .elevation-level,\n  .elevation-dark-section .elevation-level { color: rgba(255,255,255,0.6); }\n\n  \u002F* DOTTED LINK STYLE *\u002F\n  .dotted-link {\n    color: var(--text-primary);\n    text-decoration: underline dotted var(--color-warm-gray);\n    text-underline-offset: 4px;\n    cursor: pointer;\n  }\n  .dotted-link:hover { color: var(--color-replicate-red); }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 42px; letter-spacing: -1px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 36px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cdiv class=\"logo-icon\">\u003C\u002Fdiv> Replicate\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Sign In\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Replicate\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-hero-dark\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-hero-outlined\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #202020; border-bottom: 1px solid #4e4e4e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Replicate Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#202020\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, dark surfaces, borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ea2804;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Replicate Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ea2804\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand, hero gradient, accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #dd4425;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Secondary Red\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#dd4425\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders, link hover states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2b9a66;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Status Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2b9a66\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Running\u002Foperational status badges\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #24292e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">GitHub Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#24292e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Code block backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #4e4e4e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light mode page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fcfcfc; border-bottom: 1px solid #4e4e4e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fcfcfc\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: linear-gradient(135deg, #ea2804, #c41858, #e0407a, #f06090);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Hero Blaze Gradient\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">multi-stop\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hero section, maximum visual impact\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #646464;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Medium Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#646464\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4e4e4e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4e4e4e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Emphasized secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #8d8d8d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#8d8d8d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, footnotes\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #bbbbbb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#bbbbbb\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dotted-underline link decoration\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Maximum-emphasis borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -1.8px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 72px \u002F 700 \u002F 1.00 \u002F -1.8px — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.0;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 48px \u002F 400-700 \u002F 1.00 \u002F normal — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.2;\">Sub-heading Display\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 30px \u002F 600 \u002F 1.20 \u002F normal — rb-freigeist-neue (system-ui fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 38.4px; font-weight: 400; line-height: 0.83;\">Sub-heading Sans\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Sans — 38.4px \u002F 400 \u002F 0.83 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.56;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 18px \u002F 600 \u002F 1.56 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.4;\">Body large text for intro paragraphs. Basier-square at 400 weight provides quiet geometric precision for all readable content.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5;\">Standard body text for paragraphs, navigation, and button labels. The workhorse of the type system.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400-600 \u002F 1.50 \u002F normal — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata descriptions for model cards\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 400-600 \u002F 1.43 \u002F -0.35px — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.33; text-transform: lowercase; color: var(--text-muted);\">small tag \u002F lowercase transform\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small \u002F Tag — 12px \u002F 400 \u002F 1.33 \u002F normal \u002F lowercase — basier-square (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;\">replicate.run(\"stability-ai\u002Fsdxl\", input={\"prompt\": \"...\"})\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 14px \u002F 400 \u002F 1.43 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.5;\">import replicate\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 11px \u002F 400 \u002F 1.50 \u002F normal — JetBrains Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-solid\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">light solid pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-white-outlined\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">outlined pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-frosted-glass\">Search models...\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">frosted glass \u002F search\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-red-accent\">Highlighted\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">red accent pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-status\">running\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">status badge\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\"># Run a model with Replicate\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">import\u003C\u002Fspan> replicate\u003Cbr>\n    output = replicate.\u003Cspan class=\"keyword\">run\u003C\u002Fspan>(\u003Cspan class=\"string\">\"stability-ai\u002Fsdxl\"\u003C\u002Fspan>)\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">standard card\u003C\u002Fdiv>\n      \u003Ch3>Border Pill Card\u003C\u002Fh3>\n      \u003Cp>Content card with 1px solid #4e4e4e border and 9999px pill radius. The default container for model galleries and feature sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-accent\">\n      \u003Cdiv class=\"card-label\">accent highlighted\u003C\u002Fdiv>\n      \u003Ch3>Red Accent Border\u003C\u002Fh3>\n      \u003Cp>Featured or highlighted card with 1px solid Replicate Red border. Used for promoted models and primary emphasis.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-darker\">\n      \u003Cdiv class=\"card-label\">deep surface\u003C\u002Fdiv>\n      \u003Ch3>Deep Dark Card\u003C\u002Fh3>\n      \u003Cp>Deeper dark background for manifesto-style sections, code examples, and high-contrast feature showcases.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale from 1px to 192px with generous section spacing.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Replicate uses exclusively pill-shaped geometry. There is only ONE radius in the entire system.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Pill — the ONLY radius\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 120px; height: 60px; background: var(--color-near-white);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 160px; height: 80px; border-color: var(--color-replicate-red);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 40px; height: 40px; background: var(--color-status-green);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px; width: 80px; height: 80px; background: linear-gradient(135deg, #ea2804, #e0407a);\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Dark body and inline text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #4e4e4e. Cards, buttons, containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-accent-border\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Accent Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #ea2804. Featured and highlighted items.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-gradient\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Gradient Hero\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-width blaze gradient for maximum visual impact.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dark-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Deep Dark\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Deeper dark surface for manifesto, footer, feature sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Replicate Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Freplicate\u002FDESIGN.md) extracted from the public [Replicate](https:\u002F\u002Freplicate.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Freplicate\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Replicate design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Replicate Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Freplicate\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Replicate Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Freplicate\u002Fpreview-screenshot.png)\n",{"slug":278,"name":279,"category":90,"designMd":280,"previewHtml":281,"previewDarkHtml":282,"readme":283},"resend","Resend","# Design System Inspiration of Resend\n\n## 1. Visual Theme & Atmosphere\n\nResend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.\n\nThe typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.\n\nWhat makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss04\"`, `\"ss11\"`), the result is a design system that feels premium, precise, and quietly confident.\n\n**Key Characteristics:**\n- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness\n- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body\u002FUI)\n- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer\n- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales\n- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds\n- OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss04\"`, `\"ss11\"`) on display fonts\n- Commit Mono for code — monospace as a design element, not an afterthought\n- Whisper-level shadows using blue-tinted ring: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Void Black** (`#000000`): Page background, the defining canvas color (95% opacity via `--color-black-12`)\n- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements\n- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link highlights\n\n### Accent Scale — Orange\n- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm glow\n- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm, energetic\n- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary use\n\n### Accent Scale — Green\n- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald wash\n- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator glow\n\n### Accent Scale — Blue\n- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent\n- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue\n- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive elements\n\n### Accent Scale — Other\n- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or highlights\n- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states, destructive actions\n\n### Neutral Scale\n- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions\n- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content\n- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis\n- **Medium Gray** (`#494949`): Quaternary text\n- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)\n- **Border Gray** (`#eaeaea`): Light context borders\n- **Edge Gray** (`#ececec`): Subtle borders on light surfaces\n- **Mist Gray** (`#dedfdf`): Light dividers\n- **Soft Gray** (`#e5e6e6`): Alternate light border\n\n### Surface & Overlay\n- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94% opacity)\n- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark\n- **White 60%** (`oklab(0.999994 ... \u002F 0.577)`): Semi-transparent white for muted text\n- **White 64%** (`oklab(0.999994 ... \u002F 0.642)`): Slightly brighter semi-transparent white\n\n### Borders & Shadows\n- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy blue-tinted borders at 19% opacity\n- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant for list items\n- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted shadow-as-border\n- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring\n- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`): Minimal card elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero headlines\n- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks: `ui-sans-serif, system-ui` — section headings\n- **Body \u002F UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text, buttons, navigation\n- **Monospace**: `commitMono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`\n- **Secondary**: `Helvetica` — fallback for specific UI contexts\n- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `\"ss01\", \"ss04\", \"ss11\"` |\n| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |\n| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `\"ss01\", \"ss04\", \"ss11\"` |\n| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `\"ss01\", \"ss04\", \"ss11\"` |\n| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `\"ss01\", \"ss04\", \"ss11\"` |\n| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |\n| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |\n| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |\n| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `\"ss01\", \"ss03\", \"ss04\"` — positive tracking |\n| Button \u002F Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |\n| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |\n| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |\n| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |\n| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |\n| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |\n| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |\n| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |\n| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |\n\n### Principles\n- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.\n- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.\n- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.\n- **OpenType as identity**: The `\"ss01\"`, `\"ss03\"`, `\"ss04\"`, `\"ss11\"` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.\n- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Transparent Pill**\n- Background: transparent\n- Text: `#f0f0f0`\n- Padding: 5px 12px\n- Radius: 9999px (full pill)\n- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)\n- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)\n- Use: Primary CTA on dark backgrounds\n\n**White Solid Pill**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 5px 12px\n- Radius: 9999px\n- Use: High-contrast CTA (\"Get started\")\n\n**Ghost Button**\n- Background: transparent\n- Text: `#f0f0f0`\n- Radius: 4px\n- No border\n- Hover: subtle background tint\n- Use: Secondary actions, tab items\n\n### Cards & Containers\n- Background: transparent or very subtle dark tint\n- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)\n- Radius: 16px (standard cards), 24px (large sections\u002Fpanels)\n- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)\n- Dark product screenshots and code demos as card content\n- No traditional box-shadow elevation\n\n### Inputs & Forms\n- Text: `#f0f0f0` on dark, `#000000` on light\n- Radius: 4px\n- Focus: shadow-based ring\n- Minimal styling — inherits dark theme\n\n### Navigation\n- Sticky dark header with frost border bottom: `1px solid rgba(214, 235, 253, 0.19)`\n- \"Resend\" wordmark left-aligned\n- ABC Favorit 14px weight 500 with +0.35px tracking for nav links\n- Pill CTAs right-aligned\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Product screenshots and code demos dominate content sections\n- Dark-themed screenshots on dark background — seamless integration\n- Rounded corners: 12px–16px on images\n- Full-width sections with subtle gradient overlays\n\n### Distinctive Components\n\n**Tab Navigation**\n- Horizontal tabs with subtle selection indicator\n- Tab items: 8px radius\n- Active state with subtle background differentiation\n\n**Code Preview Panels**\n- Dark code blocks using Commit Mono\n- Frost borders (`rgba(214, 235, 253, 0.19)`)\n- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)\n\n**Multi-color Accent Badges**\n- Each product feature has its own accent color from the CSS variable scale\n- Badges use the accent color at low opacity (12–42%) for background, full opacity for text\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px\n\n### Grid & Container\n- Centered content with generous max-width\n- Full-width black sections with contained inner content\n- Single-column hero, expanding to feature grids below\n- Code preview panels as full-width or contained showcases\n\n### Whitespace Philosophy\n- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.\n- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated \"islands\" of content.\n- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.\n\n### Border Radius Scale\n- Sharp (4px): Buttons (ghost), inputs, small interactive elements\n- Subtle (6px): Menu panels, navigation items\n- Standard (8px): Tabs, content blocks\n- Comfortable (10px): Accent elements\n- Card (12px): Clipboard buttons, medium containers\n- Large (16px): Feature cards, images, main buttons\n- Section (24px): Large panels, section containers\n- Pill (9999px): Primary CTAs, tags, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |\n| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Shadow-as-border for cards, containers |\n| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | Explicit borders — buttons, dividers, tabs |\n| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation |\n| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | Heavy black focus ring — accessibility |\n\n**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a \"glass panel floating in space\" aesthetic where borders are the primary depth mechanism.\n\n### Decorative Depth\n- Subtle warm gradient glows behind hero content (orange\u002Famber tints)\n- Product screenshots create visual depth through their own internal UI\n- No gradient backgrounds — depth comes from border luminance and content contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (`#000000`) as the page background — the void is the canvas\n- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines — they're the blue-tinted signature\n- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else\n- Enable OpenType `\"ss01\"`, `\"ss04\"`, `\"ss11\"` on Domaine and ABC Favorit text\n- Apply pill radius (9999px) to primary CTAs and tags\n- Use the multi-color accent scale (orange\u002Fgreen\u002Fblue\u002Fyellow\u002Fred) with opacity variants for context-specific highlighting\n- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows don't work\n- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking\n\n### Don't\n- Don't lighten the background above `#000000` — the pure black void is non-negotiable\n- Don't use neutral gray borders — all borders must have the frost blue tint\n- Don't apply Domaine Display to body text — it's a display-only serif\n- Don't mix accent colors in the same component — each feature gets one accent color\n- Don't use box-shadow for elevation on the dark background — use frost borders instead\n- Don't skip the OpenType stylistic sets — they define the typographic character\n- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px\n- Don't make buttons opaque on dark — transparency with frost border is the pattern\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C480px | Single column, tight padding, 76.8px hero |\n| Mobile | 480–600px | Standard mobile, stacked layout |\n| Desktop | >600px | Full layout, 96px hero, expanded sections |\n\n*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*\n\n### Touch Targets\n- Pill buttons: adequate padding (5px 12px minimum)\n- Tab items: 8px radius with comfortable hit areas\n- Navigation links spaced with 0.35px tracking for visual separation\n\n### Collapsing Strategy\n- Hero: Domaine 96px → 76.8px on mobile\n- Navigation: horizontal → hamburger\n- Feature sections: side-by-side → stacked\n- Code panels: maintain width, horizontal scroll if needed\n- Spacing compresses proportionally\n\n### Image Behavior\n- Product screenshots maintain aspect ratio\n- Dark screenshots blend seamlessly with dark background at all sizes\n- Rounded corners (12px–16px) maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Void Black (`#000000`)\n- Primary text: Near White (`#f0f0f0`)\n- Secondary text: Silver (`#a1a4a5`)\n- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)\n- Orange accent: `#ff801f`\n- Green accent: `#11ff99` (at 18% opacity)\n- Blue accent: `#3b9eff`\n- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`\n\n### Example Component Prompts\n- \"Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19)).\"\n- \"Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned.\"\n- \"Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text.\"\n- \"Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d).\"\n- \"Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500.\"\n\n### Iteration Guide\n1. Start with pure black — everything floats in the void\n2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral\n3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross\n4. OpenType stylistic sets are mandatory on display fonts — they define the character\n5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text\n6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers\n7. No shadows — use frost borders for depth against the void\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Resend (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --void: #000000;\n    --near-white: #f0f0f0;\n    --white: #ffffff;\n    --silver: #a1a4a5;\n    --dark-gray: #464a4d;\n    --mid-gray: #5c5c5c;\n    --orange-10: #ff801f;\n    --orange-11: #ffa057;\n    --green-4: #11ff99;\n    --blue-10: #3b9eff;\n    --yellow-9: #ffc53d;\n    --red-5: #ff2047;\n    --frost-border: rgba(214, 235, 253, 0.19);\n    --frost-border-alt: rgba(217, 237, 254, 0.145);\n    --ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;\n    --font-serif: 'DM Serif Display', Georgia, serif;\n    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--void);\n    color: var(--near-white);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(0,0,0,0.85);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--frost-border);\n  }\n  .nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--near-white); }\n  .nav-cta {\n    display: inline-block; background: var(--white); color: var(--void);\n    padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  .hero {\n    padding: 100px 32px 80px; text-align: center;\n    position: relative; overflow: hidden;\n  }\n  .hero::before {\n    content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);\n    width: 600px; height: 400px;\n    background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);\n    pointer-events: none;\n  }\n  .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }\n  .hero h1 {\n    font-family: var(--font-serif); font-size: 88px; font-weight: 400;\n    line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-white {\n    display: inline-block; background: var(--white); color: var(--void);\n    padding: 8px 20px; border-radius: 9999px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-white:hover { opacity: 0.85; }\n  .btn-frost {\n    display: inline-block; background: transparent; color: var(--near-white);\n    padding: 8px 20px; border-radius: 9999px;\n    border: 1px solid var(--frost-border);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-frost:hover { background: rgba(255,255,255,0.08); }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--near-white);\n    padding: 8px 14px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer;\n  }\n\n  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }\n  .section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }\n\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }\n\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }\n\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }\n  .card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }\n  .card:hover { border-color: rgba(214,235,253,0.35); }\n  .card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--silver); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }\n\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: transparent; color: var(--near-white);\n    border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--blue-10); }\n  .form-input--focus { border-color: var(--blue-10); }\n  .form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: transparent; color: var(--near-white);\n    border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }\n\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n  .radius-context { font-size: 9px; color: var(--dark-gray); }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }\n  .footer a { color: var(--orange-10); text-decoration: underline; }\n\n  @media (max-width: 600px) {\n    .hero h1 { font-size: 56px; letter-spacing: -0.56px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-content\">\n    \u003Ch1>Design System\u003Cbr>Inspired by Resend\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-white\" href=\"#\">Get Started\u003C\u002Fa>\n      \u003Ca class=\"btn-frost\" href=\"#\">Documentation\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0f0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0f0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Maximum emphasis\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff801f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff801f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary orange accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffa057\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 11\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffa057\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light orange\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#11ff99\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#11ff99\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success \u002F green accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3b9eff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3b9eff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Interactive blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc53d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc53d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning \u002F gold\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff2047\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff2047\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error \u002F destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a1a4a5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a1a4a5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5c5c5c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5c5c5c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#464a4d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#464a4d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Frost Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(214,235,253,0.19)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Signature icy border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.28)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.28)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 96px \u002F 400 \u002F 1.00 \u002F -0.96px \u002F Domaine Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 56px \u002F 400 \u002F 1.20 \u002F -2.8px \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;\">Sub-heading text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 20px \u002F 400 \u002F 1.30 \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature Title — 24px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;\">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;\">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;\">Nav Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav Link — 14px \u002F 500 \u002F 1.43 \u002F +0.35px \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;\">Button \u002F Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;\">Small Uppercase\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small Uppercase — 12px \u002F 500 \u002F uppercase \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);\">resend.emails.send({ to: 'user@example.com' })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body — 16px \u002F 400 \u002F 1.50 \u002F Commit Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);\">npm install resend\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Small — 12px \u002F 400 \u002F 1.33 \u002F Commit Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Solid Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-frost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Frost Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Email API\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Accent Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Webhooks\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Blue Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Delivered\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Green Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,128,31,0.12); color:var(--orange-10);\">Email API\u003C\u002Fdiv>\n      \u003Ch3>First-class developer experience\u003C\u002Fh3>\n      \u003Cp>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: rgba(214,235,253,0.35);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(59,158,255,0.12); color:var(--blue-10);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Reach humans, not spam\u003C\u002Fh3>\n      \u003Cp>Deliver transactional emails at scale. Card shown with brighter frost border on hover.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-radius: 24px;\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(17,255,153,0.12); color:var(--green-4);\">Section\u003C\u002Fdiv>\n      \u003Ch3>React Email\u003C\u002Fh3>\n      \u003Cp>Build beautiful emails using React components. 24px radius section panel variant.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"re_123456789\">\u003Cdiv class=\"form-state-label\">Default (frost border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">To Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@example.com\">\u003Cdiv class=\"form-state-label\">Focus (blue border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-domain\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Body\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Write your email content...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Menus\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tabs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(214,235,253,0.08);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — void background\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue-tinted ring shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(214,235,253,0.19);\">\u003Cdiv class=\"elevation-label\">Level 1b: Frost\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Icy frost border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;\">\u003Cdiv class=\"elevation-label\">Level 2: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Minimal card elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(0,0,0) 0px 0px 0px 8px;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy black focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fresend.com\u002F\">resend.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Resend (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&family=DM+Serif+Display&family=Commit+Mono&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --void: #050505;\n    --near-white: #f0f0f0;\n    --white: #ffffff;\n    --silver: #a1a4a5;\n    --dark-gray: #464a4d;\n    --mid-gray: #5c5c5c;\n    --orange-10: #ff801f;\n    --orange-11: #ffa057;\n    --green-4: #11ff99;\n    --blue-10: #3b9eff;\n    --yellow-9: #ffc53d;\n    --red-5: #ff2047;\n    --frost-border: rgba(214, 235, 253, 0.19);\n    --frost-border-alt: rgba(217, 237, 254, 0.145);\n    --ring-shadow: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px;\n    --font-serif: 'DM Serif Display', Georgia, serif;\n    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--void);\n    color: var(--near-white);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(5,5,5,0.9);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--frost-border);\n  }\n  .nav-brand { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--near-white); text-decoration: none; letter-spacing: 0.35px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--silver); text-decoration: none; letter-spacing: 0.35px; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--near-white); }\n  .nav-cta {\n    display: inline-block; background: var(--white); color: var(--void);\n    padding: 5px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  .hero {\n    padding: 100px 32px 80px; text-align: center;\n    position: relative; overflow: hidden;\n  }\n  .hero::before {\n    content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);\n    width: 600px; height: 400px;\n    background: radial-gradient(ellipse, rgba(255,128,31,0.08) 0%, rgba(0,0,0,0) 70%);\n    pointer-events: none;\n  }\n  .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }\n  .hero h1 {\n    font-family: var(--font-serif); font-size: 88px; font-weight: 400;\n    line-height: 1.00; letter-spacing: -0.96px; margin-bottom: 20px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.30; color: var(--silver); max-width: 500px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-white {\n    display: inline-block; background: var(--white); color: var(--void);\n    padding: 8px 20px; border-radius: 9999px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-white:hover { opacity: 0.85; }\n  .btn-frost {\n    display: inline-block; background: transparent; color: var(--near-white);\n    padding: 8px 20px; border-radius: 9999px;\n    border: 1px solid var(--frost-border);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n  }\n  .btn-frost:hover { background: rgba(255,255,255,0.08); }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--near-white);\n    padding: 8px 14px; border-radius: 4px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer;\n  }\n\n  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--mid-gray); text-transform: uppercase; margin-bottom: 8px; }\n  .section-title { font-family: var(--font-sans); font-size: 28px; font-weight: 500; line-height: 1.30; letter-spacing: -1.4px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--frost-border); margin: 0; }\n\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--frost-border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 11px; color: var(--silver); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 10px; color: var(--mid-gray); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 500; color: var(--silver); margin: 24px 0 10px; }\n\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(214,235,253,0.1); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mid-gray); margin-top: 8px; }\n\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); margin-top: 8px; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }\n  .card { background: transparent; border: 1px solid var(--frost-border); border-radius: 16px; padding: 24px; transition: border-color 0.2s; }\n  .card:hover { border-color: rgba(214,235,253,0.35); }\n  .card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--silver); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; margin-bottom: 12px; }\n\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--near-white); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: transparent; color: var(--near-white);\n    border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--blue-10); }\n  .form-input--focus { border-color: var(--blue-10); }\n  .form-input--error { border-color: var(--red-5); box-shadow: 0 0 0 1px rgba(255,32,71,0.3); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: transparent; color: var(--near-white);\n    border: 1px solid var(--frost-border); padding: 8px 12px; border-radius: 4px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 10px; color: var(--mid-gray); margin-top: 4px; }\n\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--orange-10); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 60px; height: 60px; border: 1px solid var(--frost-border); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n  .radius-context { font-size: 9px; color: var(--dark-gray); }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }\n  .elevation-card { background: transparent; border-radius: 12px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 10px; color: var(--mid-gray); }\n\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--frost-border); font-size: 13px; color: var(--silver); }\n  .footer a { color: var(--orange-10); text-decoration: underline; }\n\n  @media (max-width: 600px) {\n    .hero h1 { font-size: 56px; letter-spacing: -0.56px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#ff801f;color:#000000;font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-content\">\n    \u003Ch1>Design System\u003Cbr>Inspired by Resend\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-white\" href=\"#\">Get Started\u003C\u002Fa>\n      \u003Ca class=\"btn-frost\" href=\"#\">Documentation\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Void Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0f0\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0f0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Maximum emphasis\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff801f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff801f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary orange accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffa057\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange 11\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffa057\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light orange\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#11ff99\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green 4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#11ff99\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success \u002F green accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3b9eff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 10\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3b9eff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Interactive blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc53d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow 9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc53d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning \u002F gold\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff2047\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red 5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff2047\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error \u002F destructive\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#a1a4a5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#a1a4a5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5c5c5c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5c5c5c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#464a4d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#464a4d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(214,235,253,0.19); border: 1px solid rgba(214,235,253,0.3)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Frost Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(214,235,253,0.19)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Signature icy border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.28)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.28)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-serif); font-size:88px; font-weight:400; line-height:1.00; letter-spacing:-0.96px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 96px \u002F 400 \u002F 1.00 \u002F -0.96px \u002F Domaine Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:48px; font-weight:400; line-height:1.20; letter-spacing:-2.8px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 56px \u002F 400 \u002F 1.20 \u002F -2.8px \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:20px; font-weight:400; line-height:1.30;\">Sub-heading text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 20px \u002F 400 \u002F 1.30 \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:24px; font-weight:500; line-height:1.50;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature Title — 24px \u002F 500 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:18px; font-weight:400; line-height:1.50;\">Body Large — Email for developers. Build, test, and deliver transactional emails at scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 18px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.50;\">Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43; letter-spacing:0.35px;\">Nav Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav Link — 14px \u002F 500 \u002F 1.43 \u002F +0.35px \u002F ABC Favorit\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.43;\">Button \u002F Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.33; text-transform:uppercase;\">Small Uppercase\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small Uppercase — 12px \u002F 500 \u002F uppercase \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50; color:var(--orange-10);\">resend.emails.send({ to: 'user@example.com' })\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body — 16px \u002F 400 \u002F 1.50 \u002F Commit Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.33; color:var(--silver);\">npm install resend\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Small — 12px \u002F 400 \u002F 1.33 \u002F Commit Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-white\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">White Solid Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-frost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Frost Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(255,128,31,0.15); color:var(--orange-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Email API\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Accent Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(59,158,255,0.15); color:var(--blue-10); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Webhooks\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Blue Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(17,255,153,0.12); color:var(--green-4); padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Delivered\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Green Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,128,31,0.12); color:var(--orange-10);\">Email API\u003C\u002Fdiv>\n      \u003Ch3>First-class developer experience\u003C\u002Fh3>\n      \u003Cp>Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: rgba(214,235,253,0.35);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(59,158,255,0.12); color:var(--blue-10);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Reach humans, not spam\u003C\u002Fh3>\n      \u003Cp>Deliver transactional emails at scale. Card shown with brighter frost border on hover.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-radius: 24px;\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(17,255,153,0.12); color:var(--green-4);\">Section\u003C\u002Fdiv>\n      \u003Ch3>React Email\u003C\u002Fh3>\n      \u003Cp>Build beautiful emails using React components. 24px radius section panel variant.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"re_123456789\">\u003Cdiv class=\"form-state-label\">Default (frost border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">To Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@example.com\">\u003Cdiv class=\"form-state-label\">Focus (blue border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-domain\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Body\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Write your email content...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Menus\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tabs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">24px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:60px; height:60px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(214,235,253,0.08);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — void background\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(176,199,217,0.145) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue-tinted ring shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(214,235,253,0.19);\">\u003Cdiv class=\"elevation-label\">Level 1b: Frost\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Icy frost border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px;\">\u003Cdiv class=\"elevation-label\">Level 2: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Minimal card elevation\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(0,0,0) 0px 0px 0px 8px;\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy black focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fresend.com\u002F\">resend.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Resend Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fresend\u002FDESIGN.md) extracted from the public [Resend](https:\u002F\u002Fresend.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fresend\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Resend design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Resend Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fresend\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Resend Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fresend\u002Fpreview-screenshot.png)\n",{"slug":285,"name":286,"category":75,"designMd":287,"previewHtml":288,"previewDarkHtml":289,"readme":290},"revolut","Revolut","# Design System Inspiration of Revolut\n\n## 1. Visual Theme & Atmosphere\n\nRevolut's website is fintech confidence distilled into pixels — a design system that communicates \"your money is in capable hands\" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.\n\nThe color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.\n\nWhat distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.\n\n**Key Characteristics:**\n- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines\n- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens\n- Universal pill buttons (9999px radius) with generous padding (14px 32px)\n- Inter for body text with positive letter-spacing (0.16px–0.24px)\n- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning\n- Zero shadows detected — depth through color contrast only\n- Tight display line-heights (1.00) with relaxed body (1.50–1.56)\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text\n- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface\n- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface\n\n### Brand \u002F Interactive\n- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue\n- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent\n- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue\n\n### Semantic\n- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error\u002Fdestructive\n- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent\n- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states\n- **Yellow** (`#b09000`): `--rui-color-yellow`, attention\n- **Teal** (`#00a87e`): `--rui-color-teal`, success\u002Fpositive\n- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success\n- **Green Text** (`#006400`): `--website-color-green-text`, green text\n- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational\n- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent\n- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text\n\n### Neutral Scale\n- **Mid Slate** (`#505a63`): Secondary text\n- **Cool Gray** (`#8d969e`): Muted text, tertiary\n- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders\u002Fdividers\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks\n- **Body \u002F UI**: `Inter` — standard system sans\n- **Fallback**: `Arial` for specific button contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |\n| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |\n| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |\n| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |\n| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |\n| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |\n| Nav \u002F UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |\n| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |\n\n### Principles\n- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.\n- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.\n- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark Pill**\n- Background: `#191c1f`\n- Text: `#ffffff`\n- Padding: 14px 32px\n- Radius: 9999px (full pill)\n- Hover: opacity 0.85\n- Focus: `0 0 0 0.125rem` ring\n\n**Secondary Light Pill**\n- Background: `#f4f4f4`\n- Text: `#000000`\n- Padding: 14px 34px\n- Radius: 9999px\n- Hover: opacity 0.85\n\n**Outlined Pill**\n- Background: transparent\n- Text: `#191c1f`\n- Border: `2px solid #191c1f`\n- Padding: 14px 32px\n- Radius: 9999px\n\n**Ghost on Dark**\n- Background: `rgba(244, 244, 244, 0.1)`\n- Text: `#f4f4f4`\n- Border: `2px solid #f4f4f4`\n- Padding: 14px 32px\n- Radius: 9999px\n\n### Cards & Containers\n- Radius: 12px (small), 20px (cards)\n- No shadows — flat surfaces with color contrast\n- Dark and light section alternation\n\n### Navigation\n- Aeonik Pro 20px weight 500\n- Clean header, hamburger toggle at 12px radius\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px\n- Large section spacing: 80px–120px\n\n### Border Radius Scale\n- Standard (12px): Navigation, small buttons\n- Card (20px): Feature cards\n- Pill (9999px): All buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |\n| Focus | `0 0 0 0.125rem` ring | Accessibility focus |\n\n**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark\u002Flight section contrast and the generous whitespace between elements.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Aeonik Pro weight 500 for all display headings\n- Apply 9999px radius to all buttons — pill shape is universal\n- Use generous button padding (14px 32px)\n- Keep the palette to near-black + white for marketing surfaces\n- Apply positive letter-spacing on Inter body text\n\n### Don't\n- Don't use shadows — Revolut is flat by design\n- Don't use bold (700) for Aeonik Pro headings — 500 is the weight\n- Don't use small buttons — the generous padding is intentional\n- Don't apply semantic colors to marketing surfaces — they're for the product\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C400px | Compact, single column |\n| Mobile | 400–720px | Standard mobile |\n| Tablet | 720–1024px | 2-column layouts |\n| Desktop | 1024–1280px | Standard desktop |\n| Large | 1280–1920px | Full layout |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark: Revolut Dark (`#191c1f`)\n- Light: White (`#ffffff`)\n- Surface: Light (`#f4f4f4`)\n- Blue: Revolut Blue (`#494fdf`)\n- Danger: Red (`#e23b4a`)\n- Success: Teal (`#00a87e`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f).\"\n- \"Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85.\"\n\n### Iteration Guide\n1. Aeonik Pro 500 for headings — never bold\n2. All buttons are pills (9999px) with generous padding\n3. Zero shadows — flat is the Revolut identity\n4. Near-black + white for marketing, semantic colors for product\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Revolut (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#ffffff; --dark:#191c1f; --light:#f4f4f4; --blue:#494fdf; --action:#4f55f1;\n    --danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;\n    --gray:#8d969e; --slate:#505a63; --border:#c9c9cd;\n    --font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:var(--white); }\n  .nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.7; }\n  .nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .hero { padding:80px 32px; text-align:center; }\n  .hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }\n  .hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-dark:hover { opacity:0.85; }\n  .btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-light:hover { opacity:0.85; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-outline:hover { opacity:0.85; }\n  .btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }\n  .section-dark .inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--light); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }\n  .color-swatch-block { height:60px; width:100%; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }\n  .card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }\n  .card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }\n  .form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }\n  .form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Revolut\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#191c1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Revolut Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#191c1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surface, text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f4f4f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#494fdf\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#494fdf\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e23b4a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e23b4a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00a87e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00a87e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ec7e00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ec7e00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e61e49\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e61e49\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Critical\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b09000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b09000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Attention\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#505a63\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#505a63\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8d969e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8d969e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c9c9cd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c9c9cd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;\">Display Mega\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 136px \u002F 500 \u002F 1.00 \u002F -2.72px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 48px \u002F 500 \u002F 1.21 \u002F -0.48px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 500 \u002F 1.19 \u002F -0.32px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);\">Body Large — One app for all things money. From spending to saving, to investing and beyond.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.56 \u002F -0.09px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;\">Body Semibold — Account details\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Semibold — 16px \u002F 600 \u002F 1.50 \u002F +0.16px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-light\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;\">\n    \u003Ca class=\"btn-ghost-dark\" href=\"#\">Ghost on Dark\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-label\" style=\"margin-top:8px;\">Ghost variant on dark surface\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\n  \u003Cdiv class=\"inner\" id=\"cards\">\n    \u003Cdiv class=\"section-label-light\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\">\u003Ch3>Spending\u003C\u002Fh3>\u003Cp>Track your spending in real-time. Get instant notifications for every transaction.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\u003Ch3>Saving\u003C\u002Fh3>\u003Cp>Set saving goals and round up spare change automatically into your vaults.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\u003Ch3>Investing\u003C\u002Fh3>\u003Cp>Buy and sell stocks, crypto, and commodities commission-free from your phone.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Phone number\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"tel\" placeholder=\"+44 7700 900000\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@revolut.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"-500\">\u003Cdiv class=\"form-state-label\">Error (danger ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:80px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">80\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — Revolut is flat\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.125rem ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Frevolut.com\u002F\">revolut.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Revolut (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#0d0e10; --dark:#f4f4f4; --light:#1e2124; --blue:#494fdf; --action:#4f55f1;\n    --danger:#e23b4a; --pink:#e61e49; --warning:#ec7e00; --teal:#00a87e; --yellow:#b09000;\n    --gray:#6a7078; --slate:#a0a8b0; --border:#2e3236;\n    --font-display:'DM Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; letter-spacing:0.24px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:var(--white); }\n  .nav-brand { font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--dark); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--slate); text-decoration:none; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.7; }\n  .nav-cta { display:inline-block; background:var(--dark); color:var(--white); padding:10px 24px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .hero { padding:80px 32px; text-align:center; }\n  .hero h1 { font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px; margin-bottom:16px; }\n  .hero p { font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; letter-spacing:-0.09px; line-height:1.56; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-dark { display:inline-block; background:var(--dark); color:var(--white); padding:14px 32px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-dark:hover { opacity:0.85; }\n  .btn-light { display:inline-block; background:var(--light); color:var(--dark); padding:14px 34px; border-radius:9999px; font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-light:hover { opacity:0.85; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--dark); padding:14px 32px; border-radius:9999px; border:2px solid var(--dark); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }\n  .btn-outline:hover { opacity:0.85; }\n  .btn-ghost-dark { display:inline-block; background:rgba(244,244,244,0.1); color:var(--light); padding:14px 32px; border-radius:9999px; border:2px solid var(--light); font-family:var(--font-display); font-size:16px; font-weight:500; text-decoration:none; }\n\n  .section { padding:64px 32px; max-width:1100px; margin:0 auto; }\n  .section-dark { padding:64px 32px; background:var(--dark); color:var(--white); }\n  .section-dark .inner { max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-label-light { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid var(--light); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--light); }\n  .color-swatch-block { height:60px; width:100%; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:500; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--slate); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border-radius:20px; padding:24px; border:1px solid var(--light); }\n  .card h3 { font-family:var(--font-display); font-size:24px; font-weight:500; margin-bottom:8px; }\n  .card p { font-size:16px; color:var(--slate); letter-spacing:0.24px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.16px; }\n  .form-input { width:100%; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; outline:none; letter-spacing:0.24px; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3); }\n  .form-input--error { border-color:var(--danger); box-shadow:0 0 0 0.125rem rgba(226,59,74,0.3); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--dark); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font-body); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--dark); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid var(--light); border-radius:20px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:500; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--dark); color:var(--gray); font-size:13px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n\n  @media (max-width:720px) { .hero h1 { font-size:40px; letter-spacing:-0.8px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#494fdf;color:#ffffff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Revolut\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#191c1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Revolut Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#191c1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark surface, text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f4f4f4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f4f4f4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#494fdf\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#494fdf\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e23b4a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e23b4a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00a87e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00a87e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ec7e00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ec7e00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e61e49\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e61e49\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Critical\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b09000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b09000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Attention\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#505a63\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#505a63\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#8d969e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8d969e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c9c9cd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c9c9cd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:72px; font-weight:500; line-height:1.00; letter-spacing:-2.72px;\">Display Mega\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 136px \u002F 500 \u002F 1.00 \u002F -2.72px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:48px; font-weight:500; line-height:1.21; letter-spacing:-0.48px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 48px \u002F 500 \u002F 1.21 \u002F -0.48px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.19; letter-spacing:-0.32px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 32px \u002F 500 \u002F 1.19 \u002F -0.32px \u002F Aeonik Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.09px; color:var(--slate);\">Body Large — One app for all things money. From spending to saving, to investing and beyond.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.56 \u002F -0.09px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.50; letter-spacing:0.16px;\">Body Semibold — Account details\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Semibold — 16px \u002F 600 \u002F 1.50 \u002F +0.16px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-light\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Secondary Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv style=\"background:var(--dark); padding:16px 20px; border-radius:20px; margin-top:16px; display:inline-flex; gap:12px;\">\n    \u003Ca class=\"btn-ghost-dark\" href=\"#\">Ghost on Dark\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-label\" style=\"margin-top:8px;\">Ghost variant on dark surface\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv class=\"section-dark\">\n  \u003Cdiv class=\"inner\" id=\"cards\">\n    \u003Cdiv class=\"section-label-light\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\">\u003Ch3>Spending\u003C\u002Fh3>\u003Cp>Track your spending in real-time. Get instant notifications for every transaction.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\u003Ch3>Saving\u003C\u002Fh3>\u003Cp>Set saving goals and round up spare change automatically into your vaults.\u003C\u002Fp>\u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\u003Ch3>Investing\u003C\u002Fh3>\u003Cp>Buy and sell stocks, crypto, and commodities commission-free from your phone.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Phone number\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"tel\" placeholder=\"+44 7700 900000\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"email\" value=\"user@revolut.com\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"-500\">\u003Cdiv class=\"form-state-label\">Error (danger ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Note\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:80px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">80\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow — Revolut is flat\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:0 0 0 0.125rem rgba(73,79,223,0.3);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.125rem ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Frevolut.com\u002F\">revolut.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Revolut Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frevolut\u002FDESIGN.md) extracted from the public [Revolut](https:\u002F\u002Frevolut.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frevolut\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Revolut design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Revolut Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frevolut\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Revolut Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frevolut\u002Fpreview-screenshot.png)\n",{"slug":292,"name":293,"category":45,"designMd":294,"previewHtml":295,"previewDarkHtml":296,"readme":297},"runwayml","Runwayml","# Design System Inspiration of Runway\n\n## 1. Visual Theme & Atmosphere\n\nRunway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.\n\nThe design language is built on a single typeface — abcNormal — a clean, geometric sans-serif that handles everything from 48px display headlines to 11px uppercase labels. This single-font commitment creates an extreme typographic uniformity that lets the visual content speak louder than the text. Headlines use tight line-heights (1.0) with negative letter-spacing (-0.9px to -1.2px), creating compressed text blocks that feel like film titles rather than marketing copy.\n\nWhat makes Runway distinctive is its complete commitment to visual content as design. Rather than illustrating features with icons or diagrams, Runway shows actual AI-generated and AI-enhanced imagery — cars driving through cinematic landscapes, artistic portraits, architectural renders. The interface itself retreats into near-invisibility: minimal borders, zero shadows, subtle cool-gray text, and a dark palette that puts maximum focus on the photography.\n\n**Key Characteristics:**\n- Cinematic full-bleed photography and video as primary UI elements\n- Single typeface system: abcNormal for everything from display to micro labels\n- Dark-dominant palette with cool-toned neutrals (#767d88, #7d848e)\n- Zero shadows, minimal borders — the interface is intentionally invisible\n- Tight display typography (line-height 1.0) with negative tracking (-0.9px to -1.2px)\n- Uppercase labels with positive letter-spacing for navigational structure\n- Weight 450 (unusual intermediate) for small uppercase text — precision craft\n- Editorial magazine layout with mixed-size image grids\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Runway Black** (`#000000`): The primary page background and maximum-emphasis text.\n- **Deep Black** (`#030303`): A near-imperceptible variant for layered dark surfaces.\n- **Dark Surface** (`#1a1a1a`): Card backgrounds and elevated dark containers.\n- **Pure White** (`#ffffff`): Primary text on dark surfaces and light-section backgrounds.\n\n### Surface & Background\n- **Near White** (`#fefefe`): The lightest surface — barely distinguishable from pure white.\n- **Cool Cloud** (`#e9ecf2`): Light section backgrounds with a cool blue-gray tint.\n- **Border Dark** (`#27272a`): The single dark-mode border color — barely visible containment.\n\n### Neutrals & Text\n- **Charcoal** (`#404040`): Primary body text on light surfaces and secondary text.\n- **Near Charcoal** (`#3f3f3f`): Slightly lighter variant for dark-section secondary text.\n- **Cool Slate** (`#767d88`): Secondary body text — a distinctly blue-gray cool neutral.\n- **Mid Slate** (`#7d848e`): Tertiary text, metadata descriptions.\n- **Muted Gray** (`#a7a7a7`): De-emphasized content, timestamps.\n- **Cool Silver** (`#c9ccd1`): Light borders and dividers.\n- **Light Silver** (`#d0d4d4`): The lightest border\u002Fdivider variant.\n- **Tailwind Gray** (`#6b7280`): Standard Tailwind neutral for supplementary text.\n- **Dark Link** (`#0c0c0c`): Darkest link text — nearly black.\n- **Footer Gray** (`#999999`): Footer links and deeply muted content.\n\n### Gradient System\n- **None in the interface.** Visual richness comes entirely from photographic content — AI-generated and enhanced imagery provides all the color and gradient the design needs. The interface itself is intentionally colorless.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: `abcNormal`, with fallback: `abcNormal Fallback`\n\n*Note: abcNormal is a custom geometric sans-serif. For external implementations, Inter or DM Sans serve as close substitutes.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | abcNormal | 48px (3rem) | 400 | 1.00 (tight) | -1.2px | Maximum size, film-title presence |\n| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px to 0px | Feature section titles |\n| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (tight) | -0.9px | Secondary section markers |\n| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (tight) | normal | Article and card headings |\n| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (tight) | normal | Small headings |\n| Body \u002F Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px to normal | Standard body, nav links |\n| Caption \u002F Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (uppercase) | Metadata, section labels |\n| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (tight) | -0.16px to -0.26px | Compact descriptions |\n| Micro \u002F Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (tight) | normal | Uppercase tags, tiny labels |\n\n### Principles\n- **One typeface, complete expression**: abcNormal handles every text role. The design achieves variety through size, weight, case, and letter-spacing rather than font-family switching.\n- **Tight everywhere**: Nearly every size uses line-height 1.0–1.30 — even body text is relatively compressed. This creates a dense, editorial feel.\n- **Weight 450 — the precision detail**: Some small uppercase labels use weight 450, an uncommon intermediate between regular (400) and medium (500). This micro-craft signals typographic sophistication.\n- **Negative tracking as default**: Even body text uses -0.16px to -0.26px letter-spacing, keeping everything slightly tighter than default.\n- **Uppercase as structure**: Labels at 14px and 11px use `text-transform: uppercase` with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase text.\n\n## 4. Component Stylings\n\n### Buttons\n- Text: weight 600 at 14px abcNormal\n- Background: likely transparent or dark, with minimal border\n- Radius: small (4px) for button-like links\n- The button design is extremely restrained — no heavy fills or borders detected\n- Interactive elements blend into the editorial flow\n\n### Cards & Containers\n- Background: transparent or Dark Surface (`#1a1a1a`)\n- Border: `1px solid #27272a` (dark mode) — barely visible containment\n- Radius: small (4–8px) for functional elements; 16px for alert-style containers\n- Shadow: zero — no shadows on any element\n- Cards are primarily photographic — the image IS the card\n\n### Navigation\n- Minimal horizontal nav — transparent over hero content\n- Logo: Runway wordmark in white\u002Fblack\n- Links: abcNormal at 16px, weight 400–600\n- Hover: text shifts to white or higher opacity\n- Extremely subtle — designed to not compete with visual content\n\n### Image Treatment\n- Full-bleed cinematic photography and video dominate\n- AI-generated content shown at large scale as primary visual elements\n- Mixed-size image grids creating editorial magazine layouts\n- Dark overlays on hero images for text readability\n- Product screenshots with subtle rounded corners (8px)\n\n### Distinctive Components\n\n**Cinematic Hero**\n- Full-viewport image or video with text overlay\n- Headline in 48px abcNormal, white on dark imagery\n- The image is always cinematic quality — film-grade composition\n\n**Research Article Cards**\n- Photographic thumbnails with article titles\n- Mixed-size grid layout (large feature + smaller supporting)\n- Clean text overlay or below-image caption style\n\n**Trust Bar**\n- Company logos (leading organizations across industries)\n- Clean, monochrome treatment\n- Horizontal layout with generous spacing\n\n**Mission Statement**\n- \"We are building AI to simulate the world through imagination, art and aesthetics\"\n- On a dark background with white text\n- The emotional close — artistic and philosophical\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px\n- Section vertical spacing: generous (48–78px)\n- Component gaps: 16–24px\n\n### Grid & Container\n- Max container width: up to 1600px (cinema-wide)\n- Hero: full-viewport, edge-to-edge\n- Content sections: centered with generous margins\n- Image grids: asymmetric, magazine-style mixed sizes\n- Footer: full-width dark section\n\n### Whitespace Philosophy\n- **Cinema-grade breathing**: Large vertical gaps between sections create a scrolling experience that feels like watching scenes change.\n- **Images replace whitespace**: Where other sites use empty space, Runway fills it with photography. The visual content IS the breathing room.\n- **Editorial grid asymmetry**: The image grid uses intentionally varied sizes — large hero images paired with smaller supporting images, creating visual rhythm.\n\n### Border Radius Scale\n- Sharp (4px): Buttons, small interactive elements\n- Subtle (6px): Links, small containers\n- Comfortable (8px): Standard containers, image cards\n- Generous (16px): Alert-style containers, featured elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Everything — the dominant state |\n| Bordered (Level 1) | `1px solid #27272a` | Alert containers only |\n| Dark Section (Level 2) | Dark bg (#000000 \u002F #1a1a1a) with light text | Hero, features, footer |\n| Light Section (Level 3) | White\u002FCool Cloud bg with dark text | Content sections, research |\n\n**Shadow Philosophy**: Runway uses **zero shadows**. This is a film-production design decision — in cinema, depth comes from lighting, focus, and composition, not drop shadows. The interface mirrors this philosophy: depth is communicated through dark\u002Flight section alternation, photographic depth-of-field, and overlay transparency — never through CSS box-shadow.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-bleed cinematic photography as the primary visual element\n- Use abcNormal for all text — maintain the single-typeface commitment\n- Keep display line-heights at 1.0 with negative letter-spacing for film-title density\n- Use the cool-gray neutral palette (#767d88, #7d848e) for secondary text\n- Maintain zero shadows — depth comes from photography and section backgrounds\n- Use uppercase with letter-spacing for navigational labels (14px, 0.35px spacing)\n- Apply small border-radius (4–8px) — the design is NOT pill-shaped\n- Let visual content (photos, videos) dominate — the UI should be invisible\n- Use weight 450 for micro labels — the precision matters\n\n### Don't\n- Don't add decorative colors to the interface — the only color comes from photography\n- Don't use heavy borders or shadows — the interface must be nearly invisible\n- Don't use pill-shaped radius — Runway's geometry is subtly rounded, not circular\n- Don't use bold (700+) weight — 400–600 is the full range, with 450 as a precision tool\n- Don't compete with the visual content — text overlays should be minimal and restrained\n- Don't use gradient backgrounds in the interface — gradients exist only in photography\n- Don't use more than one typeface — abcNormal handles everything\n- Don't use body line-height above 1.50 — the tight, editorial feel is core\n- Don't reduce image quality — cinematic photography IS the design\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, stacked images, reduced hero text |\n| Tablet | 640–768px | 2-column image grids begin |\n| Small Desktop | 768–1024px | Standard layout |\n| Desktop | 1024–1280px | Full layout, expanded hero |\n| Large Desktop | 1280–1600px | Maximum cinema-width container |\n\n### Touch Targets\n- Navigation links at comfortable 16px\n- Article cards serve as large touch targets\n- Buttons at 14px weight 600 with adequate padding\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger on mobile\n- **Hero**: Full-bleed maintained, text scales down\n- **Image grids**: Multi-column → 2-column → single column\n- **Research articles**: Feature-size cards → stacked full-width\n- **Trust logos**: Horizontal scroll or reduced grid\n\n### Image Behavior\n- Cinematic images scale proportionally\n- Full-bleed hero maintained across all sizes\n- Image grids reflow to fewer columns\n- Video content maintains aspect ratio\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background Dark: \"Runway Black (#000000)\"\n- Background Light: \"Pure White (#ffffff)\"\n- Primary Text Dark: \"Charcoal (#404040)\"\n- Secondary Text: \"Cool Slate (#767d88)\"\n- Muted Text: \"Muted Gray (#a7a7a7)\"\n- Light Border: \"Cool Silver (#c9ccd1)\"\n- Dark Border: \"Border Dark (#27272a)\"\n- Card Surface: \"Dark Surface (#1a1a1a)\"\n\n### Example Component Prompts\n- \"Create a cinematic hero section: full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px.\"\n- \"Design a research article grid: one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius. Titles in white (dark bg) or Charcoal (#404040, light bg).\"\n- \"Build a section label: 14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background.\"\n- \"Create a trust bar: company logos in monochrome, horizontal layout with generous spacing. On dark background with white\u002Fgray logo treatments.\"\n- \"Design a mission statement section: Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px. Centered, with generous vertical padding.\"\n\n### Iteration Guide\n1. Visual content first — always include cinematic photography\n2. Use abcNormal for everything — specify size and weight, never change the font\n3. Keep the interface invisible — no heavy borders, no shadows, no bright colors\n4. Use the cool slate grays (#767d88, #7d848e) for secondary text — not warm grays\n5. Uppercase labels need letter-spacing (0.35px) — never tight uppercase\n6. Dark sections should be truly dark (#000000 or #1a1a1a) — no medium grays as surfaces\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Runway (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;450;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-deep-black: #030303;\n    --color-dark-surface: #1a1a1a;\n    --color-white: #ffffff;\n    --color-near-white: #fefefe;\n    --color-cool-cloud: #e9ecf2;\n    --color-charcoal: #404040;\n    --color-near-charcoal: #3f3f3f;\n    --color-cool-slate: #767d88;\n    --color-mid-slate: #7d848e;\n    --color-muted-gray: #a7a7a7;\n    --color-cool-silver: #c9ccd1;\n    --color-light-silver: #d0d4d4;\n    --color-tailwind-gray: #6b7280;\n    --color-dark-link: #0c0c0c;\n    --color-footer-gray: #999999;\n    --color-border-dark: #27272a;\n    --font-primary: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Light mode *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #fefefe;\n    --bg-nav: rgba(255,255,255,0.95);\n    --text-primary: #000000;\n    --text-secondary: #404040;\n    --text-muted: #767d88;\n    --text-tertiary: #7d848e;\n    --border-color: #c9ccd1;\n    --border-subtle: #e9ecf2;\n    --section-label-color: #767d88;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    line-height: 1.3;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.3px;\n    color: var(--text-primary);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 600;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    background: var(--color-black);\n    color: var(--color-white);\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 48px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.2px;\n    margin-bottom: 24px;\n  }\n  .hero p {\n    color: var(--color-cool-slate);\n    font-size: 16px;\n    line-height: 1.3;\n    letter-spacing: -0.16px;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n  .btn-primary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 600;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: 1px solid var(--color-border-dark);\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 78px 40px;\n  }\n  .section-title {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.35px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 40px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -0.16px;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.16px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-bordered { border: 1px solid var(--border-color); }\n  .card-dark {\n    background: var(--color-dark-surface);\n    border: 1px solid var(--color-border-dark);\n    color: var(--color-white);\n  }\n  .card-dark p { color: var(--color-cool-slate); }\n  .card-minimal {\n    background: transparent;\n    border: 1px solid var(--border-subtle);\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 13px; line-height: 1.3; letter-spacing: -0.16px; }\n  .card-label {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 450;\n    text-transform: uppercase;\n    letter-spacing: normal;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--color-cool-cloud);\n    border: 1px solid var(--border-color);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--border-color); }\n  .elevation-dark-section {\n    background: var(--color-black);\n    color: var(--color-white);\n    border: none;\n  }\n  .elevation-dark-section .elevation-desc { color: var(--color-cool-slate); }\n  .elevation-light-section {\n    background: var(--color-cool-cloud);\n    border: none;\n  }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.16px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.3; letter-spacing: -0.16px; }\n  .elevation-level {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 450;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: normal;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">Runway\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Try Runway\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Runway\u003C\u002Fh1>\n  \u003Cp>Cinematic, minimal, editorial design tokens from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Runway Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, maximum-emphasis text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #030303; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#030303\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Layered dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1a1a1a; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card backgrounds, elevated dark containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #c9ccd1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark, light-section backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fefefe; border-bottom: 1px solid #c9ccd1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fefefe\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lightest surface variant\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e9ecf2;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Cloud\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e9ecf2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light section backgrounds, cool blue-gray tint\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#27272a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark-mode border color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Cool Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #404040;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#404040\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary body text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #767d88;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#767d88\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text, cool blue-gray\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #7d848e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#7d848e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a7a7a7;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a7a7a7\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized content, timestamps\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c9ccd1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c9ccd1\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light borders and dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d0d4d4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d0d4d4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lightest border\u002Fdivider variant\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #6b7280;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Tailwind Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#6b7280\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Supplementary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #999999;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Footer Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#999999\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Footer links, deeply muted content\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;\">Single typeface system: DM Sans (abcNormal substitute). One font, complete expression.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 48px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 48px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 40px; font-weight: 400; line-height: 1.0; letter-spacing: -1px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 40px \u002F 400 \u002F 1.00 \u002F -1px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 36px; font-weight: 400; line-height: 1.0; letter-spacing: -0.9px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 36px \u002F 400 \u002F 1.00 \u002F -0.9px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 24px; font-weight: 400; line-height: 1.0;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title -- 24px \u002F 400 \u002F 1.00 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 20px; font-weight: 400; line-height: 1.0;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 20px \u002F 400 \u002F 1.00 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px;\">Body text for standard paragraphs, navigation links, and button labels. DM Sans provides geometric precision across all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F 400 \u002F 1.30 \u002F -0.16px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 14px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.35px; color: var(--text-muted);\">SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption \u002F Label -- 14px \u002F 500 \u002F 1.25 \u002F 0.35px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px; color: var(--text-secondary);\">Compact description text for metadata and small copy blocks.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small -- 13px \u002F 400 \u002F 1.30 \u002F -0.16px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 11px; font-weight: 450; line-height: 1.3; text-transform: uppercase; color: var(--text-muted);\">MICRO TAG LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Micro \u002F Tag -- 11px \u002F 450 \u002F 1.30 \u002F normal \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">03 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">Bordered Card\u003C\u002Fdiv>\n      \u003Ch3>Cool Silver Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid cool-silver border and 8px radius. The default container for research articles and feature sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark\">\n      \u003Cdiv class=\"card-label\">Dark Surface Card\u003C\u002Fdiv>\n      \u003Ch3>Cinematic Container\u003C\u002Fh3>\n      \u003Cp>Dark surface card on #1a1a1a with border-dark containment. Used for featured content on dark sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-minimal\">\n      \u003Cdiv class=\"card-label\">Minimal Card\u003C\u002Fdiv>\n      \u003Ch3>Transparent Container\u003C\u002Fh3>\n      \u003Cp>Minimal bordered card with transparent background and subtle border. The interface retreats to let content speak.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">04 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;\">Base unit: 8px. Cinema-grade breathing between sections.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 112px; height: 112px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 224px; height: 224px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">78px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">05 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;\">Subtle radius only. Not pill-shaped.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp \u002F Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtle \u002F Links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable \u002F Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generous \u002F Alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">06 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;\">Zero shadows. Depth comes from section alternation and photography, never from box-shadow.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. The dominant state for everything.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid border. Alert containers only.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dark-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Dark Section\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark bg with light text. Hero, features, footer.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-light-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Light Section\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">White or Cool Cloud bg with dark text. Content sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Runway (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:wght@400;450;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-black: #000000;\n    --color-deep-black: #030303;\n    --color-dark-surface: #1a1a1a;\n    --color-white: #ffffff;\n    --color-near-white: #fefefe;\n    --color-cool-cloud: #e9ecf2;\n    --color-charcoal: #404040;\n    --color-near-charcoal: #3f3f3f;\n    --color-cool-slate: #767d88;\n    --color-mid-slate: #7d848e;\n    --color-muted-gray: #a7a7a7;\n    --color-cool-silver: #c9ccd1;\n    --color-light-silver: #d0d4d4;\n    --color-tailwind-gray: #6b7280;\n    --color-dark-link: #0c0c0c;\n    --color-footer-gray: #999999;\n    --color-border-dark: #27272a;\n    --font-primary: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Dark mode — Runway's native cinematic theme *\u002F\n    --bg-page: #000000;\n    --bg-card: #1a1a1a;\n    --bg-nav: rgba(0,0,0,0.92);\n    --text-primary: #ffffff;\n    --text-secondary: #a7a7a7;\n    --text-muted: #767d88;\n    --text-tertiary: #7d848e;\n    --border-color: #27272a;\n    --border-subtle: #1a1a1a;\n    --section-label-color: #767d88;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    line-height: 1.3;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.3px;\n    color: var(--text-primary);\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 600;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    background: var(--color-black);\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 48px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1.2px;\n    margin-bottom: 24px;\n    color: var(--color-white);\n  }\n  .hero p {\n    color: var(--color-cool-slate);\n    font-size: 16px;\n    line-height: 1.3;\n    letter-spacing: -0.16px;\n    margin-bottom: 40px;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n  .btn-primary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 600;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: 1px solid var(--color-border-dark);\n    border-radius: 4px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 400;\n    cursor: pointer;\n    letter-spacing: -0.16px;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 78px 40px;\n  }\n  .section-title {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.35px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 40px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -1px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-color);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -0.16px;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.16px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-color); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-bordered { border: 1px solid var(--border-color); }\n  .card-surface {\n    background: var(--color-deep-black);\n    border: 1px solid var(--border-color);\n  }\n  .card-minimal {\n    background: transparent;\n    border: 1px solid var(--border-color);\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: normal;\n    margin-bottom: 12px;\n  }\n  .card p { color: var(--text-secondary); font-size: 13px; line-height: 1.3; letter-spacing: -0.16px; }\n  .card-label {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 450;\n    text-transform: uppercase;\n    letter-spacing: normal;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(118,125,136,0.15);\n    border: 1px solid var(--border-color);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-bordered { border: 1px solid var(--border-color); }\n  .elevation-dark-section {\n    background: var(--color-dark-surface);\n    border: 1px solid var(--border-color);\n  }\n  .elevation-light-section {\n    background: var(--color-cool-cloud);\n    color: var(--color-black);\n    border: none;\n  }\n  .elevation-light-section .elevation-desc { color: var(--color-charcoal); }\n  .elevation-light-section .elevation-level { color: var(--color-cool-slate); }\n  .elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.16px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.3; letter-spacing: -0.16px; }\n  .elevation-level {\n    font-family: var(--font-primary);\n    font-size: 11px;\n    font-weight: 450;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: normal;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">Runway\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Try Runway\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>Runway\u003C\u002Fh1>\n  \u003Cp>Cinematic, minimal, editorial design tokens from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Runway Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary page background, maximum-emphasis text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #030303; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#030303\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Layered dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #1a1a1a; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#1a1a1a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card backgrounds, elevated dark containers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark, light-section backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fefefe; border-bottom: 1px solid #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fefefe\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lightest surface variant\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #e9ecf2;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Cloud\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#e9ecf2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light section backgrounds, cool blue-gray tint\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #27272a;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#27272a\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark-mode border color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Cool Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #404040;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#404040\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary body text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #767d88;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#767d88\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text, cool blue-gray\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #7d848e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#7d848e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #a7a7a7;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Muted Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#a7a7a7\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized content, timestamps\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #c9ccd1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cool Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#c9ccd1\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light borders and dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #d0d4d4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Silver\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#d0d4d4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Lightest border\u002Fdivider variant\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #6b7280;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Tailwind Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#6b7280\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Supplementary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #999999;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Footer Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#999999\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Footer links, deeply muted content\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;\">Single typeface system: DM Sans (abcNormal substitute). One font, complete expression.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 48px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 48px \u002F 400 \u002F 1.00 \u002F -1.2px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 40px; font-weight: 400; line-height: 1.0; letter-spacing: -1px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 40px \u002F 400 \u002F 1.00 \u002F -1px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 36px; font-weight: 400; line-height: 1.0; letter-spacing: -0.9px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 36px \u002F 400 \u002F 1.00 \u002F -0.9px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 24px; font-weight: 400; line-height: 1.0;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title -- 24px \u002F 400 \u002F 1.00 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 20px; font-weight: 400; line-height: 1.0;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 20px \u002F 400 \u002F 1.00 \u002F normal\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px;\">Body text for standard paragraphs, navigation links, and button labels. DM Sans provides geometric precision across all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F 400 \u002F 1.30 \u002F -0.16px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 14px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.35px; color: var(--text-muted);\">SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption \u002F Label -- 14px \u002F 500 \u002F 1.25 \u002F 0.35px \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px; color: var(--text-secondary);\">Compact description text for metadata and small copy blocks.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small -- 13px \u002F 400 \u002F 1.30 \u002F -0.16px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-size: 11px; font-weight: 450; line-height: 1.3; text-transform: uppercase; color: var(--text-muted);\">MICRO TAG LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Micro \u002F Tag -- 11px \u002F 450 \u002F 1.30 \u002F normal \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">03 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">Bordered Card\u003C\u002Fdiv>\n      \u003Ch3>Dark Border Containment\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid border-dark and 8px radius. The default container for research articles and feature sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-surface\">\n      \u003Cdiv class=\"card-label\">Deep Surface Card\u003C\u002Fdiv>\n      \u003Ch3>Cinematic Container\u003C\u002Fh3>\n      \u003Cp>Deep black surface card on #030303 with border containment. Layered depth through background variation.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-minimal\">\n      \u003Cdiv class=\"card-label\">Minimal Card\u003C\u002Fdiv>\n      \u003Ch3>Transparent Container\u003C\u002Fh3>\n      \u003Cp>Minimal bordered card with transparent background. The interface retreats to let content speak.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">04 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;\">Base unit: 8px. Cinema-grade breathing between sections.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 112px; height: 112px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">28px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 224px; height: 224px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">78px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">05 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;\">Subtle radius only. Not pill-shaped.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sharp \u002F Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtle \u002F Links\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortable \u002F Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Generous \u002F Alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">06 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;\">Zero shadows. Depth comes from section alternation and photography, never from box-shadow.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. The dominant state for everything.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-bordered\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #27272a. Alert containers only.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dark-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Dark Section\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark bg with light text. Hero, features, footer.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-light-section\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Light Section\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">White or Cool Cloud bg with dark text. Content sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# RunwayML Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frunwayml\u002FDESIGN.md) extracted from the public [Runway](https:\u002F\u002Frunwayml.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Frunwayml\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the RunwayML design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![RunwayML Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frunwayml\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![RunwayML Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Frunwayml\u002Fpreview-screenshot.png)\n",{"slug":299,"name":300,"category":60,"designMd":301,"previewHtml":302,"previewDarkHtml":303,"readme":304},"sanity","Sanity","# Design System Inspiration of Sanity\n\n## 1. Visual Theme & Atmosphere\n\nSanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a \"dark mode toggle\" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.\n\nThe signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.\n\nWhat makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (`#0052ef`) land with the impact of signal lights in a dark control room. The orange-red CTA (`#f36458`) provides the only warm touch in an otherwise cool system.\n\n**Key Characteristics:**\n- Near-black canvas (`#0b0b0b`) as the default, natural environment -- not a dark \"mode\" but the primary identity\n- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice\n- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline\n- Vivid accent punctuation: neon green, electric blue (`#0052ef`), and coral-red (`#f36458`) against the dark field\n- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions\n- IBM Plex Mono as the technical counterweight to the editorial display face\n- Full-bleed dark sections with content contained in measured max-width containers\n- Hover states that shift to electric blue (`#0052ef`) across all interactive elements -- a consistent \"activation\" signal\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Sanity Black** (`#0b0b0b`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.\n- **Pure Black** (`#000000`): Used for maximum-contrast moments, deep overlays, and certain border accents.\n- **Sanity Red** (`#f36458`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for \"Get Started\" buttons and primary conversion points.\n\n### Accent & Interactive\n- **Electric Blue** (`#0052ef`): The universal hover\u002Factive state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as `--color-blue-700` for focus rings and active states.\n- **Light Blue** (`#55beff` \u002F `#afe3ff`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.\n- **Neon Green** (`color(display-p3 .270588 1 0)`): A vivid, wide-gamut green used as `--color-fg-accent-green` for success states and premium feature highlights. Falls back to `#19d600` in sRGB.\n- **Accent Magenta** (`color(display-p3 .960784 0 1)`): A vivid wide-gamut magenta for specialized accent moments.\n\n### Surface & Background\n- **Near Black** (`#0b0b0b`): Default page background and primary surface.\n- **Dark Gray** (`#212121`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.\n- **Medium Dark** (`#353535`): Tertiary surface and border color for creating depth between dark layers.\n- **Pure White** (`#ffffff`): Used for inverted sections, light-on-dark text, and specific button surfaces.\n- **Light Gray** (`#ededed`): Light surface for inverted\u002Flight sections and subtle background tints.\n\n### Neutrals & Text\n- **White** (`#ffffff`): Primary text color on dark surfaces, maximum legibility.\n- **Silver** (`#b9b9b9`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.\n- **Medium Gray** (`#797979`): Tertiary text, metadata, timestamps, and de-emphasized content.\n- **Charcoal** (`#212121`): Text on light\u002Finverted surfaces.\n- **Near Black Text** (`#0b0b0b`): Primary text on white\u002Flight button surfaces.\n\n### Semantic\n- **Error Red** (`#dd0000`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.\n- **GPC Green** (`#37cd84`): Privacy\u002Fcompliance indicator green.\n- **Focus Ring Blue** (`#0052ef`): Focus ring color for accessibility, matching the interactive blue.\n\n### Border System\n- **Dark Border** (`#0b0b0b`): Primary border on dark containers -- barely visible, maintaining minimal containment.\n- **Subtle Border** (`#212121`): Standard border for inputs, textareas, and card edges on dark surfaces.\n- **Medium Border** (`#353535`): More visible borders for emphasized containment and dividers.\n- **Light Border** (`#ffffff`): Border on inverted\u002Flight elements or buttons needing contrast separation.\n- **Orange Border** (`color(display-p3 1 0.3333 0)`): Special accent border for highlighted\u002Ffeatured elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display \u002F Headline**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`\n- **Body \u002F UI**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`\n- **Code \u002F Technical**: `IBM Plex Mono`, fallback: `ibmPlexMono Fallback, ui-monospace`\n- **Fallback \u002F CJK**: `Helvetica`, fallback: `Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`\n\n*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |\n| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |\n| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |\n| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |\n| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |\n| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |\n| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |\n| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |\n| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |\n| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |\n| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |\n| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |\n| Micro \u002F Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |\n| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |\n| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |\n| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |\n\n### Principles\n- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.\n- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.\n- **OpenType feature control**: Typography uses deliberate feature settings including `\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"` for display sizes and `\"calt\" 0` for body text, fine-tuning character alternates for different contexts.\n- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.\n- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use `text-transform: uppercase` with tight line-heights, creating a \"system readout\" aesthetic for technical metadata.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA (Pill)**\n- Background: Sanity Red (`#f36458`)\n- Text: White (`#ffffff`)\n- Padding: 8px 16px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (`#0052ef`) background, white text\n- Font: 16px waldenburgNormal, weight 400\n\n**Secondary (Dark Pill)**\n- Background: Near Black (`#0b0b0b`)\n- Text: Silver (`#b9b9b9`)\n- Padding: 8px 12px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Outlined (Light Pill)**\n- Background: White (`#ffffff`)\n- Text: Near Black (`#0b0b0b`)\n- Padding: 8px\n- Border Radius: 99999px (full pill)\n- Border: 1px solid `#0b0b0b`\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Ghost \u002F Subtle**\n- Background: Dark Gray (`#212121`)\n- Text: Silver (`#b9b9b9`)\n- Padding: 0px 12px\n- Border Radius: 5px\n- Border: 1px solid `#212121`\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Uppercase Label Button**\n- Font: 11px waldenburgNormal, weight 600, uppercase\n- Background: transparent or `#212121`\n- Text: Silver (`#b9b9b9`)\n- Letter-spacing: normal\n- Used for tab-like navigation and filter controls\n\n### Cards\n\n**Dark Content Card**\n- Background: `#212121`\n- Border: 1px solid `#353535` or `#212121`\n- Border Radius: 6px\n- Padding: 24px\n- Text: White (`#ffffff`) for titles, Silver (`#b9b9b9`) for body\n- Hover: subtle border color shift or elevation change\n\n**Feature Card (Full-bleed)**\n- Background: `#0b0b0b` or full-bleed image\u002Fgradient\n- Border: none or 1px solid `#212121`\n- Border Radius: 12px\n- Padding: 32-48px\n- Contains large imagery with overlaid text\n\n### Inputs\n\n**Text Input \u002F Textarea**\n- Background: Near Black (`#0b0b0b`)\n- Text: Silver (`#b9b9b9`)\n- Border: 1px solid `#212121`\n- Padding: 8px 12px\n- Border Radius: 3px\n- Focus: outline with `var(--focus-ring-color)` (blue), 2px solid\n- Focus background: shifts to deep cyan (`#072227`)\n\n**Search Input**\n- Background: `#0b0b0b`\n- Text: Silver (`#b9b9b9`)\n- Padding: 0px 12px\n- Border Radius: 3px\n- Placeholder: Medium Gray (`#797979`)\n\n### Navigation\n\n**Top Navigation**\n- Background: Near Black (`#0b0b0b`) with backdrop blur\n- Height: auto, compact padding\n- Logo: left-aligned, Sanity wordmark\n- Links: waldenburgNormal 16px, Silver (`#b9b9b9`)\n- Link Hover: Electric Blue via `--color-fg-accent-blue`\n- CTA Button: Sanity Red pill button right-aligned\n- Separator: 1px border-bottom `#212121`\n\n**Footer**\n- Background: Near Black (`#0b0b0b`)\n- Multi-column link layout\n- Links: Silver (`#b9b9b9`), hover to blue\n- Section headers: White (`#ffffff`), 13px uppercase IBM Plex Mono\n\n### Badges \u002F Pills\n\n**Neutral Subtle**\n- Background: White (`#ffffff`)\n- Text: Near Black (`#0b0b0b`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n**Neutral Filled**\n- Background: Near Black (`#0b0b0b`)\n- Text: White (`#ffffff`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n## 5. Layout Principles\n\n### Spacing System\nBase unit: **8px**\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| space-1 | 1px | Hairline gaps, border-like spacing |\n| space-2 | 2px | Minimal internal padding |\n| space-3 | 4px | Tight component internal spacing |\n| space-4 | 6px | Small element gaps |\n| space-5 | 8px | Base unit -- button padding, input padding, badge padding |\n| space-6 | 12px | Standard component gap, button horizontal padding |\n| space-7 | 16px | Section internal padding, card spacing |\n| space-8 | 24px | Large component padding, card internal spacing |\n| space-9 | 32px | Section padding, container gutters |\n| space-10 | 48px | Large section vertical spacing |\n| space-11 | 64px | Major section breaks |\n| space-12 | 96-120px | Hero vertical padding, maximum section spacing |\n\n### Grid & Container\n- Max content width: ~1440px (inferred from breakpoints)\n- Page gutter: 32px on desktop, 16px on mobile\n- Content sections use full-bleed backgrounds with centered, max-width content\n- Multi-column layouts: 2-3 columns on desktop, single column on mobile\n- Card grids: CSS Grid with consistent gaps (16-24px)\n\n### Whitespace Philosophy\nSanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a \"slides\" quality -- each section feels like its own focused frame.\n\n### Border Radius Scale\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-xs | 3px | Inputs, textareas, subtle rounding |\n| radius-sm | 4-5px | Secondary buttons, small cards, tags |\n| radius-md | 6px | Standard cards, containers |\n| radius-lg | 12px | Large cards, feature containers, forms |\n| radius-pill | 99999px | Primary buttons, badges, nav pills |\n\n## 6. Depth & Elevation\n\n### Shadow System\n\n| Level | Value | Usage |\n|-------|-------|-------|\n| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |\n| Level 1 (Subtle) | 0px 0px 0px 1px `#212121` | Border-like shadow for minimal containment without visible borders |\n| Level 2 (Focus) | 0 0 0 2px `var(--color-blue-500)` | Focus ring for inputs and interactive elements |\n| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |\n\n### Depth Philosophy\nSanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: `#0b0b0b` (ground) -> `#212121` (elevated) -> `#353535` (prominent) -> `#ffffff` (inverted\u002Fhighest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.\n\nBorder-based containment (1px solid `#212121` or `#353535`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids \"floating card\" aesthetics -- everything feels mounted to the surface rather than hovering above it.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm\u002Fcool tinting\n- Apply Electric Blue (`#0052ef`) consistently as the universal hover\u002Factive state across all interactive elements\n- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above\n- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (`#f36458`)\n- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata\n- Communicate depth through surface color (dark-to-light) rather than shadows\n- Maintain generous vertical section spacing (64-120px) on the dark canvas\n- Use `\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"` OpenType features for display typography\n\n### Don't\n- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic\n- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth\n- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)\n- Don't mix the coral-red CTA with the electric blue interactive color in the same element\n- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels\n- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio\n- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only\n- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Behavior |\n|------|-------|----------|\n| Desktop XL | >= 1640px | Full layout, maximum content width |\n| Desktop | >= 1440px | Standard desktop layout |\n| Desktop Compact | >= 1200px | Slightly condensed desktop |\n| Laptop | >= 1100px | Reduced column widths |\n| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |\n| Tablet | >= 768px | Transition zone, some elements stack |\n| Mobile Large | >= 720px | Near-tablet layout |\n| Mobile | >= 480px | Single-column, stacked layout |\n| Mobile Small | >= 376px | Minimum supported width |\n\n### Collapsing Strategy\n- **Navigation**: Horizontal links collapse to hamburger menu below 768px\n- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios\n- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px\n- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)\n- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)\n- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed\n- **Code blocks**: Horizontal scroll with preserved monospace formatting\n\n### Mobile-Specific Adjustments\n- Full-bleed sections extend edge-to-edge with 16px internal gutters\n- Touch targets: minimum 44px for all interactive elements\n- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)\n- Image containers switch from fixed aspect ratios to full-width with auto height\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n```\nBackground:      #0b0b0b (near-black canvas)\nSurface:         #212121 (elevated cards\u002Fcontainers)\nBorder:          #353535 (visible) \u002F #212121 (subtle)\nText Primary:    #ffffff (white on dark)\nText Secondary:  #b9b9b9 (silver on dark)\nText Tertiary:   #797979 (medium gray)\nCTA:             #f36458 (coral-red)\nInteractive:     #0052ef (electric blue, all hovers)\nSuccess:         #19d600 (green, sRGB fallback)\nError:           #dd0000 (pure red)\nLight Surface:   #ededed \u002F #ffffff (inverted sections)\n```\n\n### Example Prompts\n\n**Landing page section:**\n\"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue.\"\n\n**Card grid:**\n\"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card.\"\n\n**Form section:**\n\"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field.\"\n\n**Navigation bar:**\n\"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center\u002Fright: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121.\"\n\n### Iteration Guide\n1. **Start dark**: Begin with `#0b0b0b` background, `#ffffff` primary text, `#b9b9b9` secondary text\n2. **Add structure**: Use `#212121` surfaces and `#353535` borders for containment -- no shadows\n3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body\n4. **Color punctuation**: Add `#f36458` for CTAs and `#0052ef` for all hover\u002Finteractive states\n5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections\n6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata\n7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Sanity (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --bg-canvas: #f7f7f7;\n    --bg-surface: #ffffff;\n    --bg-elevated: #f0f0f0;\n    --bg-dark-section: #0b0b0b;\n    --bg-dark-surface: #212121;\n    \u002F* Brand *\u002F\n    --sanity-red: #f36458;\n    --sanity-red-hover: #e0544a;\n    --electric-blue: #0052ef;\n    --blue-300: #55beff;\n    --blue-dim: #afe3ff;\n    --neon-green: #19d600;\n    --error-red: #dd0000;\n    --accent-magenta: #e600ff;\n    \u002F* Text *\u002F\n    --text-primary: #0b0b0b;\n    --text-secondary: #797979;\n    --text-tertiary: #b9b9b9;\n    --text-on-dark: #ffffff;\n    --text-on-dark-secondary: #b9b9b9;\n    --text-on-dark-tertiary: #797979;\n    \u002F* Border *\u002F\n    --border-light: #ededed;\n    --border-medium: #b9b9b9;\n    --border-dark: #212121;\n    --border-subtle-dark: #353535;\n    \u002F* Shadow *\u002F\n    --shadow-card: 0 1px 3px rgba(0,0,0,0.08);\n    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.06);\n    \u002F* Font *\u002F\n    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;\n    \u002F* Radius *\u002F\n    --radius-xs: 3px;\n    --radius-sm: 5px;\n    --radius-md: 6px;\n    --radius-lg: 12px;\n    --radius-pill: 99999px;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-canvas);\n    color: var(--text-primary);\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(255,255,255,0.88);\n    backdrop-filter: blur(16px) saturate(180%);\n    -webkit-backdrop-filter: blur(16px) saturate(180%);\n    border-bottom: 1px solid var(--border-light);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    text-decoration: none;\n    letter-spacing: -0.3px;\n  }\n  .nav-links { display: flex; gap: 24px; align-items: center; }\n  .nav-links a {\n    font-size: 14px;\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-weight: 500;\n    transition: color 0.15s;\n  }\n  .nav-links a:hover { color: var(--electric-blue); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: var(--bg-dark-section);\n    padding: 100px 32px 96px;\n    text-align: center;\n  }\n  .hero h1 {\n    font-size: 80px;\n    font-weight: 700;\n    line-height: 1.00;\n    letter-spacing: -3.6px;\n    color: var(--text-on-dark);\n    margin-bottom: 20px;\n    max-width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .hero p {\n    font-size: 18px;\n    color: var(--text-on-dark-secondary);\n    line-height: 1.50;\n    letter-spacing: -0.18px;\n    max-width: 560px;\n    margin: 0 auto 36px;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 32px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-dark {\n    background: var(--bg-dark-section);\n    max-width: 100%;\n    padding: 80px 32px;\n  }\n  .section-dark .section-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-size: 38px;\n    font-weight: 600;\n    line-height: 1.10;\n    letter-spacing: -1.14px;\n    margin-bottom: 12px;\n  }\n  .section-subtitle {\n    font-size: 16px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    margin-bottom: 48px;\n    max-width: 600px;\n  }\n  .section-dark .section-title { color: var(--text-on-dark); }\n  .section-dark .section-subtitle { color: var(--text-on-dark-secondary); }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-card {\n    border-radius: var(--radius-md);\n    overflow: hidden;\n    border: 1px solid var(--border-light);\n    background: var(--bg-surface);\n  }\n  .color-swatch {\n    height: 96px;\n    width: 100%;\n  }\n  .color-info {\n    padding: 12px 14px;\n  }\n  .color-name {\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: -0.13px;\n    margin-bottom: 2px;\n  }\n  .color-hex {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n  }\n  .color-role {\n    font-size: 11px;\n    color: var(--text-tertiary);\n    margin-top: 4px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-scale { display: flex; flex-direction: column; gap: 32px; }\n  .type-row {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 24px;\n    align-items: baseline;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-light);\n  }\n  .type-meta {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    line-height: 1.60;\n  }\n  .type-meta span { display: block; }\n  .type-meta .label {\n    font-size: 10px;\n    text-transform: uppercase;\n    color: var(--text-tertiary);\n    letter-spacing: 0.5px;\n    margin-bottom: 2px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n  }\n  .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 20px;\n    font-family: var(--font-display);\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.30;\n    letter-spacing: -0.15px;\n    text-decoration: none;\n    cursor: pointer;\n    transition: all 0.18s ease;\n    border: none;\n    outline: none;\n  }\n  .btn-primary {\n    background: var(--sanity-red);\n    color: #ffffff;\n    border-radius: var(--radius-pill);\n    padding: 12px 28px;\n  }\n  .btn-primary:hover { background: var(--electric-blue); }\n\n  .btn-secondary {\n    background: var(--bg-dark-section);\n    color: var(--text-on-dark-secondary);\n    border-radius: var(--radius-pill);\n    padding: 12px 28px;\n  }\n  .btn-secondary:hover { background: var(--electric-blue); color: #fff; }\n\n  .btn-outline {\n    background: var(--bg-surface);\n    color: var(--text-primary);\n    border: 1px solid var(--text-primary);\n    border-radius: var(--radius-pill);\n    padding: 11px 27px;\n  }\n  .btn-outline:hover { background: var(--electric-blue); color: #fff; border-color: var(--electric-blue); }\n\n  .btn-ghost {\n    background: var(--bg-elevated);\n    color: var(--text-secondary);\n    border-radius: var(--radius-sm);\n    padding: 8px 16px;\n    font-size: 13px;\n  }\n  .btn-ghost:hover { background: var(--electric-blue); color: #fff; }\n\n  .btn-label {\n    background: transparent;\n    color: var(--text-secondary);\n    border-radius: var(--radius-sm);\n    padding: 6px 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    font-family: var(--font-mono);\n  }\n  .btn-label:hover { color: var(--electric-blue); }\n\n  .btn-sm {\n    font-size: 13px;\n    padding: 8px 18px;\n  }\n\n  \u002F* Buttons on dark background *\u002F\n  .btn-dark-primary {\n    background: var(--sanity-red);\n    color: #ffffff;\n    border-radius: var(--radius-pill);\n    padding: 12px 28px;\n  }\n  .btn-dark-primary:hover { background: var(--electric-blue); }\n  .btn-dark-outline {\n    background: transparent;\n    color: #ffffff;\n    border: 1px solid #ffffff;\n    border-radius: var(--radius-pill);\n    padding: 11px 27px;\n  }\n  .btn-dark-outline:hover { background: var(--electric-blue); border-color: var(--electric-blue); }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n  }\n  .card {\n    background: var(--bg-surface);\n    border: 1px solid var(--border-light);\n    border-radius: var(--radius-md);\n    padding: 28px;\n    transition: border-color 0.15s;\n  }\n  .card:hover { border-color: var(--border-medium); }\n  .card-tag {\n    font-size: 11px;\n    font-family: var(--font-mono);\n    text-transform: uppercase;\n    color: var(--text-tertiary);\n    letter-spacing: 0.5px;\n    margin-bottom: 12px;\n  }\n  .card-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.20;\n    letter-spacing: -0.2px;\n    margin-bottom: 8px;\n  }\n  .card-body {\n    font-size: 14px;\n    line-height: 1.55;\n    color: var(--text-secondary);\n  }\n  .card-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--electric-blue);\n    text-decoration: none;\n    margin-top: 16px;\n  }\n  .card-link:hover { text-decoration: underline; }\n\n  \u002F* Dark cards *\u002F\n  .card-dark {\n    background: var(--bg-dark-surface);\n    border: 1px solid var(--border-subtle-dark);\n    border-radius: var(--radius-md);\n    padding: 28px;\n    transition: border-color 0.15s;\n  }\n  .card-dark:hover { border-color: var(--text-on-dark-secondary); }\n  .card-dark .card-tag { color: var(--text-on-dark-tertiary); }\n  .card-dark .card-title { color: var(--text-on-dark); }\n  .card-dark .card-body { color: var(--text-on-dark-secondary); }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    max-width: 680px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full-width { grid-column: 1 \u002F -1; }\n  .form-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary);\n    letter-spacing: -0.13px;\n  }\n  .form-input {\n    font-family: var(--font-display);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--bg-surface);\n    border: 1px solid var(--border-light);\n    border-radius: var(--radius-xs);\n    padding: 10px 12px;\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input::placeholder { color: var(--text-tertiary); }\n  .form-input:focus {\n    border-color: var(--electric-blue);\n    box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.15);\n  }\n  .form-textarea {\n    font-family: var(--font-display);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--bg-surface);\n    border: 1px solid var(--border-light);\n    border-radius: var(--radius-xs);\n    padding: 10px 12px;\n    outline: none;\n    resize: vertical;\n    min-height: 100px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-textarea:focus {\n    border-color: var(--electric-blue);\n    box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.15);\n  }\n  .form-helper {\n    font-size: 12px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* Dark form *\u002F\n  .form-dark .form-label { color: var(--text-on-dark-secondary); }\n  .form-dark .form-input,\n  .form-dark .form-textarea {\n    background: var(--bg-dark-section);\n    border-color: var(--border-dark);\n    color: var(--text-on-dark);\n  }\n  .form-dark .form-input::placeholder,\n  .form-dark .form-textarea::placeholder { color: var(--text-on-dark-tertiary); }\n  .form-dark .form-input:focus,\n  .form-dark .form-textarea:focus {\n    border-color: var(--electric-blue);\n    box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.25);\n  }\n  .form-dark .form-helper { color: var(--text-on-dark-tertiary); }\n\n  \u002F* SPACING SCALE *\u002F\n  .spacing-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n  .spacing-label {\n    width: 80px;\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n  }\n  .spacing-bar {\n    height: 28px;\n    background: var(--sanity-red);\n    border-radius: var(--radius-xs);\n    opacity: 0.8;\n    transition: opacity 0.15s;\n  }\n  .spacing-bar:hover { opacity: 1; }\n\n  \u002F* RADIUS SCALE *\u002F\n  .radius-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-surface);\n    border: 2px solid var(--text-primary);\n  }\n  .radius-label {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    text-align: center;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: start;\n  }\n  .elevation-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n  }\n  .elevation-box {\n    width: 160px;\n    height: 100px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 13px;\n    font-weight: 500;\n  }\n  .elevation-label {\n    font-size: 11px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    text-align: center;\n    max-width: 160px;\n  }\n\n  \u002F* DARK ELEVATION *\u002F\n  .elevation-dark-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: start;\n  }\n  .elevation-dark-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .elevation-dark-box {\n    width: 140px;\n    height: 90px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-on-dark-secondary);\n  }\n  .elevation-dark-label {\n    font-size: 11px;\n    font-family: var(--font-mono);\n    color: var(--text-on-dark-tertiary);\n    text-align: center;\n    max-width: 140px;\n  }\n\n  \u002F* Utility *\u002F\n  .badge {\n    display: inline-block;\n    font-size: 11px;\n    font-family: var(--font-mono);\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 4px 10px;\n    border-radius: var(--radius-pill);\n  }\n  .badge-light { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-light); }\n  .badge-dark { background: var(--bg-dark-section); color: var(--text-on-dark); }\n  .badge-red { background: var(--sanity-red); color: #fff; }\n  .badge-blue { background: var(--electric-blue); color: #fff; }\n  .badge-green { background: var(--neon-green); color: #0b0b0b; }\n\n  .divider {\n    border: none;\n    border-top: 1px solid var(--border-light);\n    margin: 0;\n  }\n  .divider-dark {\n    border: none;\n    border-top: 1px solid var(--border-dark);\n    margin: 0;\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 42px; letter-spacing: -1.6px; }\n    .hero { padding: 64px 20px 60px; }\n    .section { padding: 56px 20px; }\n    .section-dark { padding: 56px 20px; }\n    .section-title { font-size: 28px; letter-spacing: -0.6px; }\n    .type-row { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }\n    .nav-links { display: none; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Sanity\u003C\u002Fh1>\n  \u003Cp>Structured content meets precise design. A dark-first, engineering-grade design language built on achromatic neutrals, tight typography, and vivid accent punctuation.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn btn-dark-primary\">Get Started\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn btn-dark-outline\">Contact Sales\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Pure achromatic gray scale with vivid accent punctuation. No warm or cool bias in the neutral range.\u003C\u002Fp>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0b0b0b\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Sanity Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0b0b0b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary canvas\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#212121\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Dark Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#212121\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Elevated cards, containers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#353535\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Medium Border\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#353535\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Visible borders, dividers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#797979\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Medium Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#797979\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Tertiary text, metadata\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#b9b9b9\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Silver\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#b9b9b9\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Secondary text on dark\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ededed\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ededed\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Light surface, backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ffffff; border-bottom: 1px solid #ededed\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary text on dark, light surfaces\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#f36458\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Sanity Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#f36458\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary CTA\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0052ef\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Electric Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0052ef\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Hover\u002Factive state, focus rings\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#55beff\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Blue 300\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#55beff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Light blue accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#19d600\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Neon Green\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#19d600\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Success, accent green\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#dd0000\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Error Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#dd0000\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Errors, destructive actions\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Space Grotesk (substitute for waldenburgNormal) with tight negative tracking at display sizes. IBM Plex Mono for technical labels.\u003C\u002Fp>\n  \u003Cdiv class=\"type-scale\">\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Display\u003C\u002Fspan>\n        \u003Cspan>80px \u002F 700\u003C\u002Fspan>\n        \u003Cspan>LH: 1.00\u003C\u002Fspan>\n        \u003Cspan>LS: -3.6px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:80px; font-weight:700; line-height:1.00; letter-spacing:-3.6px;\">Structure\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 1\u003C\u002Fspan>\n        \u003Cspan>48px \u002F 600\u003C\u002Fspan>\n        \u003Cspan>LH: 1.08\u003C\u002Fspan>\n        \u003Cspan>LS: -1.68px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.08; letter-spacing:-1.68px;\">Powers intelligence\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 2\u003C\u002Fspan>\n        \u003Cspan>38px \u002F 600\u003C\u002Fspan>\n        \u003Cspan>LH: 1.10\u003C\u002Fspan>\n        \u003Cspan>LS: -1.14px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:38px; font-weight:600; line-height:1.10; letter-spacing:-1.14px;\">Content operations\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 3\u003C\u002Fspan>\n        \u003Cspan>24px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.24\u003C\u002Fspan>\n        \u003Cspan>LS: -0.24px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.24; letter-spacing:-0.24px;\">Composable content platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Subheading\u003C\u002Fspan>\n        \u003Cspan>20px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.13\u003C\u002Fspan>\n        \u003Cspan>LS: -0.2px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:20px; font-weight:500; line-height:1.13; letter-spacing:-0.2px;\">One API, every platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Body Large\u003C\u002Fspan>\n        \u003Cspan>18px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>LS: -0.18px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.50; letter-spacing:-0.18px;\">Mirror how your content operations team works. Treat content as data with a structured, API-first approach.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Body\u003C\u002Fspan>\n        \u003Cspan>16px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Power anything with one unified content platform. Connect to any frontend, any channel, any device.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Caption\u003C\u002Fspan>\n        \u003Cspan>13px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>LS: -0.13px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:13px; font-weight:400; line-height:1.50; letter-spacing:-0.13px;\">Loved by 1M+ users and 6K+ teams worldwide. Enterprise-grade content infrastructure.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Mono Label\u003C\u002Fspan>\n        \u003Cspan>12px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>UPPERCASE\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; font-family:var(--font-mono); letter-spacing:0.5px;\">CONTENT LAKE · GROQ · STUDIO · SCHEMAS\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Code\u003C\u002Fspan>\n        \u003Cspan>15px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>IBM Plex Mono\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.50; font-family:var(--font-mono);\">sanity.fetch('*[_type == \"post\"]')\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Pill-shaped CTAs with coral-red brand color. All interactive elements hover to electric blue.\u003C\u002Fp>\n\n  \u003Cdiv style=\"margin-bottom: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Light Surface\u003C\u002Fh3>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-primary\">Get Started\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-secondary\">Contact Sales\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-outline\">Learn More\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-ghost\">Filter\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-label\">DOCUMENTATION\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-bottom: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Small Variants\u003C\u002Fh3>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-primary btn-sm\">Get Started\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-outline btn-sm\">Details\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-ghost btn-sm\">Tag\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"background: var(--bg-dark-section); padding: 32px; border-radius: var(--radius-lg);\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; color: var(--text-on-dark); letter-spacing:-0.16px;\">Dark Surface\u003C\u002Fh3>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-dark-primary\">Get Started\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-dark-outline\">Contact Sales\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-ghost\" style=\"background: var(--bg-dark-surface); color: var(--text-on-dark-secondary);\">Filter\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-label\" style=\"color: var(--text-on-dark-tertiary);\">DOCUMENTATION\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Badges\u003C\u002Fh3>\n    \u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: 10px;\">\n      \u003Cspan class=\"badge badge-light\">Neutral\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-dark\">Dark\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-red\">New\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-blue\">Featured\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-green\">Active\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal containment with border-based separation. Dark cards use surface color shifts for elevation.\u003C\u002Fp>\n\n  \u003Cdiv style=\"margin-bottom: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.16px;\">Light Cards\u003C\u002Fh3>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-tag\">Content Lake\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-title\">Structured content as data\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">Store, query, and distribute content across any channel using a single source of truth with real-time collaboration.\u003C\u002Fdiv>\n        \u003Ca href=\"#\" class=\"card-link\">Learn more →\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-tag\">GROQ\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-title\">Query language for content\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">Purpose-built query language that lets you fetch exactly the content you need, in the shape you want it.\u003C\u002Fdiv>\n        \u003Ca href=\"#\" class=\"card-link\">Explore GROQ →\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-tag\">Studio\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-title\">Customizable editing environment\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\">A fully customizable, open-source editing environment that adapts to your team's workflow and content model.\u003C\u002Fdiv>\n        \u003Ca href=\"#\" class=\"card-link\">Try Studio →\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"background: var(--bg-dark-section); padding: 40px 32px; border-radius: var(--radius-lg); margin: 0 -32px;\">\n    \u003Cdiv style=\"max-width: 1200px; margin: 0 auto;\">\n      \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; color: var(--text-on-dark); letter-spacing:-0.16px;\">Dark Cards\u003C\u002Fh3>\n      \u003Cdiv class=\"card-grid\">\n        \u003Cdiv class=\"card-dark\">\n          \u003Cdiv class=\"card-tag\">Schemas\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Define your content model\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-body\">Use code-first schemas to define documents, objects, and fields with full TypeScript support and validation rules.\u003C\u002Fdiv>\n          \u003Ca href=\"#\" class=\"card-link\">View docs →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"card-dark\">\n          \u003Cdiv class=\"card-tag\">Plugins\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">Extend with the ecosystem\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-body\">Community-driven plugin ecosystem with dashboards, custom inputs, media management, and workflow tools.\u003C\u002Fdiv>\n          \u003Ca href=\"#\" class=\"card-link\">Browse plugins →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"card-dark\">\n          \u003Cdiv class=\"card-tag\">Webhooks\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-title\">React to content changes\u003C\u002Fdiv>\n          \u003Cdiv class=\"card-body\">Trigger builds, sync to external systems, and automate workflows whenever your content updates in real-time.\u003C\u002Fdiv>\n          \u003Ca href=\"#\" class=\"card-link\">Set up →\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal inputs with subtle borders and blue focus rings. Dark variant uses colorimetric depth.\u003C\u002Fp>\n\n  \u003Cdiv style=\"margin-bottom: 48px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.16px;\">Light Form\u003C\u002Fh3>\n    \u003Cdiv class=\"form-grid\">\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">First Name\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter first name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Last Name\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter last name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group full-width\">\n        \u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\n        \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@company.com\">\n        \u003Cspan class=\"form-helper\">We will never share your email.\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group full-width\">\n        \u003Clabel class=\"form-label\">Message\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-textarea\" placeholder=\"Tell us about your project...\">\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Cbutton class=\"btn btn-primary\" style=\"width:100%;\">Submit\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"background: var(--bg-dark-section); padding: 40px 32px; border-radius: var(--radius-lg); margin: 0 -32px;\">\n    \u003Cdiv style=\"max-width: 1200px; margin: 0 auto;\">\n      \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; color: var(--text-on-dark); letter-spacing:-0.16px;\">Dark Form\u003C\u002Fh3>\n      \u003Cdiv class=\"form-grid form-dark\">\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\n          \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"my-sanity-project\">\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Clabel class=\"form-label\">Dataset\u003C\u002Flabel>\n          \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"production\">\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group full-width\">\n          \u003Clabel class=\"form-label\">GROQ Query\u003C\u002Flabel>\n          \u003Ctextarea class=\"form-textarea\" placeholder='*[_type == \"post\"]{title, slug, body}'>\u003C\u002Ftextarea>\n          \u003Cspan class=\"form-helper\">Write a GROQ query to test against your dataset.\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"form-group\">\n          \u003Cbutton class=\"btn btn-dark-primary\" style=\"width:100%;\">Run Query\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit. Spacing follows a controlled progression for consistent rhythm.\u003C\u002Fp>\n  \u003Cdiv class=\"spacing-grid\">\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 4px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 32px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 64px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 96px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 160px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 220px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 320px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 420px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">96px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 560px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">120px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 680px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Sharp geometry for inputs, subtle rounding for cards, full pills for buttons and badges.\u003C\u002Fp>\n  \u003Cdiv class=\"radius-grid\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 3px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">3px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Inputs\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 5px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">5px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Ghost buttons\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">6px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Large cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 99999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">99999px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Pill \u002F CTA\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Colorimetric depth system. Elevation is communicated through surface color shifts rather than shadows.\u003C\u002Fp>\n\n  \u003Cdiv style=\"margin-bottom: 48px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.16px;\">Light Mode Elevation\u003C\u002Fh3>\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-item\">\n        \u003Cdiv class=\"elevation-box\" style=\"background: var(--bg-canvas); border: 1px solid var(--border-light); color: var(--text-secondary);\">Level 0\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-label\">Canvas\u003Cbr>#f7f7f7\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-item\">\n        \u003Cdiv class=\"elevation-box\" style=\"background: var(--bg-surface); box-shadow: var(--shadow-card); color: var(--text-secondary);\">Level 1\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-label\">Surface\u003Cbr>#ffffff\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-item\">\n        \u003Cdiv class=\"elevation-box\" style=\"background: var(--bg-surface); box-shadow: var(--shadow-elevated); color: var(--text-secondary);\">Level 2\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-label\">Elevated\u003Cbr>shadow\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"background: var(--bg-dark-section); padding: 40px 32px; border-radius: var(--radius-lg); margin: 0 -32px;\">\n    \u003Cdiv style=\"max-width: 1200px; margin: 0 auto;\">\n      \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; color: var(--text-on-dark); letter-spacing:-0.16px;\">Dark Mode Depth (Colorimetric)\u003C\u002Fh3>\n      \u003Cdiv class=\"elevation-dark-grid\">\n        \u003Cdiv class=\"elevation-dark-item\">\n          \u003Cdiv class=\"elevation-dark-box\" style=\"background: #000000; border: 1px solid #212121;\">Ground\u003C\u002Fdiv>\n          \u003Cdiv class=\"elevation-dark-label\">#000000\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-dark-item\">\n          \u003Cdiv class=\"elevation-dark-box\" style=\"background: #0b0b0b; border: 1px solid #212121;\">Canvas\u003C\u002Fdiv>\n          \u003Cdiv class=\"elevation-dark-label\">#0b0b0b\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-dark-item\">\n          \u003Cdiv class=\"elevation-dark-box\" style=\"background: #212121; border: 1px solid #353535;\">Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"elevation-dark-label\">#212121\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-dark-item\">\n          \u003Cdiv class=\"elevation-dark-box\" style=\"background: #353535; border: 1px solid #797979;\">Prominent\u003C\u002Fdiv>\n          \u003Cdiv class=\"elevation-dark-label\">#353535\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-dark-item\">\n          \u003Cdiv class=\"elevation-dark-box\" style=\"background: #ffffff; color: #0b0b0b; border: 1px solid #ededed;\">Inverted\u003C\u002Fdiv>\n          \u003Cdiv class=\"elevation-dark-label\">#ffffff\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"background: var(--bg-dark-section); padding: 48px 32px; margin-top: 0;\">\n  \u003Cdiv style=\"max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;\">\n    \u003Cspan style=\"font-size: 13px; color: var(--text-on-dark-secondary); font-family: var(--font-mono);\">Design tokens extracted from sanity.io\u003C\u002Fspan>\n    \u003Cspan style=\"font-size: 12px; color: var(--text-on-dark-tertiary); font-family: var(--font-mono); text-transform: uppercase;\">awesome-design-md\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Sanity (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary dark surfaces *\u002F\n    --bg-canvas: #0b0b0b;\n    --bg-surface: #212121;\n    --bg-elevated: #353535;\n    --bg-prominent: #797979;\n    \u002F* Brand *\u002F\n    --sanity-red: #f36458;\n    --sanity-red-hover: #e0544a;\n    --electric-blue: #0052ef;\n    --blue-300: #55beff;\n    --blue-dim: #afe3ff;\n    --neon-green: #19d600;\n    --error-red: #dd0000;\n    --accent-magenta: #e600ff;\n    \u002F* Text *\u002F\n    --text-primary: #ffffff;\n    --text-secondary: #b9b9b9;\n    --text-tertiary: #797979;\n    \u002F* Border *\u002F\n    --border-subtle: #212121;\n    --border-medium: #353535;\n    --border-strong: #797979;\n    \u002F* Shadow *\u002F\n    --shadow-ring: 0 0 0 1px #212121;\n    \u002F* Font *\u002F\n    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;\n    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;\n    \u002F* Radius *\u002F\n    --radius-xs: 3px;\n    --radius-sm: 5px;\n    --radius-md: 6px;\n    --radius-lg: 12px;\n    --radius-pill: 99999px;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-canvas);\n    color: var(--text-primary);\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--text-primary);\n    color: var(--bg-canvas);\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    padding: 6px 14px;\n    border-radius: var(--radius-pill);\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(11, 11, 11, 0.88);\n    backdrop-filter: blur(16px) saturate(180%);\n    -webkit-backdrop-filter: blur(16px) saturate(180%);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    text-decoration: none;\n    letter-spacing: -0.3px;\n  }\n  .nav-links { display: flex; gap: 24px; align-items: center; }\n  .nav-links a {\n    font-size: 14px;\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-weight: 500;\n    transition: color 0.15s;\n  }\n  .nav-links a:hover { color: var(--electric-blue); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: var(--bg-canvas);\n    padding: 100px 32px 96px;\n    text-align: center;\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .hero h1 {\n    font-size: 80px;\n    font-weight: 700;\n    line-height: 1.00;\n    letter-spacing: -3.6px;\n    color: var(--text-primary);\n    margin-bottom: 20px;\n    max-width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .hero p {\n    font-size: 18px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    letter-spacing: -0.18px;\n    max-width: 560px;\n    margin: 0 auto 36px;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 32px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-size: 38px;\n    font-weight: 600;\n    line-height: 1.10;\n    letter-spacing: -1.14px;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .section-subtitle {\n    font-size: 16px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    margin-bottom: 48px;\n    max-width: 600px;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-card {\n    border-radius: var(--radius-md);\n    overflow: hidden;\n    border: 1px solid var(--border-subtle);\n    background: var(--bg-surface);\n  }\n  .color-swatch {\n    height: 96px;\n    width: 100%;\n  }\n  .color-info {\n    padding: 12px 14px;\n  }\n  .color-name {\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: -0.13px;\n    margin-bottom: 2px;\n    color: var(--text-primary);\n  }\n  .color-hex {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n  }\n  .color-role {\n    font-size: 11px;\n    color: var(--text-tertiary);\n    margin-top: 4px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-scale { display: flex; flex-direction: column; gap: 32px; }\n  .type-row {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 24px;\n    align-items: baseline;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .type-meta {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    line-height: 1.60;\n  }\n  .type-meta span { display: block; }\n  .type-meta .label {\n    font-size: 10px;\n    text-transform: uppercase;\n    color: var(--text-tertiary);\n    letter-spacing: 0.5px;\n    margin-bottom: 2px;\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n  }\n  .btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 20px;\n    font-family: var(--font-display);\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.30;\n    letter-spacing: -0.15px;\n    text-decoration: none;\n    cursor: pointer;\n    transition: all 0.18s ease;\n    border: none;\n    outline: none;\n  }\n  .btn-primary {\n    background: var(--sanity-red);\n    color: #ffffff;\n    border-radius: var(--radius-pill);\n    padding: 12px 28px;\n  }\n  .btn-primary:hover { background: var(--electric-blue); }\n\n  .btn-secondary {\n    background: var(--bg-surface);\n    color: var(--text-secondary);\n    border-radius: var(--radius-pill);\n    padding: 12px 28px;\n  }\n  .btn-secondary:hover { background: var(--electric-blue); color: #fff; }\n\n  .btn-outline {\n    background: transparent;\n    color: var(--text-primary);\n    border: 1px solid var(--text-primary);\n    border-radius: var(--radius-pill);\n    padding: 11px 27px;\n  }\n  .btn-outline:hover { background: var(--electric-blue); color: #fff; border-color: var(--electric-blue); }\n\n  .btn-ghost {\n    background: var(--bg-surface);\n    color: var(--text-secondary);\n    border-radius: var(--radius-sm);\n    padding: 8px 16px;\n    font-size: 13px;\n  }\n  .btn-ghost:hover { background: var(--electric-blue); color: #fff; }\n\n  .btn-label {\n    background: transparent;\n    color: var(--text-tertiary);\n    border-radius: var(--radius-sm);\n    padding: 6px 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    font-family: var(--font-mono);\n  }\n  .btn-label:hover { color: var(--electric-blue); }\n\n  .btn-sm {\n    font-size: 13px;\n    padding: 8px 18px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n  }\n  .card {\n    background: var(--bg-surface);\n    border: 1px solid var(--border-medium);\n    border-radius: var(--radius-md);\n    padding: 28px;\n    transition: border-color 0.15s;\n  }\n  .card:hover { border-color: var(--border-strong); }\n  .card-tag {\n    font-size: 11px;\n    font-family: var(--font-mono);\n    text-transform: uppercase;\n    color: var(--text-tertiary);\n    letter-spacing: 0.5px;\n    margin-bottom: 12px;\n  }\n  .card-title {\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.20;\n    letter-spacing: -0.2px;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n  .card-body {\n    font-size: 14px;\n    line-height: 1.55;\n    color: var(--text-secondary);\n  }\n  .card-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--blue-300);\n    text-decoration: none;\n    margin-top: 16px;\n  }\n  .card-link:hover { text-decoration: underline; }\n\n  \u002F* FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    max-width: 680px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full-width { grid-column: 1 \u002F -1; }\n  .form-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    letter-spacing: -0.13px;\n  }\n  .form-input {\n    font-family: var(--font-display);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--bg-canvas);\n    border: 1px solid var(--border-subtle);\n    border-radius: var(--radius-xs);\n    padding: 10px 12px;\n    outline: none;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-input::placeholder { color: var(--text-tertiary); }\n  .form-input:focus {\n    border-color: var(--electric-blue);\n    box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.3);\n  }\n  .form-textarea {\n    font-family: var(--font-display);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--bg-canvas);\n    border: 1px solid var(--border-subtle);\n    border-radius: var(--radius-xs);\n    padding: 10px 12px;\n    outline: none;\n    resize: vertical;\n    min-height: 100px;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .form-textarea:focus {\n    border-color: var(--electric-blue);\n    box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.3);\n  }\n  .form-helper {\n    font-size: 12px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* SPACING SCALE *\u002F\n  .spacing-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n  .spacing-label {\n    width: 80px;\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    text-align: right;\n    flex-shrink: 0;\n  }\n  .spacing-bar {\n    height: 28px;\n    background: var(--sanity-red);\n    border-radius: var(--radius-xs);\n    opacity: 0.8;\n    transition: opacity 0.15s;\n  }\n  .spacing-bar:hover { opacity: 1; }\n\n  \u002F* RADIUS SCALE *\u002F\n  .radius-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-surface);\n    border: 2px solid var(--text-secondary);\n  }\n  .radius-label {\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--text-secondary);\n    text-align: center;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: start;\n  }\n  .elevation-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .elevation-box {\n    width: 140px;\n    height: 90px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary);\n  }\n  .elevation-label {\n    font-size: 11px;\n    font-family: var(--font-mono);\n    color: var(--text-tertiary);\n    text-align: center;\n    max-width: 140px;\n  }\n\n  \u002F* Utility *\u002F\n  .badge {\n    display: inline-block;\n    font-size: 11px;\n    font-family: var(--font-mono);\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 4px 10px;\n    border-radius: var(--radius-pill);\n  }\n  .badge-subtle { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); }\n  .badge-filled { background: var(--text-primary); color: var(--bg-canvas); }\n  .badge-red { background: var(--sanity-red); color: #fff; }\n  .badge-blue { background: var(--electric-blue); color: #fff; }\n  .badge-green { background: var(--neon-green); color: #0b0b0b; }\n\n  .divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0;\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 42px; letter-spacing: -1.6px; }\n    .hero { padding: 64px 20px 60px; }\n    .section { padding: 56px 20px; }\n    .section-title { font-size: 28px; letter-spacing: -0.6px; }\n    .type-row { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }\n    .nav-links { display: none; }\n    .dark-badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 10px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Ca href=\"#\" class=\"nav-brand\">awesome-design-md\u003C\u002Fa>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Sanity\u003C\u002Fh1>\n  \u003Cp>Structured content meets precise design. A dark-first, engineering-grade design language built on achromatic neutrals, tight typography, and vivid accent punctuation.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn btn-primary\">Get Started\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn btn-outline\">Contact Sales\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Pure achromatic gray scale with vivid accent punctuation. No warm or cool bias in the neutral range.\u003C\u002Fp>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0b0b0b\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Sanity Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0b0b0b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary canvas\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#212121\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Dark Surface\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#212121\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Elevated cards, containers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#353535\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Medium Border\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#353535\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Visible borders, dividers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#797979\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Medium Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#797979\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Tertiary text, metadata\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#b9b9b9\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Silver\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#b9b9b9\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Secondary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ededed\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ededed\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Light surfaces\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ffffff; border-bottom: 1px solid #353535;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary text on dark\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#f36458\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Sanity Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#f36458\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary CTA\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0052ef\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Electric Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0052ef\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Hover\u002Factive, focus rings\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#55beff\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Blue 300\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#55beff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Light blue accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#19d600\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Neon Green\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#19d600\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Success, accent green\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#dd0000\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Error Red\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#dd0000\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Errors, destructive\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Space Grotesk (substitute for waldenburgNormal) with tight negative tracking at display sizes. IBM Plex Mono for technical labels.\u003C\u002Fp>\n  \u003Cdiv class=\"type-scale\">\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Display\u003C\u002Fspan>\n        \u003Cspan>80px \u002F 700\u003C\u002Fspan>\n        \u003Cspan>LH: 1.00\u003C\u002Fspan>\n        \u003Cspan>LS: -3.6px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:80px; font-weight:700; line-height:1.00; letter-spacing:-3.6px;\">Structure\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 1\u003C\u002Fspan>\n        \u003Cspan>48px \u002F 600\u003C\u002Fspan>\n        \u003Cspan>LH: 1.08\u003C\u002Fspan>\n        \u003Cspan>LS: -1.68px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.08; letter-spacing:-1.68px;\">Powers intelligence\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 2\u003C\u002Fspan>\n        \u003Cspan>38px \u002F 600\u003C\u002Fspan>\n        \u003Cspan>LH: 1.10\u003C\u002Fspan>\n        \u003Cspan>LS: -1.14px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:38px; font-weight:600; line-height:1.10; letter-spacing:-1.14px;\">Content operations\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Heading 3\u003C\u002Fspan>\n        \u003Cspan>24px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.24\u003C\u002Fspan>\n        \u003Cspan>LS: -0.24px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.24; letter-spacing:-0.24px;\">Composable content platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Subheading\u003C\u002Fspan>\n        \u003Cspan>20px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.13\u003C\u002Fspan>\n        \u003Cspan>LS: -0.2px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:20px; font-weight:500; line-height:1.13; letter-spacing:-0.2px;\">One API, every platform\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Body Large\u003C\u002Fspan>\n        \u003Cspan>18px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>LS: -0.18px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.50; letter-spacing:-0.18px;\">Mirror how your content operations team works. Treat content as data with a structured, API-first approach.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Body\u003C\u002Fspan>\n        \u003Cspan>16px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Power anything with one unified content platform. Connect to any frontend, any channel, any device.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Caption\u003C\u002Fspan>\n        \u003Cspan>13px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>LS: -0.13px\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:13px; font-weight:400; line-height:1.50; letter-spacing:-0.13px; color: var(--text-secondary);\">Loved by 1M+ users and 6K+ teams worldwide. Enterprise-grade content infrastructure.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Mono Label\u003C\u002Fspan>\n        \u003Cspan>12px \u002F 500\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>UPPERCASE\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:12px; font-weight:500; line-height:1.50; text-transform:uppercase; font-family:var(--font-mono); letter-spacing:0.5px; color: var(--text-tertiary);\">CONTENT LAKE · GROQ · STUDIO · SCHEMAS\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"type-row\">\n      \u003Cdiv class=\"type-meta\">\n        \u003Cspan class=\"label\">Code\u003C\u002Fspan>\n        \u003Cspan>15px \u002F 400\u003C\u002Fspan>\n        \u003Cspan>LH: 1.50\u003C\u002Fspan>\n        \u003Cspan>IBM Plex Mono\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"font-size:15px; font-weight:400; line-height:1.50; font-family:var(--font-mono); color: var(--neon-green);\">sanity.fetch('*[_type == \"post\"]')\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Pill-shaped CTAs with coral-red brand color. All interactive elements hover to electric blue.\u003C\u002Fp>\n\n  \u003Cdiv style=\"margin-bottom: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Standard Buttons\u003C\u002Fh3>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-primary\">Get Started\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-secondary\">Contact Sales\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-outline\">Learn More\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-ghost\">Filter\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-label\">DOCUMENTATION\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-bottom: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Small Variants\u003C\u002Fh3>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cbutton class=\"btn btn-primary btn-sm\">Get Started\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-outline btn-sm\">Details\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn btn-ghost btn-sm\">Tag\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:16px; letter-spacing:-0.16px;\">Badges\u003C\u002Fh3>\n    \u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: 10px;\">\n      \u003Cspan class=\"badge badge-subtle\">Neutral\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-filled\">Filled\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-red\">New\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-blue\">Featured\u003C\u002Fspan>\n      \u003Cspan class=\"badge badge-green\">Active\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal containment with border-based separation. Depth communicated through surface color shifts.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Content Lake\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-title\">Structured content as data\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">Store, query, and distribute content across any channel using a single source of truth with real-time collaboration.\u003C\u002Fdiv>\n      \u003Ca href=\"#\" class=\"card-link\">Learn more →\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">GROQ\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-title\">Query language for content\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">Purpose-built query language that lets you fetch exactly the content you need, in the shape you want it.\u003C\u002Fdiv>\n      \u003Ca href=\"#\" class=\"card-link\">Explore GROQ →\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Studio\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-title\">Customizable editing environment\u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">A fully customizable, open-source editing environment that adapts to your team's workflow and content model.\u003C\u002Fdiv>\n      \u003Ca href=\"#\" class=\"card-link\">Try Studio →\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top: 40px;\">\n    \u003Ch3 style=\"font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.16px;\">Elevated Cards\u003C\u002Fh3>\n    \u003Cdiv class=\"card-grid\">\n      \u003Cdiv style=\"background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 28px;\">\n        \u003Cdiv class=\"card-tag\" style=\"color: var(--text-secondary);\">Schemas\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-title\">Define your content model\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\" style=\"color: var(--text-secondary);\">Use code-first schemas to define documents, objects, and fields with full TypeScript support.\u003C\u002Fdiv>\n        \u003Ca href=\"#\" class=\"card-link\">View docs →\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 28px;\">\n        \u003Cdiv class=\"card-tag\" style=\"color: var(--text-secondary);\">Plugins\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-title\">Extend with the ecosystem\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-body\" style=\"color: var(--text-secondary);\">Community-driven plugin ecosystem with dashboards, custom inputs, and workflow tools.\u003C\u002Fdiv>\n        \u003Ca href=\"#\" class=\"card-link\">Browse plugins →\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal inputs with subtle borders on the dark canvas. Blue focus rings for accessibility.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"my-sanity-project\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Dataset\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"production\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full-width\">\n      \u003Clabel class=\"form-label\">API Token\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"sk_xxxxxxxxxxxxxxxx\">\n      \u003Cspan class=\"form-helper\">Keep your API token secure. Never commit it to version control.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group full-width\">\n      \u003Clabel class=\"form-label\">GROQ Query\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-textarea\" placeholder='*[_type == \"post\"]{title, slug, body}'>\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-helper\">Write a GROQ query to test against your dataset.\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Cbutton class=\"btn btn-primary\" style=\"width:100%;\">Run Query\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit. Spacing follows a controlled progression for consistent rhythm.\u003C\u002Fp>\n  \u003Cdiv class=\"spacing-grid\">\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 4px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 32px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 64px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 96px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 160px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 220px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 320px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">64px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 420px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">96px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 560px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cdiv class=\"spacing-label\">120px\u003C\u002Fdiv>\n      \u003Cdiv class=\"spacing-bar\" style=\"width: 680px;\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Sharp geometry for inputs, subtle rounding for cards, full pills for buttons and badges.\u003C\u002Fp>\n  \u003Cdiv class=\"radius-grid\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 3px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">3px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Inputs\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 5px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">5px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Ghost buttons\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">6px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Large cards\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 99999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">99999px\u003Cbr>\u003Cspan style=\"font-size:10px; color:var(--text-tertiary)\">Pill \u002F CTA\u003C\u002Fspan>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"divider\">\n\n\u003C!-- ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Colorimetric depth system. Elevation is communicated through surface color shifts rather than shadows.\u003C\u002Fp>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-item\">\n      \u003Cdiv class=\"elevation-box\" style=\"background: #000000; border: 1px solid #212121;\">Ground\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-label\">#000000\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-item\">\n      \u003Cdiv class=\"elevation-box\" style=\"background: #0b0b0b; border: 1px solid #212121;\">Canvas\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-label\">#0b0b0b\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-item\">\n      \u003Cdiv class=\"elevation-box\" style=\"background: #212121; border: 1px solid #353535;\">Surface\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-label\">#212121\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-item\">\n      \u003Cdiv class=\"elevation-box\" style=\"background: #353535; border: 1px solid #797979;\">Prominent\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-label\">#353535\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-item\">\n      \u003Cdiv class=\"elevation-box\" style=\"background: #ffffff; color: #0b0b0b; border: 1px solid #ededed;\">Inverted\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-label\">#ffffff\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter style=\"border-top: 1px solid var(--border-subtle); padding: 48px 32px;\">\n  \u003Cdiv style=\"max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;\">\n    \u003Cspan style=\"font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono);\">Design tokens extracted from sanity.io\u003C\u002Fspan>\n    \u003Cspan style=\"font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase;\">awesome-design-md\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Sanity Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsanity\u002FDESIGN.md) extracted from the public [Sanity](https:\u002F\u002Fsanity.io\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsanity\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sanity design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Sanity Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsanity\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Sanity Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsanity\u002Fpreview-screenshot.png)\n",{"slug":306,"name":307,"category":90,"designMd":308,"previewHtml":309,"previewDarkHtml":310,"readme":311},"sentry","Sentry","# Design System Inspiration of Sentry\n\n## 1. Visual Theme & Atmosphere\n\nSentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (`#1f1633`, `#150f23`) that evoke the late-night debugging sessions Sentry was built for. Against this inky canvas, a carefully curated set of purples, pinks, and a distinctive lime-green accent (`#c2ef4e`) create a visual system that feels simultaneously technical and vibrant.\n\nThe typography pairing is deliberate: \"Dammit Sans\" appears at hero scale (88px, weight 700) as a display font with personality and attitude that matches Sentry's irreverent brand voice (\"Code breaks. Fix it faster.\"), while Rubik serves as the workhorse UI font across all functional text — headings, body, buttons, captions, and navigation. Monaco provides the monospace layer for code snippets and technical content, completing the developer-tool trinity.\n\nWhat makes Sentry distinctive is its embrace of the \"dark IDE\" aesthetic without feeling cold or sterile. Warm purple tones replace the typical cool grays of developer tools, and bold illustrative elements (3D characters, colorful product screenshots) punctuate the dark canvas. The button system uses a signature muted purple (`#79628c`) with inset shadows that creates a tactile, almost physical quality — buttons feel like they could be pressed into the surface.\n\n**Key Characteristics:**\n- Dark purple-black backgrounds (`#1f1633`, `#150f23`) — never pure black\n- Warm purple accent spectrum: from deep (`#362d59`) through mid (`#79628c`, `#6a5fc1`) to vibrant (`#422082`)\n- Lime-green accent (`#c2ef4e`) for high-visibility CTAs and highlights\n- Pink\u002Fcoral accents (`#ffb287`, `#fa7faa`) for focus states and secondary highlights\n- \"Dammit Sans\" display font for brand personality at hero scale\n- Rubik as primary UI font with uppercase letter-spaced labels\n- Monaco monospace for code elements\n- Inset shadows on buttons creating tactile depth\n- Frosted glass effects with `blur(18px) saturate(180%)`\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Deep Purple** (`#1f1633`): Primary background, the defining color of the brand\n- **Darker Purple** (`#150f23`): Deeper sections, footer, secondary backgrounds\n- **Border Purple** (`#362d59`): Borders, dividers, subtle structural lines\n\n### Accent Colors\n- **Sentry Purple** (`#6a5fc1`): Primary interactive color — links, hover states, focus rings\n- **Muted Purple** (`#79628c`): Button backgrounds, secondary interactive elements\n- **Deep Violet** (`#422082`): Select dropdowns, active states, high-emphasis surfaces\n- **Lime Green** (`#c2ef4e`): High-visibility accent, special links, badge highlights\n- **Coral** (`#ffb287`): Focus state backgrounds, warm accent\n- **Pink** (`#fa7faa`): Focus outlines, decorative accents\n\n### Text Colors\n- **Pure White** (`#ffffff`): Primary text on dark backgrounds\n- **Light Gray** (`#e5e7eb`): Secondary text, muted content\n- **Code Yellow** (`#dcdcaa`): Syntax highlighting, code tokens\n\n### Surface & Overlay\n- **Glass White** (`rgba(255, 255, 255, 0.18)`): Frosted glass button backgrounds\n- **Glass Dark** (`rgba(54, 22, 107, 0.14)`): Hover overlay on glass elements\n- **Input White** (`#ffffff`): Form input backgrounds (light context)\n- **Input Border** (`#cfcfdb`): Form field borders\n\n### Shadows\n- **Ambient Glow** (`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px`): Deep purple ambient shadow\n- **Button Hover** (`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`): Elevated hover state\n- **Card Shadow** (`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`): Standard card elevation\n- **Inset Button** (`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`): Tactile pressed effect\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Dammit Sans` — brand personality font for hero headings\n- **Primary UI**: `Rubik`, with fallbacks: `-apple-system, system-ui, Segoe UI, Helvetica, Arial`\n- **Monospace**: `Monaco`, with fallbacks: `Menlo, Ubuntu Mono`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Dammit Sans | 88px (5.50rem) | 700 | 1.20 (tight) | normal | Maximum impact, brand voice |\n| Display Secondary | Dammit Sans | 60px (3.75rem) | 500 | 1.10 (tight) | normal | Secondary hero text |\n| Section Heading | Rubik | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Major section titles |\n| Sub-heading | Rubik | 27px (1.69rem) | 500 | 1.25 (tight) | normal | Feature section headers |\n| Card Title | Rubik | 24px (1.50rem) | 500 | 1.25 (tight) | normal | Card and block headings |\n| Feature Title | Rubik | 20px (1.25rem) | 600 | 1.25 (tight) | normal | Emphasized feature names |\n| Body | Rubik | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Emphasis | Rubik | 16px (1.00rem) | 500–600 | 1.50 | normal | Bold body, nav items |\n| Nav Label | Rubik | 15px (0.94rem) | 500 | 1.40 | normal | Navigation links |\n| Uppercase Label | Rubik | 15px (0.94rem) | 500 | 1.25 (tight) | normal | `text-transform: uppercase` |\n| Button Text | Rubik | 14px (0.88rem) | 500–700 | 1.14–1.29 (tight) | 0.2px | `text-transform: uppercase` |\n| Caption | Rubik | 14px (0.88rem) | 500–700 | 1.00–1.43 | 0.2px | Often uppercase |\n| Small Caption | Rubik | 12px (0.75rem) | 600 | 2.00 (relaxed) | normal | Subtle annotations |\n| Micro Label | Rubik | 10px (0.63rem) | 600 | 1.80 (relaxed) | 0.25px | `text-transform: uppercase` |\n| Code | Monaco | 16px (1.00rem) | 400–700 | 1.50 | normal | Code blocks, technical text |\n\n### Principles\n- **Dual personality**: Dammit Sans brings irreverent brand character at display scale; Rubik provides clean professionalism for everything functional.\n- **Uppercase as system**: Buttons, captions, labels, and micro-text all use `text-transform: uppercase` with subtle letter-spacing (0.2px–0.25px), creating a systematic \"technical label\" pattern throughout.\n- **Weight stratification**: Rubik uses 400 (body), 500 (emphasis\u002Fnav), 600 (titles\u002Fstrong), 700 (buttons\u002FCTAs) — a clean four-tier weight system.\n- **Tight headings, relaxed body**: All headings use 1.10–1.25 line-height; body uses 1.50; small captions expand to 2.00 for readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Muted Purple**\n- Background: `#79628c` (rgb(121, 98, 140))\n- Text: `#ffffff`, uppercase, 14px, weight 500–700, letter-spacing 0.2px\n- Border: `1px solid #584674`\n- Radius: 13px\n- Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset` (tactile inset)\n- Hover: elevated shadow `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`\n\n**Glass White**\n- Background: `rgba(255, 255, 255, 0.18)` (frosted glass)\n- Text: `#ffffff`\n- Padding: 8px\n- Radius: 12px (left-aligned variant: `12px 0px 0px 12px`)\n- Shadow: `rgba(0, 0, 0, 0.08) 0px 2px 8px`\n- Hover background: `rgba(54, 22, 107, 0.14)`\n- Use: Secondary actions on dark surfaces\n\n**White Solid**\n- Background: `#ffffff`\n- Text: `#1f1633`\n- Padding: 12px 16px\n- Radius: 8px\n- Hover: background transitions to `#6a5fc1`, text to white\n- Focus: background `#ffb287` (coral), outline `rgb(106, 95, 193) solid 0.125rem`\n- Use: High-visibility CTA on dark backgrounds\n\n**Deep Violet (Select\u002FDropdown)**\n- Background: `#422082`\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 8px\n\n### Inputs\n\n**Text Input**\n- Background: `#ffffff`\n- Text: `#1f1633`\n- Border: `1px solid #cfcfdb`\n- Padding: 8px 12px\n- Radius: 6px\n- Focus: border-color stays `#cfcfdb`, shadow `rgba(0, 0, 0, 0.15) 0px 2px 10px inset`\n\n### Links\n- **Default on dark**: `#ffffff`, underline decoration\n- **Hover**: color transitions to `#6a5fc1` (Sentry Purple)\n- **Purple links**: `#6a5fc1` default, hover underline\n- **Lime accent links**: `#c2ef4e` default, hover to `#6a5fc1`\n- **Dark context links**: `#362d59`, hover to `#ffffff`\n\n### Cards & Containers\n- Background: semi-transparent or dark purple surfaces\n- Radius: 8px–12px\n- Shadow: `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`\n- Backdrop filter: `blur(18px) saturate(180%)` for glass effects\n\n### Navigation\n- Dark transparent header over hero content\n- Rubik 15px weight 500 for nav links\n- White text, hover to Sentry Purple (`#6a5fc1`)\n- Uppercase labels with 0.2px letter-spacing for categories\n- Mobile: hamburger menu, full-width expanded\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 44px, 45px, 47px\n\n### Grid & Container\n- Max content width: 1152px (XL breakpoint)\n- Responsive padding: 2rem (mobile) → 4rem (tablet+)\n- Content centered within container\n- Full-width dark sections with contained inner content\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C 576px | Single column, stacked layout |\n| Small Tablet | 576–640px | Minor width adjustments |\n| Tablet | 640–768px | 2-column begins |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1152px | Standard layout |\n| Large Desktop | 1152–1440px | Max-width content |\n\n### Whitespace Philosophy\n- **Dark breathing room**: Generous vertical spacing between sections (64px–80px+) lets the dark background serve as a visual rest.\n- **Content islands**: Feature sections are self-contained blocks floating in the dark purple sea, each with its own internal spacing rhythm.\n- **Asymmetric padding**: Buttons use asymmetric padding patterns (12px 16px, 8px 12px) that feel organic rather than rigid.\n\n### Border Radius Scale\n- Minimal (6px): Form inputs, small interactive elements\n- Standard (8px): Buttons, cards, containers\n- Comfortable (10px–12px): Larger containers, glass panels\n- Rounded (13px): Primary muted buttons\n- Pill (18px): Image containers, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Sunken (Level -1) | Inset shadow `rgba(0, 0, 0, 0.1) 0px 1px 3px inset` | Primary buttons (tactile pressed feel) |\n| Flat (Level 0) | No shadow | Default surfaces, dark backgrounds |\n| Surface (Level 1) | `rgba(0, 0, 0, 0.08) 0px 2px 8px` | Glass buttons, subtle cards |\n| Elevated (Level 2) | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Cards, floating panels |\n| Prominent (Level 3) | `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem` | Hover states, modals |\n| Ambient (Level 4) | `rgba(22, 15, 36, 0.9) 0px 4px 4px 9px` | Deep purple ambient glow around hero |\n\n**Shadow Philosophy**: Sentry uses a unique combination of inset shadows (buttons feel pressed INTO the surface) and ambient glows (content radiates from the dark background). The deep purple ambient shadow (`rgba(22, 15, 36, 0.9)`) is the signature — it creates a bioluminescent quality where content seems to emit its own purple-tinted light.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use deep purple backgrounds (`#1f1633`, `#150f23`) — never pure black (`#000000`)\n- Apply inset shadows on primary buttons for the tactile pressed effect\n- Use Dammit Sans ONLY for hero\u002Fdisplay headings — Rubik for everything else\n- Apply `text-transform: uppercase` with `letter-spacing: 0.2px` on buttons and labels\n- Use the lime-green accent (`#c2ef4e`) sparingly for maximum impact\n- Employ frosted glass effects (`blur(18px) saturate(180%)`) for layered surfaces\n- Maintain the warm purple shadow tones — shadows should feel purple-tinted, not neutral gray\n- Use Rubik's 4-tier weight system: 400 (body), 500 (nav\u002Femphasis), 600 (titles), 700 (CTAs)\n\n### Don't\n- Don't use pure black (`#000000`) for backgrounds — always use the warm purple-blacks\n- Don't apply Dammit Sans to body text or UI elements — it's display-only\n- Don't use standard gray (`#666`, `#999`) for borders — use purple-tinted grays (`#362d59`, `#584674`)\n- Don't drop the uppercase treatment on buttons — it's a system-wide pattern\n- Don't use sharp corners (0px radius) — minimum 6px for all interactive elements\n- Don't mix the lime-green accent with the coral\u002Fpink accents in the same component\n- Don't use flat (non-inset) shadows on primary buttons — the tactile quality is signature\n- Don't forget letter-spacing on uppercase text — 0.2px minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C576px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 576–768px | 2-column feature grids begin |\n| Small Desktop | 768–992px | Full navigation, side-by-side layouts |\n| Desktop | 992–1152px | Max-width container, full layout |\n| Large | >1152px | Content max-width maintained, generous margins |\n\n### Collapsing Strategy\n- Hero text: 88px Dammit Sans → 60px → mobile scales\n- Navigation: horizontal → hamburger with slide-out\n- Feature sections: side-by-side → stacked cards\n- Buttons: inline → full-width stacked on mobile\n- Container padding: 4rem → 2rem\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: `#1f1633` (primary), `#150f23` (deeper)\n- Text: `#ffffff` (primary), `#e5e7eb` (secondary)\n- Interactive: `#6a5fc1` (links\u002Fhover), `#79628c` (buttons)\n- Accent: `#c2ef4e` (lime highlight), `#ffb287` (coral focus)\n- Border: `#362d59` (dark), `#cfcfdb` (light context)\n\n### Example Component Prompts\n- \"Create a hero section on deep purple background (#1f1633). Headline at 88px Dammit Sans weight 700, line-height 1.20, white text. Sub-text at 16px Rubik weight 400, line-height 1.50. White solid CTA button (8px radius, 12px 16px padding), hover transitions to #6a5fc1.\"\n- \"Design a navigation bar: transparent over dark background. Rubik 15px weight 500, white text. Uppercase category labels with 0.2px letter-spacing. Hover color #6a5fc1.\"\n- \"Build a primary button: background #79628c, border 1px solid #584674, inset shadow rgba(0,0,0,0.1) 0px 1px 3px, white uppercase text at 14px Rubik weight 700, letter-spacing 0.2px, radius 13px. Hover: shadow rgba(0,0,0,0.18) 0px 0.5rem 1.5rem.\"\n- \"Create a glass card panel: background rgba(255,255,255,0.18), backdrop-filter blur(18px) saturate(180%), radius 12px. White text content inside.\"\n- \"Design a feature section: #150f23 background, 24px Rubik weight 500 heading, 16px Rubik weight 400 body text. 14px uppercase lime-green (#c2ef4e) label above heading.\"\n\n### Iteration Guide\n1. Always start with the dark purple background — the color palette is built FOR dark mode\n2. Use inset shadows on buttons, ambient purple glows on hero sections\n3. Uppercase + letter-spacing is the systematic pattern for labels, buttons, and captions\n4. Lime green (#c2ef4e) is the \"pop\" color — use once per section maximum\n5. Frosted glass for overlaid panels, solid purple for primary surfaces\n6. Rubik handles 90% of typography — Dammit Sans is hero-only\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Sentry (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Rubik:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary Brand *\u002F\n    --bg-primary: #1f1633;\n    --bg-deeper: #150f23;\n    --border-purple: #362d59;\n    \u002F* Accent *\u002F\n    --sentry-purple: #6a5fc1;\n    --muted-purple: #79628c;\n    --deep-violet: #422082;\n    --lime-green: #c2ef4e;\n    --coral: #ffb287;\n    --pink: #fa7faa;\n    --button-border: #584674;\n    \u002F* Text *\u002F\n    --text-primary: #ffffff;\n    --text-secondary: #e5e7eb;\n    --code-yellow: #dcdcaa;\n    \u002F* Surface *\u002F\n    --glass-white: rgba(255, 255, 255, 0.18);\n    --glass-dark: rgba(54, 22, 107, 0.14);\n    --input-bg: #ffffff;\n    --input-border: #cfcfdb;\n    \u002F* Shadows *\u002F\n    --shadow-ambient: rgba(22, 15, 36, 0.9) 0px 4px 4px 9px;\n    --shadow-hover: rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem;\n    --shadow-card: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;\n    --shadow-inset: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset;\n    --shadow-glass: rgba(0, 0, 0, 0.08) 0px 2px 8px;\n    \u002F* Fonts *\u002F\n    --font-ui: 'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;\n    --font-mono: Monaco, Menlo, 'Ubuntu Mono', monospace;\n    \u002F* Light mode page *\u002F\n    --page-bg: #1f1633;\n    --section-bg: #150f23;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--page-bg);\n    color: var(--text-primary);\n    font-family: var(--font-ui);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(31, 22, 51, 0.85);\n    backdrop-filter: blur(18px) saturate(180%);\n    -webkit-backdrop-filter: blur(18px) saturate(180%);\n    border-bottom: 1px solid var(--border-purple);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    text-decoration: none;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n  .nav-links {\n    display: flex;\n    gap: 24px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 15px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--sentry-purple); }\n  .nav-cta {\n    display: inline-block;\n    background: var(--muted-purple);\n    color: #fff;\n    padding: 8px 16px;\n    border-radius: 13px;\n    border: 1px solid var(--button-border);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    box-shadow: var(--shadow-inset);\n    transition: box-shadow 0.2s;\n  }\n  .nav-cta:hover { box-shadow: var(--shadow-hover); }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    padding: 96px 32px 80px;\n    text-align: center;\n    background: var(--bg-primary);\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -120px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 700px;\n    height: 700px;\n    background: radial-gradient(circle, rgba(106, 95, 193, 0.35) 0%, rgba(31, 22, 51, 0) 70%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  .hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }\n  .hero h1 {\n    font-size: 80px;\n    font-weight: 700;\n    line-height: 1.10;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .hero h1 span { color: var(--lime-green); }\n  .hero p {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-secondary);\n    max-width: 600px;\n    margin: 0 auto 32px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  \u002F* BUTTONS (reusable) *\u002F\n  .btn-primary {\n    display: inline-block;\n    background: #ffffff;\n    color: #1f1633;\n    padding: 12px 24px;\n    border-radius: 8px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    transition: background 0.2s, color 0.2s;\n  }\n  .btn-primary:hover { background: var(--sentry-purple); color: #fff; }\n  .btn-secondary {\n    display: inline-block;\n    background: var(--glass-white);\n    color: #fff;\n    padding: 12px 24px;\n    border-radius: 12px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    backdrop-filter: blur(18px) saturate(180%);\n    box-shadow: var(--shadow-glass);\n    transition: background 0.2s;\n  }\n  .btn-secondary:hover { background: var(--glass-dark); }\n  .btn-muted {\n    display: inline-block;\n    background: var(--muted-purple);\n    color: #fff;\n    padding: 10px 20px;\n    border-radius: 13px;\n    border: 1px solid var(--button-border);\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    box-shadow: var(--shadow-inset);\n    transition: box-shadow 0.2s;\n  }\n  .btn-muted:hover { box-shadow: var(--shadow-hover); }\n  .btn-violet {\n    display: inline-block;\n    background: var(--deep-violet);\n    color: #fff;\n    padding: 8px 16px;\n    border-radius: 8px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 64px 32px;\n    max-width: 1152px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n    color: var(--lime-green);\n    margin-bottom: 8px;\n    line-height: 1.80;\n  }\n  .section-title {\n    font-size: 30px;\n    font-weight: 400;\n    line-height: 1.20;\n    margin-bottom: 32px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-purple);\n    margin: 0;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 12px;\n    overflow: hidden;\n    border: 1px solid var(--border-purple);\n    background: var(--bg-deeper);\n  }\n  .color-swatch-block {\n    height: 80px;\n    width: 100%;\n  }\n  .color-swatch-info {\n    padding: 10px 12px;\n  }\n  .color-swatch-name {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n  .color-swatch-hex {\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    font-family: var(--font-mono);\n  }\n  .color-swatch-role {\n    font-size: 11px;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    opacity: 0.7;\n  }\n  .color-group-label {\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n    color: var(--text-secondary);\n    margin: 32px 0 12px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-purple);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--lime-green);\n    font-family: var(--font-mono);\n    margin-top: 8px;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n  }\n\n  \u002F* BUTTON SHOWCASE *\u002F\n  .button-row {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 16px;\n  }\n  .button-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n    margin-top: 8px;\n  }\n  .button-item { text-align: center; }\n\n  \u002F* CARD EXAMPLES *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-deeper);\n    border: 1px solid var(--border-purple);\n    border-radius: 12px;\n    padding: 24px;\n    transition: box-shadow 0.3s;\n  }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card-glass {\n    background: var(--glass-white);\n    backdrop-filter: blur(18px) saturate(180%);\n    border: 1px solid rgba(255,255,255,0.1);\n    border-radius: 12px;\n    padding: 24px;\n  }\n  .card h3 {\n    font-size: 20px;\n    font-weight: 600;\n    margin-bottom: 8px;\n  }\n  .card p, .card-glass p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n  }\n  .card-tag {\n    display: inline-block;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n    color: var(--lime-green);\n    background: rgba(194, 239, 78, 0.12);\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-bottom: 12px;\n  }\n\n  \u002F* FORM ELEMENTS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n  }\n  .form-input {\n    width: 100%;\n    background: var(--input-bg);\n    color: #1f1633;\n    border: 1px solid var(--input-border);\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-family: var(--font-ui);\n    font-size: 16px;\n    outline: none;\n    transition: box-shadow 0.2s;\n  }\n  .form-input:focus {\n    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px inset;\n  }\n  .form-input--focus {\n    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px inset;\n    border-color: var(--input-border);\n  }\n  .form-input--error {\n    border-color: var(--pink);\n    box-shadow: 0 0 0 2px rgba(250, 127, 170, 0.3);\n  }\n  .form-textarea {\n    width: 100%;\n    min-height: 100px;\n    background: var(--input-bg);\n    color: #1f1633;\n    border: 1px solid var(--input-border);\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-family: var(--font-ui);\n    font-size: 16px;\n    resize: vertical;\n    outline: none;\n  }\n  .form-state-label {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    opacity: 0.7;\n  }\n\n  \u002F* SPACING SCALE *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-bottom: 24px;\n  }\n  .spacing-item { text-align: center; }\n  .spacing-block {\n    background: var(--sentry-purple);\n    border-radius: 4px;\n    margin-bottom: 6px;\n    height: 32px;\n  }\n  .spacing-value {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n    font-family: var(--font-mono);\n  }\n\n  \u002F* RADIUS SCALE *\u002F\n  .radius-row {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 72px;\n    height: 72px;\n    background: var(--muted-purple);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n    font-family: var(--font-mono);\n  }\n  .radius-context {\n    font-size: 10px;\n    color: var(--text-secondary);\n    opacity: 0.6;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--bg-deeper);\n    border: 1px solid var(--border-purple);\n    border-radius: 12px;\n    padding: 24px;\n    text-align: center;\n  }\n  .elevation-label {\n    font-size: 14px;\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n  .elevation-desc {\n    font-size: 12px;\n    color: var(--text-secondary);\n    font-family: var(--font-mono);\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    padding: 32px;\n    text-align: center;\n    background: var(--bg-deeper);\n    border-top: 1px solid var(--border-purple);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n  .footer a {\n    color: var(--lime-green);\n    text-decoration: underline;\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 48px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .section { padding: 48px 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-content\">\n    \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Sentry\u003C\u002Fspan>\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-primary\" href=\"#\">Start Building\u003C\u002Fa>\n      \u003Ca class=\"btn-secondary\" href=\"#\">View Tokens\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Section 01\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#1f1633\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Deep Purple\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#1f1633\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#150f23\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Darker Purple\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#150f23\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Deeper sections, footer\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#362d59\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Border Purple\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#362d59\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#6a5fc1\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Sentry Purple\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#6a5fc1\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Links, hover, focus rings\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#79628c\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Muted Purple\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#79628c\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Button backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#422082\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Deep Violet\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#422082\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Selects, active states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#c2ef4e\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Lime Green\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#c2ef4e\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">High-visibility accent\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ffb287\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Coral\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ffb287\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Focus state backgrounds\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#fa7faa\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#fa7faa\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Focus outlines, decor\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border: 1px solid #362d59\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Primary text on dark\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e7eb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#dcdcaa\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Code Yellow\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#dcdcaa\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Syntax highlighting\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Overlay\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.1)\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Glass White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.18)\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Frosted glass buttons\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(54,22,107,0.14)\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">rgba(54,22,107,0.14)\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Hover overlay\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"color-swatch-block\" style=\"background:#cfcfdb\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch-info\">\n        \u003Cdiv class=\"color-swatch-name\">Input Border\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-hex\">#cfcfdb\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-role\">Form field borders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY SCALE -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">Section 02\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:80px; font-weight:700; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Display Hero — 88px \u002F 700 \u002F 1.20 \u002F Dammit Sans (approximated)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:60px; font-weight:500; line-height:1.10;\">Display Secondary\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Display Secondary — 60px \u002F 500 \u002F 1.10 \u002F Dammit Sans (approximated)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:30px; font-weight:400; line-height:1.20;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Section Heading — 30px \u002F 400 \u002F 1.20 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:27px; font-weight:500; line-height:1.25;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Sub-heading — 27px \u002F 500 \u002F 1.25 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.25;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 500 \u002F 1.25 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.25;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Feature Title — 20px \u002F 600 \u002F 1.25 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.50;\">Body Emphasis — The quick brown fox jumps over the lazy dog.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Body Emphasis — 16px \u002F 600 \u002F 1.50 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.40;\">Nav Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Nav Label — 15px \u002F 500 \u002F 1.40 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.25; text-transform:uppercase;\">Uppercase Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Uppercase Label — 15px \u002F 500 \u002F 1.25 \u002F Rubik \u002F uppercase\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.14; text-transform:uppercase; letter-spacing:0.2px;\">Button Text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Button Text — 14px \u002F 700 \u002F 1.14 \u002F Rubik \u002F uppercase \u002F 0.2px spacing\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43; text-transform:uppercase; letter-spacing:0.2px;\">Caption\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Caption — 14px \u002F 500 \u002F 1.43 \u002F Rubik \u002F uppercase \u002F 0.2px spacing\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:12px; font-weight:600; line-height:2.00;\">Small Caption\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Small Caption — 12px \u002F 600 \u002F 2.00 \u002F Rubik\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-size:10px; font-weight:600; line-height:1.80; text-transform:uppercase; letter-spacing:0.25px;\">Micro Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Micro Label — 10px \u002F 600 \u002F 1.80 \u002F Rubik \u002F uppercase \u002F 0.25px spacing\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family:Monaco,Menlo,'Ubuntu Mono',monospace; font-size:16px; font-weight:400; line-height:1.50; color:#dcdcaa;\">const sentry = require('@sentry\u002Fnode');\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-meta\">Code — 16px \u002F 400 \u002F 1.50 \u002F Monaco\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTON VARIANTS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Section 03\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\n      \u003Ca class=\"btn-primary\" href=\"#\">Start Building\u003C\u002Fa>\n      \u003Cdiv class=\"button-label\">White Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Ca class=\"btn-muted\" href=\"#\">Get Started\u003C\u002Fa>\n      \u003Cdiv class=\"button-label\">Primary Muted\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Ca class=\"btn-secondary\" href=\"#\">View Docs\u003C\u002Fa>\n      \u003Cdiv class=\"button-label\">Glass White\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Ca class=\"btn-violet\" href=\"#\">Select Plan\u003C\u002Fa>\n      \u003Cdiv class=\"button-label\">Deep Violet\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARD EXAMPLES -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">Section 04\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Feature\u003C\u002Fdiv>\n      \u003Ch3>Error Tracking\u003C\u002Fh3>\n      \u003Cp>Automatically capture and organize errors from your application. Get full stack traces, breadcrumbs, and context for every issue.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px;\">\n      \u003Cdiv class=\"card-tag\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Performance Monitoring\u003C\u002Fh3>\n      \u003Cp>Track transactions and identify slow database queries, API calls, and rendering issues. Card shown with hover elevation.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-glass\">\n      \u003Ch3 style=\"color:#fff;\">Glass Card\u003C\u002Fh3>\n      \u003Cp style=\"color:rgba(255,255,255,0.8);\">Frosted glass surface using backdrop-filter blur and white alpha overlay. Used for layered panels on dark backgrounds.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORM ELEMENTS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Section 05\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\n    \u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@example.com\">\n    \u003Cdiv class=\"form-state-label\">Default state\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"my-sentry-project\">\n    \u003Cdiv class=\"form-state-label\">Focus state (inset shadow)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\n    \u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key-format\">\n    \u003Cdiv class=\"form-state-label\">Error state (pink ring)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\n    \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n    \u003Ctextarea class=\"form-textarea\" placeholder=\"Describe the issue...\">\u003C\u002Ftextarea>\n    \u003Cdiv class=\"form-state-label\">Textarea\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING SCALE -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">Section 06\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:13px; color:var(--text-secondary);\">Base unit: 8px. Scale: 1, 2, 4, 5, 6, 8, 12, 16, 24, 32, 40, 44, 45, 47px\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS SCALE -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Section 07\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons, cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Glass panels\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:13px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">13px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Primary buttons\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:18px\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">18px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Badges, images\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">Section 08\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px inset;\">\n      \u003Cdiv class=\"elevation-label\">Level -1: Sunken\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Inset shadow — tactile pressed buttons\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\">\n      \u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow — default surfaces\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.08) 0px 2px 8px;\">\n      \u003Cdiv class=\"elevation-label\">Level 1: Surface\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Glass buttons, subtle cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px;\">\n      \u003Cdiv class=\"elevation-label\">Level 2: Elevated\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Cards, floating panels\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.18) 0px 0.5rem 1.5rem;\">\n      \u003Cdiv class=\"elevation-label\">Level 3: Prominent\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Hover states, modals\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(22,15,36,0.9) 0px 4px 4px 9px;\">\n      \u003Cdiv class=\"elevation-label\">Level 4: Ambient\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Purple glow around hero\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fsentry.io\u002Fwelcome\u002F\">sentry.io\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Sentry (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Rubik:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg-primary: #150f23;\n    --bg-deeper: #0e0918;\n    --border-purple: #2a2245;\n    --sentry-purple: #6a5fc1;\n    --muted-purple: #79628c;\n    --deep-violet: #422082;\n    --lime-green: #c2ef4e;\n    --coral: #ffb287;\n    --pink: #fa7faa;\n    --button-border: #584674;\n    --text-primary: #ffffff;\n    --text-secondary: #c8c8d0;\n    --code-yellow: #dcdcaa;\n    --glass-white: rgba(255, 255, 255, 0.12);\n    --glass-dark: rgba(54, 22, 107, 0.2);\n    --input-bg: #1a1328;\n    --input-border: #3a3252;\n    --shadow-ambient: rgba(22, 15, 36, 0.9) 0px 4px 4px 9px;\n    --shadow-hover: rgba(0, 0, 0, 0.25) 0px 0.5rem 1.5rem;\n    --shadow-card: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px;\n    --shadow-inset: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px inset;\n    --shadow-glass: rgba(0, 0, 0, 0.12) 0px 2px 8px;\n    --font-ui: 'Rubik', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;\n    --font-mono: Monaco, Menlo, 'Ubuntu Mono', monospace;\n    --page-bg: #150f23;\n    --section-bg: #0e0918;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--page-bg);\n    color: var(--text-primary);\n    font-family: var(--font-ui);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--lime-green);\n    color: #150f23;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    padding: 4px 10px;\n    border-radius: 6px;\n  }\n\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(14, 9, 24, 0.88);\n    backdrop-filter: blur(18px) saturate(180%);\n    -webkit-backdrop-filter: blur(18px) saturate(180%);\n    border-bottom: 1px solid var(--border-purple);\n  }\n  .nav-brand {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    text-decoration: none;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n  .nav-links {\n    display: flex;\n    gap: 24px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 15px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--sentry-purple); }\n  .nav-cta {\n    display: inline-block;\n    background: var(--muted-purple);\n    color: #fff;\n    padding: 8px 16px;\n    border-radius: 13px;\n    border: 1px solid var(--button-border);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    box-shadow: var(--shadow-inset);\n    transition: box-shadow 0.2s;\n  }\n  .nav-cta:hover { box-shadow: var(--shadow-hover); }\n\n  .hero {\n    position: relative;\n    padding: 96px 32px 80px;\n    text-align: center;\n    background: var(--bg-primary);\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -120px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 700px;\n    height: 700px;\n    background: radial-gradient(circle, rgba(106, 95, 193, 0.25) 0%, rgba(21, 15, 35, 0) 70%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  .hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }\n  .hero h1 {\n    font-size: 80px;\n    font-weight: 700;\n    line-height: 1.10;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n  }\n  .hero h1 span { color: var(--lime-green); }\n  .hero p {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.50;\n    color: var(--text-secondary);\n    max-width: 600px;\n    margin: 0 auto 32px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  .btn-primary {\n    display: inline-block;\n    background: var(--lime-green);\n    color: #150f23;\n    padding: 12px 24px;\n    border-radius: 8px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-primary:hover { opacity: 0.85; }\n  .btn-secondary {\n    display: inline-block;\n    background: var(--glass-white);\n    color: #fff;\n    padding: 12px 24px;\n    border-radius: 12px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    backdrop-filter: blur(18px) saturate(180%);\n    box-shadow: var(--shadow-glass);\n    transition: background 0.2s;\n  }\n  .btn-secondary:hover { background: var(--glass-dark); }\n  .btn-muted {\n    display: inline-block;\n    background: var(--muted-purple);\n    color: #fff;\n    padding: 10px 20px;\n    border-radius: 13px;\n    border: 1px solid var(--button-border);\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n    box-shadow: var(--shadow-inset);\n    transition: box-shadow 0.2s;\n  }\n  .btn-muted:hover { box-shadow: var(--shadow-hover); }\n  .btn-violet {\n    display: inline-block;\n    background: var(--deep-violet);\n    color: #fff;\n    padding: 8px 16px;\n    border-radius: 8px;\n    border: none;\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .section {\n    padding: 64px 32px;\n    max-width: 1152px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n    color: var(--lime-green);\n    margin-bottom: 8px;\n    line-height: 1.80;\n  }\n  .section-title {\n    font-size: 30px;\n    font-weight: 400;\n    line-height: 1.20;\n    margin-bottom: 32px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-purple);\n    margin: 0;\n  }\n\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 12px;\n    overflow: hidden;\n    border: 1px solid var(--border-purple);\n    background: var(--bg-deeper);\n  }\n  .color-swatch-block { height: 80px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; font-weight: 400; color: var(--text-secondary); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.7; }\n  .color-group-label {\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n    color: var(--text-secondary);\n    margin: 32px 0 12px;\n  }\n\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-purple);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--lime-green);\n    font-family: var(--font-mono);\n    margin-top: 8px;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n  }\n\n  .button-row {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 16px;\n  }\n  .button-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n    margin-top: 8px;\n  }\n  .button-item { text-align: center; }\n\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-deeper);\n    border: 1px solid var(--border-purple);\n    border-radius: 12px;\n    padding: 24px;\n    transition: box-shadow 0.3s;\n  }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card-glass {\n    background: var(--glass-white);\n    backdrop-filter: blur(18px) saturate(180%);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 12px;\n    padding: 24px;\n  }\n  .card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }\n  .card p, .card-glass p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }\n  .card-tag {\n    display: inline-block;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.25px;\n    text-transform: uppercase;\n    color: var(--lime-green);\n    background: rgba(194, 239, 78, 0.1);\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-bottom: 12px;\n  }\n\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.2px;\n  }\n  .form-input {\n    width: 100%;\n    background: var(--input-bg);\n    color: var(--text-primary);\n    border: 1px solid var(--input-border);\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-family: var(--font-ui);\n    font-size: 16px;\n    outline: none;\n    transition: box-shadow 0.2s;\n  }\n  .form-input:focus { box-shadow: rgba(106, 95, 193, 0.3) 0px 0px 0px 2px; }\n  .form-input--focus { box-shadow: rgba(106, 95, 193, 0.3) 0px 0px 0px 2px; }\n  .form-input--error {\n    border-color: var(--pink);\n    box-shadow: 0 0 0 2px rgba(250, 127, 170, 0.3);\n  }\n  .form-textarea {\n    width: 100%;\n    min-height: 100px;\n    background: var(--input-bg);\n    color: var(--text-primary);\n    border: 1px solid var(--input-border);\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-family: var(--font-ui);\n    font-size: 16px;\n    resize: vertical;\n    outline: none;\n  }\n  .form-state-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-top: 4px; opacity: 0.7; }\n\n  .spacing-row {\n    display: flex;\n    align-items: flex-end;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-bottom: 24px;\n  }\n  .spacing-item { text-align: center; }\n  .spacing-block {\n    background: var(--sentry-purple);\n    border-radius: 4px;\n    margin-bottom: 6px;\n    height: 32px;\n  }\n  .spacing-value { font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }\n\n  .radius-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 72px;\n    height: 72px;\n    background: var(--muted-purple);\n    margin-bottom: 8px;\n  }\n  .radius-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }\n  .radius-context { font-size: 10px; color: var(--text-secondary); opacity: 0.6; }\n\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--bg-deeper);\n    border: 1px solid var(--border-purple);\n    border-radius: 12px;\n    padding: 24px;\n    text-align: center;\n  }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }\n\n  .footer {\n    padding: 32px;\n    text-align: center;\n    background: var(--bg-deeper);\n    border-top: 1px solid var(--border-purple);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n  .footer a { color: var(--lime-green); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 48px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .section { padding: 48px 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-content\">\n    \u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Sentry\u003C\u002Fspan>\u003C\u002Fh1>\n    \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized in dark mode.\u003C\u002Fp>\n    \u003Cdiv class=\"hero-buttons\">\n      \u003Ca class=\"btn-primary\" href=\"#\">Start Building\u003C\u002Fa>\n      \u003Ca class=\"btn-secondary\" href=\"#\">View Tokens\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Section 01\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f1633\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f1633\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#150f23\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Darker Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#150f23\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Deeper sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#362d59\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#362d59\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#6a5fc1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Sentry Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#6a5fc1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links, hover, focus\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#79628c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Muted Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#79628c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#422082\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Violet\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#422082\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Selects, active\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c2ef4e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lime Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c2ef4e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">High-visibility accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffb287\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Coral\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffb287\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fa7faa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fa7faa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus outlines\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border:1px solid #2a2245\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5e7eb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5e7eb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#dcdcaa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Code Yellow\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#dcdcaa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax highlighting\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Overlay\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.08)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Glass White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Frosted glass\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(54,22,107,0.2)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(54,22,107,0.2)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3a3252\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Input Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3a3252\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Form borders (dark)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">Section 02\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:80px; font-weight:700; line-height:1.10;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 88px \u002F 700 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:60px; font-weight:500; line-height:1.10;\">Display Secondary\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Secondary — 60px \u002F 500 \u002F 1.10\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:30px; font-weight:400; line-height:1.20;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 30px \u002F 400 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:27px; font-weight:500; line-height:1.25;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 27px \u002F 500 \u002F 1.25\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.25;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 500 \u002F 1.25\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:600; line-height:1.25;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature Title — 20px \u002F 600 \u002F 1.25\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body text — The quick brown fox jumps over the lazy dog. Sentry helps developers fix bugs faster.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; line-height:1.14; text-transform:uppercase; letter-spacing:0.2px;\">Button Text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 14px \u002F 700 \u002F uppercase \u002F 0.2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:600; line-height:1.80; text-transform:uppercase; letter-spacing:0.25px;\">Micro Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 10px \u002F 600 \u002F uppercase \u002F 0.25px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:Monaco,Menlo,'Ubuntu Mono',monospace; font-size:16px; font-weight:400; line-height:1.50; color:#dcdcaa;\">const sentry = require('@sentry\u002Fnode');\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code — 16px \u002F Monaco \u002F code-yellow\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Section 03\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Start Building\u003C\u002Fa>\u003Cdiv class=\"button-label\">Lime Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-muted\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Muted Purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-secondary\" href=\"#\">View Docs\u003C\u002Fa>\u003Cdiv class=\"button-label\">Glass White\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-violet\" href=\"#\">Select Plan\u003C\u002Fa>\u003Cdiv class=\"button-label\">Deep Violet\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">Section 04\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Cdiv class=\"card-tag\">Feature\u003C\u002Fdiv>\u003Ch3>Error Tracking\u003C\u002Fh3>\u003Cp>Automatically capture and organize errors from your application with full stack traces and breadcrumbs.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: rgba(0,0,0,0.2) 0px 10px 15px -3px;\">\u003Cdiv class=\"card-tag\">Elevated\u003C\u002Fdiv>\u003Ch3>Performance Monitoring\u003C\u002Fh3>\u003Cp>Track transactions and identify bottlenecks. Card shown with hover elevation.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-glass\">\u003Ch3 style=\"color:#fff;\">Glass Card\u003C\u002Fh3>\u003Cp style=\"color:rgba(255,255,255,0.7);\">Frosted glass surface with backdrop-filter blur on deep dark background.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Section 05\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@example.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"my-sentry-project\">\u003Cdiv class=\"form-state-label\">Focus\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-key\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">Section 06\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Section 07\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Glass panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:13px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">13px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Primary btn\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:18px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">18px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">Section 08\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.15) 0px 1px 3px 0px inset;\">\u003Cdiv class=\"elevation-label\">Sunken (-1)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset — buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat (0)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.12) 0px 2px 8px;\">\u003Cdiv class=\"elevation-label\">Surface (1)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Glass, subtle\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.2) 0px 10px 15px -3px;\">\u003Cdiv class=\"elevation-label\">Elevated (2)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Cards, panels\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.25) 0px 0.5rem 1.5rem;\">\u003Cdiv class=\"elevation-label\">Prominent (3)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Hover, modals\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(22,15,36,0.9) 0px 4px 4px 9px;\">\u003Cdiv class=\"elevation-label\">Ambient (4)\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Purple glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fsentry.io\u002Fwelcome\u002F\">sentry.io\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Sentry Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsentry\u002FDESIGN.md) extracted from the public [Sentry](https:\u002F\u002Fsentry.io\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsentry\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sentry design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Sentry Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsentry\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Sentry Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsentry\u002Fpreview-screenshot.png)\n",{"slug":313,"name":314,"category":7,"designMd":315,"previewHtml":316,"previewDarkHtml":317,"readme":318},"spacex","Spacex","# Design System Inspiration of SpaceX\n\n## 1. Visual Theme & Atmosphere\n\nSpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (`#000000`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.\n\nThe typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military\u002Faerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase\u002Ftracked treatment at smaller scales.\n\nWhat makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at `rgba(240,240,250,0.35)`), no color (only black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual element is photography + text. The ghost button with `rgba(240,240,250,0.1)` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.\n\n**Key Characteristics:**\n- Pure black canvas with full-viewport cinematic photography — the interface is invisible\n- D-DIN \u002F D-DIN-Bold — industrial DIN-heritage typeface\n- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic\n- Near-white spectral text (`#f0f0fa`) — not pure white, a slight blue-violet tint\n- Zero shadows, zero cards, zero containers — text on image only\n- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border\n- Full-viewport sections — each section is a cinematic \"scene\"\n- No decorative elements — every pixel serves the photography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Space Black** (`#000000`): Page background, the void of space — at 50% opacity for overlay gradient\n- **Spectral White** (`#f0f0fa`): Text color — not pure white, a slight blue-violet tint that mimics starlight\n\n### Interactive\n- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`): Button background — nearly invisible, 10% opacity\n- **Ghost Border** (`rgba(240, 240, 250, 0.35)`): Button border — spectral, 35% opacity\n- **Hover White** (`var(--white-100)`): Link hover state — full spectral white\n\n### Gradient\n- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to ensure text legibility\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `D-DIN-Bold` — bold industrial geometric\n- **Body \u002F UI**: `D-DIN`, fallbacks: `Arial, Verdana`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | `text-transform: uppercase` |\n| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |\n| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |\n| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | `text-transform: uppercase` |\n| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |\n| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | `text-transform: uppercase` |\n| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | `text-transform: uppercase` |\n\n### Principles\n- **Universal uppercase**: Nearly every text element uses `text-transform: uppercase`. This creates a systematic military\u002Faerospace voice where all communication feels like official documentation.\n- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.\n- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.\n- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button**\n- Background: `rgba(240, 240, 250, 0.1)` (barely visible)\n- Text: Spectral White (`#f0f0fa`)\n- Padding: 18px\n- Radius: 32px\n- Border: `1px solid rgba(240, 240, 250, 0.35)`\n- Hover: background brightens, text to `var(--white-100)`\n- Use: The only button variant — \"LEARN MORE\" CTAs on photography\n\n### Cards & Containers\n- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.\n\n### Inputs & Forms\n- Not present on the homepage. The site is purely presentational.\n\n### Navigation\n- Transparent overlay nav on photography\n- D-DIN 13px weight 700, uppercase, 1.17px tracking\n- Spectral white text on dark imagery\n- Logo: SpaceX wordmark at 147x19px\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Full-viewport (100vh) photography sections\n- Professional aerospace photography: rockets, Mars, space\n- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility\n- Each section = one full-screen photograph with text overlay\n- No border radius, no frames — edge-to-edge imagery\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px\n- Minimal scale — spacing is not the organizing principle; photography is\n\n### Grid & Container\n- No traditional grid — each section is a full-viewport cinematic frame\n- Text is positioned absolutely or with generous padding over imagery\n- Left-aligned text blocks on photography backgrounds\n- No max-width container — content bleeds to viewport edges\n\n### Whitespace Philosophy\n- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.\n- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each \"page\" reveals a new scene.\n\n### Border Radius Scale\n- Sharp (4px): Small dividers, utility elements\n- Button (32px): Ghost buttons — the only rounded element\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-viewport imagery | Background layer — always present |\n| Overlay (Level 1) | `rgba(0, 0, 0, 0.5)` gradient | Text legibility layer over photography |\n| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |\n| Ghost (Level 3) | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer |\n\n**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-viewport photography as the primary design element — every section is a scene\n- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice\n- Use D-DIN exclusively — no other fonts exist in the system\n- Keep the color palette to black + spectral white (`#f0f0fa`) only\n- Use ghost buttons (`rgba(240,240,250,0.1)`) as the sole interactive element\n- Apply dark gradient overlays for text legibility on photographs\n- Let photography carry the emotional weight — the type system is functional, not expressive\n\n### Don't\n- Don't add cards, panels, or containers — text sits directly on photography\n- Don't use shadows — they have no meaning in a photographic context\n- Don't introduce colors — the palette is strictly achromatic with spectral tint\n- Don't use sentence case — everything is uppercase\n- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)\n- Don't reduce photography to thumbnails — every image is full-viewport\n- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C600px | Stacked, reduced padding, smaller type |\n| Tablet Small | 600–960px | Adjusted layout |\n| Tablet | 960–1280px | Standard scaling |\n| Desktop | 1280–1350px | Full layout |\n| Large Desktop | 1350–1500px | Expanded |\n| Ultra-wide | >1500px | Maximum viewport |\n\n### Touch Targets\n- Ghost buttons: 18px padding provides adequate touch area\n- Navigation links: uppercase with generous letter-spacing aids readability\n\n### Collapsing Strategy\n- Photography: maintains full-viewport at all sizes, content reposition\n- Hero text: 48px → scales down proportionally\n- Navigation: horizontal → hamburger\n- Text blocks: reposition but maintain overlay-on-photography pattern\n- Full-viewport sections maintained on mobile\n\n### Image Behavior\n- Edge-to-edge photography at all viewport sizes\n- Background-size: cover with center focus\n- Dark overlay gradients adapt to content position\n- No art direction changes — same photographs, responsive positioning\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Space Black (`#000000`)\n- Text: Spectral White (`#f0f0fa`)\n- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)\n- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)\n- Overlay: `rgba(0, 0, 0, 0.5)`\n\n### Example Component Prompts\n- \"Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding.\"\n- \"Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned.\"\n- \"Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below.\"\n- \"Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94.\"\n\n### Iteration Guide\n1. Start with photography — the image IS the design\n2. All text is uppercase with positive letter-spacing — no exceptions\n3. Only two colors: black and spectral white (#f0f0fa)\n4. Ghost buttons are the only interactive element — transparent, spectral-bordered\n5. Zero shadows, zero cards, zero decorative elements\n6. Every section is full-viewport (100vh) — cinematic pacing\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: SpaceX (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Share+Tech&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #000000; --spectral: #f0f0fa; --ghost-bg: rgba(240,240,250,0.1);\n    --ghost-border: rgba(240,240,250,0.35); --overlay: rgba(0,0,0,0.5);\n    --font: 'Share Tech', Arial, Verdana, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--black); color:var(--spectral); font-family:var(--font); font-size:16px; line-height:1.50; text-transform:uppercase; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }\n  .nav-brand { font-size:13px; font-weight:700; color:var(--spectral); text-decoration:none; letter-spacing:1.17px; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:12px; font-weight:400; color:rgba(240,240,250,0.7); text-decoration:none; letter-spacing:1px; transition:color 0.2s; }\n  .nav-links a:hover { color:var(--spectral); }\n  .nav-cta { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:8px 18px; border-radius:32px; border:1px solid var(--ghost-border); font-size:12px; font-weight:700; letter-spacing:1.17px; text-decoration:none; }\n\n  .hero { padding:120px 32px 80px; text-align:left; max-width:900px; margin:0 auto; background:linear-gradient(180deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%); min-height:60vh; display:flex; flex-direction:column; justify-content:center; }\n  .hero h1 { font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:16px; }\n  .hero p { font-size:16px; font-weight:400; line-height:1.70; letter-spacing:0.5px; color:rgba(240,240,250,0.7); max-width:500px; margin-bottom:32px; text-transform:none; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-ghost { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:14px 24px; border-radius:32px; border:1px solid var(--ghost-border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:1.17px; text-decoration:none; cursor:pointer; transition:background 0.2s; }\n  .btn-ghost:hover { background:rgba(240,240,250,0.2); }\n\n  .section { padding:64px 32px; max-width:900px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(240,240,250,0.5); margin-bottom:8px; }\n  .section-title { font-size:32px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid rgba(240,240,250,0.1); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid rgba(240,240,250,0.15); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:rgba(240,240,250,0.5); }\n  .color-swatch-role { font-size:9px; color:rgba(240,240,250,0.4); margin-top:3px; text-transform:none; }\n  .color-group-label { font-size:12px; font-weight:700; letter-spacing:1px; color:rgba(240,240,250,0.6); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(240,240,250,0.08); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:rgba(240,240,250,0.4); margin-top:6px; letter-spacing:0.5px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:rgba(240,240,250,0.4); margin-top:8px; letter-spacing:0.5px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }\n  .card { background:rgba(240,240,250,0.03); border:1px solid rgba(240,240,250,0.1); border-radius:4px; padding:24px; }\n  .card h3 { font-size:16px; font-weight:700; letter-spacing:0.96px; margin-bottom:8px; }\n  .card p { font-size:14px; color:rgba(240,240,250,0.6); line-height:1.50; text-transform:none; letter-spacing:normal; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }\n  .form-input { width:100%; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; outline:none; text-transform:none; letter-spacing:normal; }\n  .form-input:focus { border-color:var(--spectral); }\n  .form-input--focus { border-color:var(--spectral); }\n  .form-input--error { border-color:#ff4444; }\n  .form-textarea { width:100%; min-height:80px; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; text-transform:none; letter-spacing:normal; }\n  .form-state-label { font-size:9px; color:rgba(240,240,250,0.4); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--spectral); opacity:0.2; border-radius:2px; margin-bottom:6px; height:28px; }\n  .spacing-value { font-size:10px; color:rgba(240,240,250,0.4); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; border:1px solid rgba(240,240,250,0.2); margin-bottom:6px; }\n  .radius-label { font-size:10px; color:rgba(240,240,250,0.4); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { border:1px solid rgba(240,240,250,0.08); border-radius:4px; padding:20px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; letter-spacing:0.5px; margin-bottom:4px; }\n  .elevation-desc { font-size:10px; color:rgba(240,240,250,0.4); text-transform:none; letter-spacing:normal; }\n\n  .footer { padding:32px; text-align:center; border-top:1px solid rgba(240,240,250,0.1); font-size:11px; color:rgba(240,240,250,0.4); }\n  .footer a { color:var(--spectral); text-decoration:underline; }\n\n  @media (max-width:600px) {\n    .hero h1 { font-size:32px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Learn More\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by SpaceX\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-ghost\" href=\"#\">Explore Tokens\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Source\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Space Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0fa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Spectral White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0fa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(240,240,250,0.1); border:1px solid rgba(240,240,250,0.3)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ghost Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(f0f0fa, 0.1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.5)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Overlay\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Photo overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px;\">MAKING LIFE MULTIPLANETARY\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F bold \u002F 1.00 \u002F +0.96px \u002F D-DIN-Bold \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.70; text-transform:none; letter-spacing:normal;\">SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.70 \u002F D-DIN\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:700; line-height:0.94; letter-spacing:1.17px;\">FALCON 9 · STARSHIP · DRAGON\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav Bold — 13px \u002F 700 \u002F 0.94 \u002F +1.17px \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.00; letter-spacing:1px;\">MISSION OVERVIEW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 12px \u002F 400 \u002F 1.00 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:400; line-height:0.94; letter-spacing:1px;\">LAUNCH DATE: 2026-04-15\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 10px \u002F 400 \u002F 0.94 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Button\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" style=\"background:rgba(240,240,250,0.2);\" href=\"#\">Hover State\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:rgba(240,240,250,0.4); margin-top:16px; text-transform:none; letter-spacing:normal;\">SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Content Sections\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Falcon 9\u003C\u002Fh3>\u003Cp>The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Starship\u003C\u002Fh3>\u003Cp>The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:16px; text-transform:none; letter-spacing:normal;\">Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Mission Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"STARSHIP MISSION\">\u003Cdiv class=\"form-state-label\">Default (ghost border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Launch Site\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"STARBASE, TEXAS\">\u003Cdiv class=\"form-state-label\">Focus (spectral white border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Payload\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"EXCEEDS CAPACITY\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Mission briefing notes...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">3\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">5\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:18px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">18\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:30px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">30\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;\">Minimal radius system — 4px for utility, 32px for buttons.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Photography\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-viewport imagery\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.5);\">\u003Cdiv class=\"elevation-label\">Overlay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark gradient for text\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--ghost-bg); border-color:var(--ghost-border);\">\u003Cdiv class=\"elevation-label\">Ghost\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;\">Zero shadows. Depth from photography only.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fspacex.com\u002F\">spacex.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: SpaceX (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Share+Tech&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #000000; --spectral: #f0f0fa; --ghost-bg: rgba(240,240,250,0.1);\n    --ghost-border: rgba(240,240,250,0.35); --overlay: rgba(0,0,0,0.5);\n    --font: 'Share Tech', Arial, Verdana, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--black); color:var(--spectral); font-family:var(--font); font-size:16px; line-height:1.50; text-transform:uppercase; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 32px; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }\n  .nav-brand { font-size:13px; font-weight:700; color:var(--spectral); text-decoration:none; letter-spacing:1.17px; }\n  .nav-links { display:flex; gap:24px; list-style:none; }\n  .nav-links a { font-size:12px; font-weight:400; color:rgba(240,240,250,0.7); text-decoration:none; letter-spacing:1px; transition:color 0.2s; }\n  .nav-links a:hover { color:var(--spectral); }\n  .nav-cta { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:8px 18px; border-radius:32px; border:1px solid var(--ghost-border); font-size:12px; font-weight:700; letter-spacing:1.17px; text-decoration:none; }\n\n  .hero { padding:120px 32px 80px; text-align:left; max-width:900px; margin:0 auto; background:linear-gradient(180deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%); min-height:60vh; display:flex; flex-direction:column; justify-content:center; }\n  .hero h1 { font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:16px; }\n  .hero p { font-size:16px; font-weight:400; line-height:1.70; letter-spacing:0.5px; color:rgba(240,240,250,0.7); max-width:500px; margin-bottom:32px; text-transform:none; }\n  .hero-buttons { display:flex; gap:12px; }\n  .btn-ghost { display:inline-block; background:var(--ghost-bg); color:var(--spectral); padding:14px 24px; border-radius:32px; border:1px solid var(--ghost-border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:1.17px; text-decoration:none; cursor:pointer; transition:background 0.2s; }\n  .btn-ghost:hover { background:rgba(240,240,250,0.2); }\n\n  .section { padding:64px 32px; max-width:900px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:400; letter-spacing:1px; color:rgba(240,240,250,0.5); margin-bottom:8px; }\n  .section-title { font-size:32px; font-weight:700; line-height:1.00; letter-spacing:0.96px; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid rgba(240,240,250,0.1); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }\n  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid rgba(240,240,250,0.15); }\n  .color-swatch-block { height:72px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:rgba(240,240,250,0.5); }\n  .color-swatch-role { font-size:9px; color:rgba(240,240,250,0.4); margin-top:3px; text-transform:none; }\n  .color-group-label { font-size:12px; font-weight:700; letter-spacing:1px; color:rgba(240,240,250,0.6); margin:24px 0 10px; }\n\n  .type-sample { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(240,240,250,0.08); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:rgba(240,240,250,0.4); margin-top:6px; letter-spacing:0.5px; }\n\n  .button-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:rgba(240,240,250,0.4); margin-top:8px; letter-spacing:0.5px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }\n  .card { background:rgba(240,240,250,0.03); border:1px solid rgba(240,240,250,0.1); border-radius:4px; padding:24px; }\n  .card h3 { font-size:16px; font-weight:700; letter-spacing:0.96px; margin-bottom:8px; }\n  .card p { font-size:14px; color:rgba(240,240,250,0.6); line-height:1.50; text-transform:none; letter-spacing:normal; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }\n  .form-input { width:100%; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; outline:none; text-transform:none; letter-spacing:normal; }\n  .form-input:focus { border-color:var(--spectral); }\n  .form-input--focus { border-color:var(--spectral); }\n  .form-input--error { border-color:#ff4444; }\n  .form-textarea { width:100%; min-height:80px; background:rgba(240,240,250,0.05); color:var(--spectral); border:1px solid var(--ghost-border); padding:12px 16px; border-radius:4px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; text-transform:none; letter-spacing:normal; }\n  .form-state-label { font-size:9px; color:rgba(240,240,250,0.4); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--spectral); opacity:0.2; border-radius:2px; margin-bottom:6px; height:28px; }\n  .spacing-value { font-size:10px; color:rgba(240,240,250,0.4); }\n\n  .radius-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:60px; height:60px; border:1px solid rgba(240,240,250,0.2); margin-bottom:6px; }\n  .radius-label { font-size:10px; color:rgba(240,240,250,0.4); }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }\n  .elevation-card { border:1px solid rgba(240,240,250,0.08); border-radius:4px; padding:20px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; letter-spacing:0.5px; margin-bottom:4px; }\n  .elevation-desc { font-size:10px; color:rgba(240,240,250,0.4); text-transform:none; letter-spacing:normal; }\n\n  .footer { padding:32px; text-align:center; border-top:1px solid rgba(240,240,250,0.1); font-size:11px; color:rgba(240,240,250,0.4); }\n  .footer a { color:var(--spectral); text-decoration:underline; }\n\n  @media (max-width:600px) {\n    .hero h1 { font-size:32px; }\n    .nav-links { display:none; }\n    .section { padding:48px 20px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Learn More\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#f0f0fa;color:#000000;font-size:10px;font-weight:700;padding:4px 10px;border-radius:32px;text-transform:uppercase;letter-spacing:1px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by SpaceX\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and spacing value — visualized against the void.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-ghost\" href=\"#\">Explore Tokens\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Source\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Space Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f0f0fa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Spectral White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f0f0fa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(240,240,250,0.1); border:1px solid rgba(240,240,250,0.3)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ghost Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(f0f0fa, 0.1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgba(0,0,0,0.5)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Overlay\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Photo overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:700; line-height:1.00; letter-spacing:0.96px;\">MAKING LIFE MULTIPLANETARY\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 48px \u002F bold \u002F 1.00 \u002F +0.96px \u002F D-DIN-Bold \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.70; text-transform:none; letter-spacing:normal;\">SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded to revolutionize space technology.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 16px \u002F 400 \u002F 1.70 \u002F D-DIN\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:13px; font-weight:700; line-height:0.94; letter-spacing:1.17px;\">FALCON 9 · STARSHIP · DRAGON\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Nav Bold — 13px \u002F 700 \u002F 0.94 \u002F +1.17px \u002F uppercase\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:400; line-height:1.00; letter-spacing:1px;\">MISSION OVERVIEW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 12px \u002F 400 \u002F 1.00 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:400; line-height:0.94; letter-spacing:1px;\">LAUNCH DATE: 2026-04-15\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 10px \u002F 400 \u002F 0.94 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Button\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" style=\"background:rgba(240,240,250,0.2);\" href=\"#\">Hover State\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost Hover\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:12px; color:rgba(240,240,250,0.4); margin-top:16px; text-transform:none; letter-spacing:normal;\">SpaceX uses only one button variant — the ghost button. The absence of variety IS the design.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Content Sections\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Falcon 9\u003C\u002Fh3>\u003Cp>The world's first orbital-class reusable rocket. Designed for reliable and safe transport of people and payloads.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Starship\u003C\u002Fh3>\u003Cp>The most powerful launch vehicle ever developed. Designed to carry crew and cargo to Mars and beyond.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:16px; text-transform:none; letter-spacing:normal;\">Note: SpaceX does not use traditional cards — all content sits directly on full-viewport photography. These are representational.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Mission Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"STARSHIP MISSION\">\u003Cdiv class=\"form-state-label\">Default (ghost border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Launch Site\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"STARBASE, TEXAS\">\u003Cdiv class=\"form-state-label\">Focus (spectral white border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Payload\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"EXCEEDS CAPACITY\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Notes\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Mission briefing notes...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">3\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">5\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:18px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">18\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:30px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">30\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;\">Minimal radius system — 4px for utility, 32px for buttons.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Photography\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Full-viewport imagery\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:rgba(0,0,0,0.5);\">\u003Cdiv class=\"elevation-label\">Overlay\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark gradient for text\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--ghost-bg); border-color:var(--ghost-border);\">\u003Cdiv class=\"elevation-label\">Ghost\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Interactive surface\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:11px; color:rgba(240,240,250,0.3); margin-top:12px; text-transform:none; letter-spacing:normal;\">Zero shadows. Depth from photography only.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fspacex.com\u002F\">spacex.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Spacex Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fspacex\u002FDESIGN.md) extracted from the public [SpaceX](https:\u002F\u002Fspacex.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fspacex\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spacex design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Spacex Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fspacex\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Spacex Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fspacex\u002Fpreview-screenshot.png)\n",{"slug":320,"name":321,"category":7,"designMd":322,"previewHtml":323,"previewDarkHtml":324,"readme":325},"spotify","Spotify","# Design System Inspiration of Spotify\n\n## 1. Visual Theme & Atmosphere\n\nSpotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is \"content-first darkness\" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.\n\nThe typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.\n\nWhat distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.\n\n**Key Characteristics:**\n- Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content\n- Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional\n- SpotifyMixUI\u002FCircularSp font family with global script support\n- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized\n- Uppercase button labels with wide letter-spacing (1.4px–2px)\n- Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)\n- Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)\n- Album art as the primary color source — the UI is achromatic by design\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Spotify Green** (`#1ed760`): Primary brand accent — play buttons, active states, CTAs\n- **Near Black** (`#121212`): Deepest background surface\n- **Dark Surface** (`#181818`): Cards, containers, elevated surfaces\n- **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces\n\n### Text\n- **White** (`#ffffff`): `--text-base`, primary text\n- **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav\n- **Near White** (`#cbcbcb`): Slightly brighter secondary text\n- **Light** (`#fdfdfd`): Near-pure white for maximum emphasis\n\n### Semantic\n- **Negative Red** (`#f3727f`): `--text-negative`, error states\n- **Warning Orange** (`#ffa42b`): `--text-warning`, warning states\n- **Announcement Blue** (`#539df5`): `--text-announcement`, info states\n\n### Surface & Border\n- **Dark Card** (`#252525`): Elevated card surface\n- **Mid Card** (`#272727`): Alternate card surface\n- **Border Gray** (`#4d4d4d`): Button borders on dark\n- **Light Border** (`#7c7c7c`): Outlined button borders, muted links\n- **Separator** (`#b3b3b3`): Divider lines\n- **Light Surface** (`#eeeeee`): Light-mode buttons (rare)\n- **Spotify Green Border** (`#1db954`): Green accent border variant\n\n### Shadows\n- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels\n- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns\n- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo\n\n## 3. Typography Rules\n\n### Font Families\n- **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`\n- **UI \u002F Body**: `SpotifyMixUI`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |\n| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |\n| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |\n| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |\n| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |\n| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |\n| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |\n| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |\n| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |\n| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |\n| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |\n| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |\n| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |\n| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |\n\n### Principles\n- **Bold\u002Fregular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.\n- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic \"label\" voice distinct from content text.\n- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.\n- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Pill**\n- Background: `#1f1f1f`\n- Text: `#ffffff` or `#b3b3b3`\n- Padding: 8px 16px\n- Radius: 9999px (full pill)\n- Use: Navigation pills, secondary actions\n\n**Dark Large Pill**\n- Background: `#181818`\n- Text: `#ffffff`\n- Padding: 0px 43px\n- Radius: 500px\n- Use: Primary app navigation buttons\n\n**Light Pill**\n- Background: `#eeeeee`\n- Text: `#181818`\n- Radius: 500px\n- Use: Light-mode CTAs (cookie consent, marketing)\n\n**Outlined Pill**\n- Background: transparent\n- Text: `#ffffff`\n- Border: `1px solid #7c7c7c`\n- Padding: 4px 16px 4px 36px (asymmetric for icon)\n- Radius: 9999px\n- Use: Follow buttons, secondary actions\n\n**Circular Play**\n- Background: `#1f1f1f`\n- Text: `#ffffff`\n- Padding: 12px\n- Radius: 50% (circle)\n- Use: Play\u002Fpause controls\n\n### Cards & Containers\n- Background: `#181818` or `#1f1f1f`\n- Radius: 6px–8px\n- No visible borders on most cards\n- Hover: slight background lightening\n- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated\n\n### Inputs\n- Search input: `#1f1f1f` background, `#ffffff` text\n- Radius: 500px (pill)\n- Padding: 12px 96px 12px 48px (icon-aware)\n- Focus: border becomes `#000000`, outline `1px solid`\n\n### Navigation\n- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive\n- `#b3b3b3` muted color for inactive items, `#ffffff` for active\n- Circular icon buttons (50% radius)\n- Spotify logo top-left in green\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px\n\n### Grid & Container\n- Sidebar (fixed) + main content area\n- Grid-based album\u002Fplaylist cards\n- Full-width now-playing bar at bottom\n- Responsive content area fills remaining space\n\n### Whitespace Philosophy\n- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.\n- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.\n\n### Border Radius Scale\n- Minimal (2px): Badges, explicit tags\n- Subtle (4px): Inputs, small elements\n- Standard (6px): Album art containers, cards\n- Comfortable (8px): Sections, dialogs\n- Medium (10px–20px): Panels, overlay elements\n- Large (100px): Large pill buttons\n- Pill (500px): Primary buttons, search input\n- Full Pill (9999px): Navigation pills, search\n- Circle (50%): Play buttons, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base (Level 0) | `#121212` background | Deepest layer, page background |\n| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |\n| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |\n| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |\n| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |\n\n**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic \"floating in darkness\" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation\n- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs\n- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls\n- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels\n- Keep typography compact (10px–24px range) — this is an app, not a magazine\n- Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds\n- Let album art provide color — the UI itself is achromatic\n\n### Don't\n- Don't use Spotify Green decoratively or on backgrounds — it's functional only\n- Don't use light backgrounds for primary surfaces — the dark immersion is core\n- Don't skip the pill\u002Fcircle geometry on buttons — square buttons break the identity\n- Don't use thin\u002Fsubtle shadows — on dark backgrounds, shadows need to be heavy to be visible\n- Don't add additional brand colors — green + achromatic grays is the complete palette\n- Don't use relaxed line-heights — Spotify's typography is compact and dense\n- Don't expose raw gray borders — use shadow-based or inset borders instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C425px | Compact mobile layout |\n| Mobile | 425–576px | Standard mobile |\n| Tablet | 576–768px | 2-column grid |\n| Tablet Large | 768–896px | Expanded layout |\n| Desktop Small | 896–1024px | Sidebar visible |\n| Desktop | 1024–1280px | Full desktop layout |\n| Large Desktop | >1280px | Expanded grid |\n\n### Collapsing Strategy\n- Sidebar: full → collapsed → hidden\n- Album grid: 5 columns → 3 → 2 → 1\n- Now-playing bar: maintained at all sizes\n- Search: pill input maintained, width adjusts\n- Navigation: sidebar → bottom bar on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Near Black (`#121212`)\n- Surface: Dark Card (`#181818`)\n- Text: White (`#ffffff`)\n- Secondary text: Silver (`#b3b3b3`)\n- Accent: Spotify Green (`#1ed760`)\n- Border: `#4d4d4d`\n- Error: Negative Red (`#f3727f`)\n\n### Example Component Prompts\n- \"Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover.\"\n- \"Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px.\"\n- \"Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding.\"\n- \"Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset.\"\n- \"Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3.\"\n\n### Iteration Guide\n1. Start with #121212 — everything lives in near-black darkness\n2. Spotify Green for functional highlights only (play, active, CTA)\n3. Pill everything — 500px for large, 9999px for small, 50% for circular\n4. Uppercase + wide tracking on buttons — the systematic label voice\n5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark\n6. Album art provides all the color — the UI stays achromatic\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Spotify (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #121212; --surface: #181818; --mid: #1f1f1f; --card: #252525;\n    --green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;\n    --neg: #f3727f; --warn: #ffa42b; --info: #539df5;\n    --border: #4d4d4d; --light-border: #7c7c7c;\n    --shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;\n    --shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;\n    --font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }\n  .nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:16px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--white); }\n  .nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; background:var(--bg); }\n  .hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }\n  .hero h1 span { color:var(--green); }\n  .hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }\n  .btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1000px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }\n  .section-title { font-size:18px; font-weight:700; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }\n  .color-swatch-block { height:60px; width:100%; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }\n  .card:hover { background:var(--card); }\n  .card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }\n  .card p { font-size:12px; color:var(--silver); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }\n  .form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }\n  .form-input:focus { box-shadow:0 0 0 2px var(--green); }\n  .form-input--focus { box-shadow:0 0 0 2px var(--green); }\n  .form-input--error { box-shadow:0 0 0 2px var(--neg); }\n  .form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }\n  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }\n  .elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Open Spotify\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by \u003Cspan>Spotify\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Get Spotify Free\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1ed760\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Spotify Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1ed760\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#121212\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#121212\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#181818\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#181818\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f1f1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Text & Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b3b3b3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b3b3b3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f3727f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Negative\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f3727f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffa42b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffa42b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#539df5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Announcement\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#539df5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Info states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:700;\">Section Title — Your Playlists\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Title — 24px \u002F 700 \u002F SpotifyMixUITitle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.30;\">Feature Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 18px \u002F 600 \u002F 1.30\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700;\">Body Bold — Liked Songs\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Bold — 16px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; color:var(--silver);\">Caption — 3 min 42 sec\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;\">SHUFFLE PLAY\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button Uppercase — 14px \u002F 700 \u002F uppercase \u002F +1.4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:700; color:var(--silver);\">Small Bold — 1,234 songs\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small Bold — 12px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);\">Badge\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Badge — 10.5px \u002F 600 \u002F capitalize\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Shuffle Play\u003C\u002Fa>\u003Cdiv class=\"button-label\">Green Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Browse\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Follow\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">▶\u003C\u002Fa>\u003Cdiv class=\"button-label\">Play Circle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Discover Weekly\u003C\u002Fh3>\u003Cp>Your personal playlist, updated every Monday.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow:var(--shadow-med);\">\u003Ch3>Release Radar\u003C\u002Fh3>\u003Cp>New releases from artists you follow. Elevated shadow.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Daily Mix 1\u003C\u002Fh3>\u003Cp>Made for you based on your listening.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Liked Songs\u003C\u002Fh3>\u003Cp>Your saved songs collection.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Search\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"search\" placeholder=\"Artists, songs, or podcasts\">\u003Cdiv class=\"form-state-label\">Default (inset border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Playlist Name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Chill Vibes\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"email\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a description...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:500px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">500px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Base\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#121212 background\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--mid);\">\u003Cdiv class=\"elevation-label\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#1f1f1f\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-med);\">\u003Cdiv class=\"elevation-label\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.3 opacity 8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-heavy);\">\u003Cdiv class=\"elevation-label\">Dialog\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.5 opacity 24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fspotify.com\u002F\">spotify.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Spotify (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #0a0a0a; --surface: #111111; --mid: #1f1f1f; --card: #252525;\n    --green: #1ed760; --white: #ffffff; --silver: #b3b3b3; --muted: #7c7c7c;\n    --neg: #f3727f; --warn: #ffa42b; --info: #539df5;\n    --border: #4d4d4d; --light-border: #7c7c7c;\n    --shadow-heavy: rgba(0,0,0,0.5) 0px 8px 24px;\n    --shadow-med: rgba(0,0,0,0.3) 0px 8px 8px;\n    --font: 'Inter', Helvetica Neue, helvetica, arial, sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--bg); color:var(--white); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.40; -webkit-font-smoothing:antialiased; }\n\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--surface); }\n  .nav-brand { font-size:14px; font-weight:700; color:var(--white); text-decoration:none; }\n  .nav-links { display:flex; gap:16px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:400; color:var(--silver); text-decoration:none; transition:color 0.15s; }\n  .nav-links a:hover { color:var(--white); }\n  .nav-cta { display:inline-block; background:var(--green); color:#000; padding:8px 20px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; }\n\n  .hero { padding:64px 24px; text-align:center; background:var(--bg); }\n  .hero h1 { font-size:24px; font-weight:700; margin-bottom:12px; }\n  .hero h1 span { color:var(--green); }\n  .hero p { font-size:14px; color:var(--silver); max-width:500px; margin:0 auto 24px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n  .btn-green { display:inline-block; background:var(--green); color:#000; padding:10px 24px; border-radius:500px; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }\n  .btn-outline { display:inline-block; background:transparent; color:var(--white); padding:10px 24px; border-radius:9999px; border:1px solid var(--light-border); font-family:var(--font); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; text-transform:uppercase; letter-spacing:1.4px; }\n  .btn-dark { display:inline-block; background:var(--mid); color:var(--white); padding:8px 16px; border-radius:9999px; font-size:14px; font-weight:700; text-decoration:none; }\n  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#000; width:48px; height:48px; border-radius:50%; font-size:20px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }\n\n  .section { padding:48px 24px; max-width:1000px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--silver); margin-bottom:8px; }\n  .section-title { font-size:18px; font-weight:700; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }\n  .color-swatch-block { height:60px; width:100%; }\n  .color-swatch-info { padding:8px 10px; }\n  .color-swatch-name { font-size:12px; font-weight:700; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--muted); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:700; color:var(--silver); margin:20px 0 8px; text-transform:uppercase; letter-spacing:1px; }\n\n  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.05); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--muted); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .card { background:var(--surface); border-radius:8px; padding:16px; transition:background 0.2s; }\n  .card:hover { background:var(--card); }\n  .card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }\n  .card p { font-size:12px; color:var(--silver); }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:12px; font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }\n  .form-input { width:100%; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:500px; font-family:var(--font); font-size:14px; outline:none; box-shadow:rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }\n  .form-input:focus { box-shadow:0 0 0 2px var(--green); }\n  .form-input--focus { box-shadow:0 0 0 2px var(--green); }\n  .form-input--error { box-shadow:0 0 0 2px var(--neg); }\n  .form-textarea { width:100%; min-height:80px; background:var(--mid); color:var(--white); border:none; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:14px; resize:vertical; outline:none; box-shadow:rgb(124,124,124) 0px 0px 0px 1px inset; }\n  .form-state-label { font-size:9px; color:var(--muted); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--mid); border:1px solid rgba(255,255,255,0.1); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }\n  .elevation-card { background:var(--surface); border-radius:8px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:700; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--muted); font-family:monospace; }\n\n  .footer { padding:24px; text-align:center; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; color:var(--muted); }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:768px) { .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Open Spotify\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#1ed760;color:#000;font-size:10px;font-weight:700;padding:4px 10px;border-radius:500px;text-transform:uppercase;letter-spacing:1px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by \u003Cspan>Spotify\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Get Spotify Free\u003C\u002Fa>\n    \u003Ca class=\"btn-outline\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1ed760\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Spotify Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1ed760\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Brand accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#121212\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#121212\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#181818\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#181818\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f1f1f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f1f1f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Text & Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b3b3b3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Silver\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b3b3b3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f3727f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Negative\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f3727f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffa42b\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffa42b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#539df5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Announcement\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#539df5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Info states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:700;\">Section Title — Your Playlists\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Title — 24px \u002F 700 \u002F SpotifyMixUITitle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.30;\">Feature Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Feature — 18px \u002F 600 \u002F 1.30\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:700;\">Body Bold — Liked Songs\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Bold — 16px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; color:var(--silver);\">Caption — 3 min 42 sec\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 400\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;\">SHUFFLE PLAY\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button Uppercase — 14px \u002F 700 \u002F uppercase \u002F +1.4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:700; color:var(--silver);\">Small Bold — 1,234 songs\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small Bold — 12px \u002F 700\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10.5px; font-weight:600; text-transform:capitalize; color:var(--silver);\">Badge\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Badge — 10.5px \u002F 600 \u002F capitalize\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Shuffle Play\u003C\u002Fa>\u003Cdiv class=\"button-label\">Green Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Browse\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Follow\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-circle\" href=\"#\">▶\u003C\u002Fa>\u003Cdiv class=\"button-label\">Play Circle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>Discover Weekly\u003C\u002Fh3>\u003Cp>Your personal playlist, updated every Monday.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow:var(--shadow-med);\">\u003Ch3>Release Radar\u003C\u002Fh3>\u003Cp>New releases from artists you follow. Elevated shadow.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Daily Mix 1\u003C\u002Fh3>\u003Cp>Made for you based on your listening.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Liked Songs\u003C\u002Fh3>\u003Cp>Your saved songs collection.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Search\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"search\" placeholder=\"Artists, songs, or podcasts\">\u003Cdiv class=\"form-state-label\">Default (inset border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Playlist Name\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Chill Vibes\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"email\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Add a description...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:500px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">500px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Base\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#121212 background\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background:var(--mid);\">\u003Cdiv class=\"elevation-label\">Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">#1f1f1f\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-med);\">\u003Cdiv class=\"elevation-label\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.3 opacity 8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:var(--shadow-heavy);\">\u003Cdiv class=\"elevation-label\">Dialog\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.5 opacity 24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fspotify.com\u002F\">spotify.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Spotify Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fspotify\u002FDESIGN.md) extracted from the public [Spotify](https:\u002F\u002Fspotify.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fspotify\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Spotify design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Spotify Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fspotify\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Spotify Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fspotify\u002Fpreview-screenshot.png)\n",{"slug":327,"name":328,"category":60,"designMd":329,"previewHtml":330,"previewDarkHtml":331,"readme":332},"stripe","Stripe","# Design System Inspiration of Stripe\n\n## 1. Visual Theme & Atmosphere\n\nStripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry.\n\nThe custom `sohne-var` variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType `\"ss01\"` stylistic set, which modifies character shapes for a distinctly geometric, modern feel. At display sizes (48px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the \"bold hero headline\" convention; Stripe's headlines feel like they don't need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks. At smaller sizes, the system also uses weight 300 with proportionally reduced tracking, and tabular numerals via `\"tnum\"` for financial data display.\n\nWhat truly distinguishes Stripe is its shadow system. Rather than the flat or single-layer approach of most sites, Stripe uses multi-layer, blue-tinted shadows: the signature `rgba(50,50,93,0.25)` combined with `rgba(0,0,0,0.1)` creates shadows with a cool, almost atmospheric depth -- like elements are floating in a twilight sky. The blue-gray undertone of the primary shadow color (50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand.\n\n**Key Characteristics:**\n- sohne-var with OpenType `\"ss01\"` on all text -- a custom stylistic set that defines the brand's letterforms\n- Weight 300 as the signature headline weight -- light, confident, anti-convention\n- Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward)\n- Blue-tinted multi-layer shadows using `rgba(50,50,93,0.25)` -- elevation that feels brand-colored\n- Deep navy (`#061b31`) headings instead of black -- warm, premium, financial-grade\n- Conservative border-radius (4px-8px) -- nothing pill-shaped, nothing harsh\n- Ruby (`#ea2261`) and magenta (`#f96bee`) accents for gradient and decorative elements\n- `SourceCodePro` as the monospace companion for code and technical labels\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system.\n- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text.\n- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark backgrounds.\n\n### Brand & Dark\n- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Deep indigo for dark sections, footer backgrounds, and immersive brand moments.\n- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness.\n\n### Accent Colors\n- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Warm red-pink for icons, alerts, and accent elements.\n- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple for gradients and decorative highlights.\n- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Tinted surface for magenta-themed cards and badges.\n\n### Interactive\n- **Primary Purple** (`#533afd`): Primary link color, active states, selected elements.\n- **Purple Hover** (`#4434d4`): Darker purple for hover states on primary elements.\n- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Dark purple for icon hover states.\n- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Soft lavender for subdued hover backgrounds.\n- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range selector and input highlight color.\n\n### Neutral Scale\n- **Heading** (`#061b31`): Primary headings, nav text, strong labels.\n- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary headings.\n- **Body** (`#64748d`): Secondary text, descriptions, captions.\n- **Success Green** (`#15be53`): Status badges, success indicators (with 0.2-0.4 alpha for backgrounds\u002Fborders).\n- **Success Text** (`#108c3d`): Success badge text color.\n- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight accent.\n\n### Surface & Borders\n- **Border Default** (`#e5edf5`): Standard border color for cards, dividers, and containers.\n- **Border Purple** (`#b9b9f9`): Active\u002Fselected state borders on buttons and inputs.\n- **Border Soft Purple** (`#d6d9fc`): Subtle purple-tinted borders for secondary elements.\n- **Border Magenta** (`#ffd7ef`): Pink-tinted borders for magenta-themed elements.\n- **Border Dashed** (`#362baa`): Dashed borders for drop zones and placeholder elements.\n\n### Shadow Colors\n- **Shadow Blue** (`rgba(50,50,93,0.25)`): The signature -- blue-tinted primary shadow color.\n- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Deeper blue shadow for elevated elements.\n- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth reinforcement.\n- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Soft ambient shadow for subtle elevation.\n- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient shadow for light lift.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `sohne-var`, with fallback: `SF Pro Display`\n- **Monospace**: `SourceCodePro`, with fallback: `SFMono-Regular`\n- **OpenType Features**: `\"ss01\"` enabled globally on all sohne-var text; `\"tnum\"` for tabular numbers on financial data and captions.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |\n|------|------|------|--------|-------------|----------------|----------|-------|\n| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority |\n| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | Secondary hero headlines |\n| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles |\n| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections |\n| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads |\n| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text |\n| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standard reading text |\n| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | Primary button text |\n| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Secondary\u002Fcompact buttons |\n| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Navigation links |\n| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Small labels, metadata |\n| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Fine print, timestamps |\n| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Financial data, numbers |\n| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | Tiny labels, axis markers |\n| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | Chart data, small numbers |\n| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | Smallest labels |\n| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | Code blocks, syntax |\n| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | Bold code, keywords |\n| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | Technical labels |\n| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | Tiny code annotations |\n\n### Principles\n- **Light weight as signature**: Weight 300 at display sizes is Stripe's most distinctive typographic choice. Where others use 600-700 to command attention, Stripe uses lightness as luxury -- the text is so confident it doesn't need weight to be authoritative.\n- **ss01 everywhere**: The `\"ss01\"` stylistic set is non-negotiable. It modifies specific glyphs (likely alternate `a`, `g`, `l` forms) to create a more geometric, contemporary feel across all sohne-var text.\n- **Two OpenType modes**: `\"ss01\"` for display\u002Fbody text, `\"tnum\"` for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a data table uses tnum.\n- **Progressive tracking**: Letter-spacing tightens proportionally with size: -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, -0.26px at 26px, normal at 16px and below.\n- **Two-weight simplicity**: Primarily 300 (body and headings) and 400 (UI\u002Fbuttons). No bold (700) in the primary font -- SourceCodePro uses 500\u002F700 for code contrast.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Purple**\n- Background: `#533afd`\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 4px\n- Font: 16px sohne-var weight 400, `\"ss01\"`\n- Hover: `#4434d4` background\n- Use: Primary CTA (\"Start now\", \"Contact sales\")\n\n**Ghost \u002F Outlined**\n- Background: transparent\n- Text: `#533afd`\n- Padding: 8px 16px\n- Radius: 4px\n- Border: `1px solid #b9b9f9`\n- Font: 16px sohne-var weight 400, `\"ss01\"`\n- Hover: background shifts to `rgba(83,58,253,0.05)`\n- Use: Secondary actions\n\n**Transparent Info**\n- Background: transparent\n- Text: `#2874ad`\n- Padding: 8px 16px\n- Radius: 4px\n- Border: `1px solid rgba(43,145,223,0.2)`\n- Use: Tertiary\u002Finfo-level actions\n\n**Neutral Ghost**\n- Background: transparent (`rgba(255,255,255,0)`)\n- Text: `rgba(16,16,16,0.3)`\n- Padding: 8px 16px\n- Radius: 4px\n- Outline: `1px solid rgb(212,222,233)`\n- Use: Disabled or muted actions\n\n### Cards & Containers\n- Background: `#ffffff`\n- Border: `1px solid #e5edf5` (standard) or `1px solid #061b31` (dark accent)\n- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured)\n- Shadow (standard): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`\n- Shadow (ambient): `rgba(23,23,23,0.08) 0px 15px 35px 0px`\n- Hover: shadow intensifies, often adding the blue-tinted layer\n\n### Badges \u002F Tags \u002F Pills\n**Neutral Pill**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 0px 6px\n- Radius: 4px\n- Border: `1px solid #f6f9fc`\n- Font: 11px weight 400\n\n**Success Badge**\n- Background: `rgba(21,190,83,0.2)`\n- Text: `#108c3d`\n- Padding: 1px 6px\n- Radius: 4px\n- Border: `1px solid rgba(21,190,83,0.4)`\n- Font: 10px weight 300\n\n### Inputs & Forms\n- Border: `1px solid #e5edf5`\n- Radius: 4px\n- Focus: `1px solid #533afd` or purple ring\n- Label: `#273951`, 14px sohne-var\n- Text: `#061b31`\n- Placeholder: `#64748d`\n\n### Navigation\n- Clean horizontal nav on white, sticky with blur backdrop\n- Brand logotype left-aligned\n- Links: sohne-var 14px weight 400, `#061b31` text with `\"ss01\"`\n- Radius: 6px on nav container\n- CTA: purple button right-aligned (\"Sign in\", \"Start now\")\n- Mobile: hamburger toggle with 6px radius\n\n### Decorative Elements\n**Dashed Borders**\n- `1px dashed #362baa` (purple) for placeholder\u002Fdrop zones\n- `1px dashed #ffd7ef` (magenta) for magenta-themed decorative borders\n\n**Gradient Accents**\n- Ruby-to-magenta gradients (`#ea2261` to `#f96bee`) for hero decorations\n- Brand dark sections use `#1c1e54` backgrounds with white text\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px\n- Notable: The scale is dense at the small end (every 2px from 4-12), reflecting Stripe's precision-oriented UI for financial data\n\n### Grid & Container\n- Max content width: approximately 1080px\n- Hero: centered single-column with generous padding, lightweight headlines\n- Feature sections: 2-3 column grids for feature cards\n- Full-width dark sections with `#1c1e54` background for brand immersion\n- Code\u002Fdashboard previews as contained cards with blue-tinted shadows\n\n### Whitespace Philosophy\n- **Precision spacing**: Unlike the vast emptiness of minimalist systems, Stripe uses measured, purposeful whitespace. Every gap is a deliberate typographic choice.\n- **Dense data, generous chrome**: Financial data displays (tables, charts) are tightly packed, but the UI chrome around them is generously spaced. This creates a sense of controlled density -- like a well-organized spreadsheet in a beautiful frame.\n- **Section rhythm**: White sections alternate with dark brand sections (`#1c1e54`), creating a dramatic light\u002Fdark cadence that prevents monotony without introducing arbitrary color.\n\n### Border Radius Scale\n- Micro (1px): Fine-grained elements, subtle rounding\n- Standard (4px): Buttons, inputs, badges, cards -- the workhorse\n- Comfortable (5px): Standard card containers\n- Relaxed (6px): Navigation, larger interactive elements\n- Large (8px): Featured cards, hero elements\n- Compound: `0px 0px 6px 6px` for bottom-rounded containers (tab panels, dropdown footers)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, inline text |\n| Ambient (Level 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtle card lift, hover hints |\n| Standard (Level 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Standard cards, content panels |\n| Elevated (Level 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Featured cards, dropdowns, popovers |\n| Deep (Level 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modals, floating panels |\n| Ring (Accessibility) | `2px solid #533afd` outline | Keyboard focus ring |\n\n**Shadow Philosophy**: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (`rgba(50,50,93,0.25)`) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (`rgba(0,0,0,0.1)`) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled.\n\n### Decorative Depth\n- Dark brand sections (`#1c1e54`) create immersive depth through background color contrast\n- Gradient overlays with ruby-to-magenta transitions for hero decorations\n- Shadow color `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) for top-edge shadows on sticky elements\n\n## 7. Do's and Don'ts\n\n### Do\n- Use sohne-var with `\"ss01\"` on every text element -- the stylistic set IS the brand\n- Use weight 300 for all headlines and body text -- lightness is the signature\n- Apply blue-tinted shadows (`rgba(50,50,93,0.25)`) for all elevated elements\n- Use `#061b31` (deep navy) for headings instead of `#000000` -- the warmth matters\n- Keep border-radius between 4px-8px -- conservative rounding is intentional\n- Use `\"tnum\"` for any tabular\u002Ffinancial number display\n- Layer shadows: blue-tinted far + neutral close for depth parallax\n- Use `#533afd` purple as the primary interactive\u002FCTA color\n\n### Don't\n- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice\n- Don't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe is conservative\n- Don't use neutral gray shadows -- always tint with blue (`rgba(50,50,93,...)`)\n- Don't skip `\"ss01\"` on any sohne-var text -- the alternate glyphs define the personality\n- Don't use pure black (`#000000`) for headings -- always `#061b31` deep navy\n- Don't use warm accent colors (orange, yellow) for interactive elements -- purple is primary\n- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight\n- Don't use the magenta\u002Fruby accents for buttons or links -- they're decorative\u002Fgradient only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, reduced heading sizes, stacked cards |\n| Tablet | 640-1024px | 2-column grids, moderate padding |\n| Desktop | 1024-1280px | Full layout, 3-column feature grids |\n| Large Desktop | >1280px | Centered content with generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding (8px-16px vertical)\n- Navigation links at 14px with adequate spacing\n- Badges have 6px horizontal padding minimum for tap targets\n- Mobile nav toggle with 6px radius button\n\n### Collapsing Strategy\n- Hero: 56px display -> 32px on mobile, weight 300 maintained\n- Navigation: horizontal links + CTAs -> hamburger toggle\n- Feature cards: 3-column -> 2-column -> single column stacked\n- Dark brand sections: maintain full-width treatment, reduce internal padding\n- Financial data tables: horizontal scroll on mobile\n- Section spacing: 64px+ -> 40px on mobile\n- Typography scale compresses: 56px -> 48px -> 32px hero sizes across breakpoints\n\n### Image Behavior\n- Dashboard\u002Fproduct screenshots maintain blue-tinted shadow at all sizes\n- Hero gradient decorations simplify on mobile\n- Code blocks maintain `SourceCodePro` treatment, may horizontally scroll\n- Card images maintain consistent 4px-6px border-radius\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Stripe Purple (`#533afd`)\n- CTA Hover: Purple Dark (`#4434d4`)\n- Background: Pure White (`#ffffff`)\n- Heading text: Deep Navy (`#061b31`)\n- Body text: Slate (`#64748d`)\n- Label text: Dark Slate (`#273951`)\n- Border: Soft Blue (`#e5edf5`)\n- Link: Stripe Purple (`#533afd`)\n- Dark section: Brand Dark (`#1c1e54`)\n- Success: Green (`#15be53`)\n- Accent decorative: Ruby (`#ea2261`), Magenta (`#f96bee`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 48px sohne-var weight 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px radius).\"\n- \"Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, 'ss01'. Body at 16px weight 300, #64748d.\"\n- \"Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid rgba(21,190,83,0.4).\"\n- \"Create navigation: white sticky header with backdrop-filter blur(12px). sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px radius.\"\n- \"Design a dark brand section: #1c1e54 background, white text. Headline 32px sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300, rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px radius.\"\n\n### Iteration Guide\n1. Always enable `font-feature-settings: \"ss01\"` on sohne-var text -- this is the brand's typographic DNA\n2. Weight 300 is the default; use 400 only for buttons\u002Flinks\u002Fnavigation\n3. Shadow formula: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` where Y1\u002FB1 are larger (far shadow) and Y2\u002FB2 are smaller (near shadow)\n4. Heading color is `#061b31` (deep navy), body is `#64748d` (slate), labels are `#273951` (dark slate)\n5. Border-radius stays in the 4px-8px range -- never use pill shapes or large rounding\n6. Use `\"tnum\"` for any numbers in tables, charts, or financial displays\n7. Dark sections use `#1c1e54` -- not black, not gray, but a deep branded indigo\n8. SourceCodePro for code at 12px\u002F500 with 2.00 line-height (very generous for readability)\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Stripe (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Source+Code+Pro:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  @font-face {\n    font-family: 'sohne-var';\n    src: local('sohne-var'), local('Sohne'), local('SF Pro Display');\n    font-weight: 100 900;\n    font-display: swap;\n  }\n  :root {\n    --purple: #533afd;\n    --purple-hover: #4434d4;\n    --purple-deep: #2e2b8c;\n    --purple-light: #b9b9f9;\n    --purple-mid: #665efd;\n    --navy: #061b31;\n    --dark-navy: #0d253d;\n    --brand-dark: #1c1e54;\n    --white: #ffffff;\n    --ruby: #ea2261;\n    --magenta: #f96bee;\n    --magenta-light: #ffd7ef;\n    --success: #15be53;\n    --success-text: #108c3d;\n    --lemon: #9b6829;\n    --slate: #64748d;\n    --dark-slate: #273951;\n    --border: #e5edf5;\n    --border-purple: #b9b9f9;\n    --border-soft: #d6d9fc;\n    --shadow-blue: rgba(50,50,93,0.25);\n    --shadow-dark-blue: rgba(3,3,39,0.25);\n    --shadow-black: rgba(0,0,0,0.1);\n    --shadow-ambient: rgba(23,23,23,0.08);\n    --shadow-soft: rgba(23,23,23,0.06);\n    --shadow-card: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;\n    --shadow-ambient-card: rgba(23,23,23,0.08) 0px 15px 35px 0px;\n    --shadow-subtle: rgba(23,23,23,0.06) 0px 3px 6px 0px;\n    --font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;\n    --font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--navy);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 300; line-height: 1.40;\n    font-feature-settings: \"ss01\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(255,255,255,0.90);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border);\n    border-radius: 0 0 6px 6px;\n  }\n  .nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--slate); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--navy); }\n  .nav-cta {\n    display: inline-block; background: var(--purple); color: var(--white);\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    text-decoration: none; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .nav-cta:hover { background: var(--purple-hover); }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 300; line-height: 1.15;\n    letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--purple); color: var(--white);\n    padding: 10px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-primary); font-size: 16px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-primary:hover { background: var(--purple-hover); }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--purple);\n    padding: 10px 20px; border-radius: 4px;\n    border: 1px solid var(--border-purple);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-ghost:hover { background: rgba(83,58,253,0.05); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }\n  .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }\n  .color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }\n  .color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 300; color: var(--slate); margin-top: 8px; }\n  .btn-info {\n    display: inline-block; background: transparent; color: #2874ad;\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    border: 1px solid rgba(43,145,223,0.2); text-decoration: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-neutral {\n    display: inline-block; background: transparent; color: rgba(16,16,16,0.3);\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    outline: 1px solid rgb(212,222,233); border: none; text-decoration: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .badge-success {\n    display: inline-block; background: rgba(21,190,83,0.2); color: #108c3d;\n    padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;\n    border: 1px solid rgba(21,190,83,0.4);\n    font-feature-settings: \"ss01\" 1;\n  }\n  .badge-neutral {\n    display: inline-block; background: #ffffff; color: #000000;\n    padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;\n    border: 1px solid #f6f9fc;\n    font-feature-settings: \"ss01\" 1;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: var(--white); border-radius: 6px; padding: 24px;\n    border: 1px solid var(--border);\n    box-shadow: var(--shadow-subtle);\n    transition: box-shadow 0.25s ease;\n  }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }\n  .card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }\n  .card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--navy);\n    border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;\n    font-feature-settings: \"ss01\" 1;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--purple); }\n  .form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }\n  .form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--navy);\n    border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--purple); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }\n  .radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 6px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }\n  .footer a { color: var(--purple); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 32px; letter-spacing: -0.64px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start now\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Stripe\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Start now\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#533afd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Stripe Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#533afd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary brand, CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#061b31\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#061b31\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #e5edf5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand & Dark\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1e54\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1e54\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0d253d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d253d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Darkest neutral\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ea2261\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ruby\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ea2261\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Accent, alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f96bee\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Magenta\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f96bee\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Gradients, decorative\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd7ef\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Magenta Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd7ef\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tinted surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive Purple Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4434d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4434d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#665efd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Mid\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#665efd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Range selectors\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b9b9f9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b9b9f9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subdued hover bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2e2b8c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Deep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2e2b8c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Icon hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral & Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#273951\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#273951\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#64748d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#64748d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5edf5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5edf5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Default border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#15be53\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#15be53\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Status, badges\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9b6829\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lemon\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9b6829\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d6d9fc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Soft\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d6d9fc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Purple-tinted border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#362baa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dashed Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#362baa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Drop zones\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:300; line-height:1.03; letter-spacing:-1.4px; color:var(--navy);\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 56px \u002F 300 \u002F 1.03 \u002F -1.4px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);\">Display Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Large -- 48px \u002F 300 \u002F 1.15 \u002F -0.96px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 32px \u002F 300 \u002F 1.10 \u002F -0.64px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 300 \u002F 1.12 \u002F -0.26px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 22px \u002F 300 \u002F 1.10 \u002F -0.22px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);\">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 18px \u002F 300 \u002F 1.40 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);\">Body -- Standard reading text for descriptions and content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 300 \u002F 1.40 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);\">Button Text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button -- 16px \u002F 400 \u002F 1.00 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);\">Link \u002F Navigation\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link -- 14px \u002F 400 \u002F 1.00 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);\">Caption -- Small labels and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 12px \u002F 300 \u002F 1.45 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;\">$1,234,567.89\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tabular Numbers -- 12px \u002F 300 \u002F 1.33 \u002F -0.36px \u002F sohne-var \"tnum\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;\">const stripe = require('stripe')('sk_test_...');\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body -- 12px \u002F 500 \u002F 2.00 \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;\">API VERSION\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Label -- 12px \u002F 500 \u002F uppercase \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Start now\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-info\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Transparent Info\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-neutral\" href=\"#\">Disabled\u003C\u002Fa>\u003Cdiv class=\"button-label\">Neutral Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-success\">Active\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-neutral\">v2024-12\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Neutral Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(83,58,253,0.1); color:var(--purple);\">Payments\u003C\u002Fdiv>\n      \u003Ch3>Online Payments\u003C\u002Fh3>\n      \u003Cp>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(234,34,97,0.1); color:var(--ruby);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Revenue Recognition\u003C\u002Fh3>\n      \u003Cp>Automate your revenue reporting. Card shown with full blue-tinted shadow stack for elevated importance.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(21,190,83,0.15); color:var(--success-text);\">Connect\u003C\u002Fdiv>\n      \u003Ch3>Platform Payments\u003C\u002Fh3>\n      \u003Cp>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-api-key\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Webhook URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.example.com\u002Fwebhook\">\u003Cdiv class=\"form-state-label\">Focus (purple ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-email\">\u003Cdiv class=\"form-state-label\">Error (ruby ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Metadata\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder='{\"key\": \"value\"}'>\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:18px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">18\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Standard cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nav, large cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(23,23,23,0.06) 0px 3px 6px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient soft\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(23,23,23,0.08) 0px 15px 35px 0px;\">\u003Cdiv class=\"elevation-label\">Level 2: Standard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient card\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue-tinted dual layer\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px;\">\u003Cdiv class=\"elevation-label\">Level 4: Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark blue-tinted\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--purple);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Purple ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fstripe.com\u002F\">stripe.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Stripe (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Source+Code+Pro:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  @font-face {\n    font-family: 'sohne-var';\n    src: local('sohne-var'), local('Sohne'), local('SF Pro Display');\n    font-weight: 100 900;\n    font-display: swap;\n  }\n  :root {\n    --purple: #665efd;\n    --purple-hover: #7a73ff;\n    --purple-deep: #533afd;\n    --purple-light: #3d3a7a;\n    --purple-mid: #b9b9f9;\n    --navy: #e8ecf0;\n    --dark-navy: #c8d0da;\n    --brand-dark: #0e0f2e;\n    --white: #0e0f2e;\n    --ruby: #ea2261;\n    --magenta: #f96bee;\n    --magenta-light: rgba(255,215,239,0.1);\n    --success: #15be53;\n    --success-text: #4cdf80;\n    --lemon: #d4a04a;\n    --slate: #8a95a8;\n    --dark-slate: #a0aec0;\n    --border: rgba(255,255,255,0.1);\n    --border-purple: rgba(185,185,249,0.3);\n    --border-soft: rgba(214,217,252,0.15);\n    --shadow-blue: rgba(50,50,93,0.4);\n    --shadow-dark-blue: rgba(3,3,39,0.5);\n    --shadow-black: rgba(0,0,0,0.3);\n    --shadow-ambient: rgba(0,0,0,0.3);\n    --shadow-soft: rgba(0,0,0,0.2);\n    --shadow-card: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;\n    --shadow-ambient-card: rgba(0,0,0,0.3) 0px 15px 35px 0px;\n    --shadow-subtle: rgba(0,0,0,0.2) 0px 3px 6px 0px;\n    --font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;\n    --font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--navy);\n    font-family: var(--font-primary);\n    font-size: 16px; font-weight: 300; line-height: 1.40;\n    font-feature-settings: \"ss01\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(14,15,46,0.90);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border);\n    border-radius: 0 0 6px 6px;\n  }\n  .nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 400; color: var(--slate); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--navy); }\n  .nav-cta {\n    display: inline-block; background: var(--purple); color: #ffffff;\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    text-decoration: none; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .nav-cta:hover { background: var(--purple-hover); }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--purple); color: #ffffff;\n    font-size: 11px; font-weight: 400; padding: 4px 10px; border-radius: 4px;\n    font-feature-settings: \"ss01\" 1;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 300; line-height: 1.15;\n    letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--purple); color: #ffffff;\n    padding: 10px 20px; border-radius: 4px; border: none;\n    font-family: var(--font-primary); font-size: 16px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-primary:hover { background: var(--purple-hover); }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--purple-mid);\n    padding: 10px 20px; border-radius: 4px;\n    border: 1px solid var(--border-purple);\n    font-family: var(--font-primary); font-size: 16px; font-weight: 400;\n    text-decoration: none; cursor: pointer; transition: background 0.15s;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-ghost:hover { background: rgba(102,94,253,0.1); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }\n  .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }\n  .color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }\n  .color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 300; color: var(--slate); margin-top: 8px; }\n  .btn-info {\n    display: inline-block; background: transparent; color: #5ba8d9;\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    border: 1px solid rgba(91,168,217,0.25); text-decoration: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .btn-neutral {\n    display: inline-block; background: transparent; color: rgba(232,236,240,0.3);\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;\n    outline: 1px solid rgba(255,255,255,0.1); border: none; text-decoration: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .badge-success {\n    display: inline-block; background: rgba(21,190,83,0.15); color: #4cdf80;\n    padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;\n    border: 1px solid rgba(21,190,83,0.3);\n    font-feature-settings: \"ss01\" 1;\n  }\n  .badge-neutral {\n    display: inline-block; background: rgba(255,255,255,0.05); color: var(--slate);\n    padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;\n    border: 1px solid rgba(255,255,255,0.1);\n    font-feature-settings: \"ss01\" 1;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: rgba(255,255,255,0.03); border-radius: 6px; padding: 24px;\n    border: 1px solid var(--border);\n    box-shadow: var(--shadow-subtle);\n    transition: box-shadow 0.25s ease;\n  }\n  .card:hover { box-shadow: var(--shadow-card); }\n  .card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }\n  .card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }\n  .card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: rgba(255,255,255,0.05); color: var(--navy);\n    border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;\n    font-feature-settings: \"ss01\" 1;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--purple); }\n  .form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }\n  .form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: rgba(255,255,255,0.05); color: var(--navy);\n    border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;\n    font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;\n    font-feature-settings: \"ss01\" 1;\n  }\n  .form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--purple); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }\n  .radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }\n  .footer a { color: var(--purple-mid); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 32px; letter-spacing: -0.64px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start now\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Stripe\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">Start now\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#533afd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Stripe Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#533afd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary brand, CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#061b31\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Deep Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#061b31\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid rgba(255,255,255,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand & Dark\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1c1e54\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Brand Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1c1e54\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Dark sections\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0d253d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Navy\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0d253d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Darkest neutral\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ea2261\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ruby\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ea2261\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Accent, alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#f96bee\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Magenta\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f96bee\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Gradients, decorative\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd7ef\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Magenta Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd7ef\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tinted surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive Purple Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4434d4\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4434d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA hover state\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#665efd\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Mid\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#665efd\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Range selectors\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b9b9f9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b9b9f9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subdued hover bg\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#2e2b8c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple Deep\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2e2b8c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Icon hover\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral & Status\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#273951\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#273951\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#64748d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#64748d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Body text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e5edf5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e5edf5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Default border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#15be53\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#15be53\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Status, badges\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9b6829\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Lemon\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9b6829\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d6d9fc\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Soft\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d6d9fc\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Purple-tinted border\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#362baa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dashed Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#362baa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Drop zones\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:56px; font-weight:300; line-height:1.03; letter-spacing:-1.4px; color:var(--navy);\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 56px \u002F 300 \u002F 1.03 \u002F -1.4px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);\">Display Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Large -- 48px \u002F 300 \u002F 1.15 \u002F -0.96px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 32px \u002F 300 \u002F 1.10 \u002F -0.64px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 26px \u002F 300 \u002F 1.12 \u002F -0.26px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading -- 22px \u002F 300 \u002F 1.10 \u002F -0.22px \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);\">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large -- 18px \u002F 300 \u002F 1.40 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);\">Body -- Standard reading text for descriptions and content.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F 300 \u002F 1.40 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);\">Button Text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button -- 16px \u002F 400 \u002F 1.00 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);\">Link \u002F Navigation\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Link -- 14px \u002F 400 \u002F 1.00 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);\">Caption -- Small labels and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption -- 12px \u002F 300 \u002F 1.45 \u002F normal \u002F sohne-var \"ss01\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;\">$1,234,567.89\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tabular Numbers -- 12px \u002F 300 \u002F 1.33 \u002F -0.36px \u002F sohne-var \"tnum\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;\">const stripe = require('stripe')('sk_test_...');\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Body -- 12px \u002F 500 \u002F 2.00 \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;\">API VERSION\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Code Label -- 12px \u002F 500 \u002F uppercase \u002F Source Code Pro\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">Start now\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Purple\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-info\" href=\"#\">Learn more\u003C\u002Fa>\u003Cdiv class=\"button-label\">Transparent Info\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-neutral\" href=\"#\">Disabled\u003C\u002Fa>\u003Cdiv class=\"button-label\">Neutral Ghost\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-success\">Active\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Success Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-neutral\">v2024-12\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Neutral Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(83,58,253,0.15); color:var(--purple-mid);\">Payments\u003C\u002Fdiv>\n      \u003Ch3>Online Payments\u003C\u002Fh3>\n      \u003Cp>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(234,34,97,0.15); color:var(--ruby);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Revenue Recognition\u003C\u002Fh3>\n      \u003Cp>Automate your revenue reporting. Card shown with full shadow stack for elevated importance.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(21,190,83,0.1); color:var(--success-text);\">Connect\u003C\u002Fdiv>\n      \u003Ch3>Platform Payments\u003C\u002Fh3>\n      \u003Cp>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-api-key\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Webhook URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.example.com\u002Fwebhook\">\u003Cdiv class=\"form-state-label\">Focus (purple ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email Address\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-email\">\u003Cdiv class=\"form-state-label\">Error (ruby ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Metadata\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder='{\"key\": \"value\"}'>\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">10\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">14\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:18px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">18\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:1px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">1px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Micro\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Standard cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nav, large cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Featured\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.2) 0px 3px 6px 0px;\">\u003Cdiv class=\"elevation-label\">Level 1: Subtle\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient soft\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.3) 0px 15px 35px 0px;\">\u003Cdiv class=\"elevation-label\">Level 2: Standard\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ambient card\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;\">\u003Cdiv class=\"elevation-label\">Level 3: Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dual layer deep\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.5) 0px 14px 21px -14px, rgba(0,0,0,0.3) 0px 8px 17px -8px;\">\u003Cdiv class=\"elevation-label\">Level 4: Deep\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark deep\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px var(--purple);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Purple ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fstripe.com\u002F\">stripe.com\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Stripe Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fstripe\u002FDESIGN.md) extracted from the public [Stripe](https:\u002F\u002Fstripe.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fstripe\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Stripe design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Stripe Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fstripe\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Stripe Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fstripe\u002Fpreview-screenshot.png)\n",{"slug":334,"name":335,"category":90,"designMd":336,"previewHtml":337,"previewDarkHtml":338,"readme":339},"supabase","Supabase","# Design System Inspiration of Supabase\n\n## 1. Visual Theme & Atmosphere\n\nSupabase's website is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep black backgrounds (`#0f0f0f`, `#171717`) with emerald green accents (`#3ecf8e`, `#00c573`) that reference the brand's open-source, PostgreSQL-green identity. The design system feels like it was born in a terminal window and evolved into a sophisticated marketing surface without losing its developer soul.\n\nThe typography is built on \"Circular\" — a geometric sans-serif with rounded terminals that softens the technical edge. At 72px with a 1.00 line-height, the hero text is compressed to its absolute minimum vertical space, creating dense, impactful statements that waste nothing. The monospace companion (Source Code Pro) appears sparingly for uppercase technical labels with 1.2px letter-spacing, creating the \"developer console\" markers that connect the marketing site to the product experience.\n\nWhat makes Supabase distinctive is its sophisticated HSL-based color token system. Rather than flat hex values, Supabase uses HSL with alpha channels for nearly every color (`--colors-crimson4`, `--colors-purple5`, `--colors-slateA12`), enabling a nuanced layering system where colors interact through transparency. This creates depth through translucency — borders at `rgba(46, 46, 46)`, surfaces at `rgba(41, 41, 41, 0.84)`, and accents at partial opacity all blend with the dark background to create a rich, dimensional palette from minimal color ingredients.\n\nThe green accent (`#3ecf8e`) appears selectively — in the Supabase logo, in link colors (`#00c573`), and in border highlights (`rgba(62, 207, 142, 0.3)`) — always as a signal of \"this is Supabase\" rather than as a decorative element. Pill-shaped buttons (9999px radius) for primary CTAs contrast with standard 6px radius for secondary elements, creating a clear visual hierarchy of importance.\n\n**Key Characteristics:**\n- Dark-mode-native: near-black backgrounds (`#0f0f0f`, `#171717`) — never pure black\n- Emerald green brand accent (`#3ecf8e`, `#00c573`) used sparingly as identity marker\n- Circular font — geometric sans-serif with rounded terminals\n- Source Code Pro for uppercase technical labels (1.2px letter-spacing)\n- HSL-based color token system with alpha channels for translucent layering\n- Pill buttons (9999px) for primary CTAs, 6px radius for secondary\n- Neutral gray scale from `#171717` through `#898989` to `#fafafa`\n- Border system using dark grays (`#2e2e2e`, `#363636`, `#393939`)\n- Minimal shadows — depth through border contrast and transparency\n- Radix color primitives (crimson, purple, violet, indigo, yellow, tomato, orange, slate)\n\n## 2. Color Palette & Roles\n\n### Brand\n- **Supabase Green** (`#3ecf8e`): Primary brand color, logo, accent borders\n- **Green Link** (`#00c573`): Interactive green for links and actions\n- **Green Border** (`rgba(62, 207, 142, 0.3)`): Subtle green border accent\n\n### Neutral Scale (Dark Mode)\n- **Near Black** (`#0f0f0f`): Primary button background, deepest surface\n- **Dark** (`#171717`): Page background, primary canvas\n- **Dark Border** (`#242424`): Horizontal rule, section dividers\n- **Border Dark** (`#2e2e2e`): Card borders, tab borders\n- **Mid Border** (`#363636`): Button borders, dividers\n- **Border Light** (`#393939`): Secondary borders\n- **Charcoal** (`#434343`): Tertiary borders, dark accents\n- **Dark Gray** (`#4d4d4d`): Heavy secondary text\n- **Mid Gray** (`#898989`): Muted text, link color\n- **Light Gray** (`#b4b4b4`): Secondary link text\n- **Near White** (`#efefef`): Light border, subtle surface\n- **Off White** (`#fafafa`): Primary text, button text\n\n### Radix Color Tokens (HSL-based)\n- **Slate Scale**: `--colors-slate5` through `--colors-slateA12` — neutral progression\n- **Purple**: `--colors-purple4`, `--colors-purple5`, `--colors-purpleA7` — accent spectrum\n- **Violet**: `--colors-violet10` (`hsl(251, 63.2%, 63.2%)`) — vibrant accent\n- **Crimson**: `--colors-crimson4`, `--colors-crimsonA9` — warm accent \u002F alert\n- **Indigo**: `--colors-indigoA2` — subtle blue wash\n- **Yellow**: `--colors-yellowA7` — attention\u002Fwarning\n- **Tomato**: `--colors-tomatoA4` — error accent\n- **Orange**: `--colors-orange6` — warm accent\n\n### Surface & Overlay\n- **Glass Dark** (`rgba(41, 41, 41, 0.84)`): Translucent dark overlay\n- **Slate Alpha** (`hsla(210, 87.8%, 16.1%, 0.031)`): Ultra-subtle blue wash\n- **Fixed Scale Alpha** (`hsla(200, 90.3%, 93.4%, 0.109)`): Light frost overlay\n\n### Shadows\n- Supabase uses **almost no shadows** in its dark theme. Depth is created through border contrast and surface color differences rather than box-shadows. Focus states use `rgba(0, 0, 0, 0.1) 0px 4px 12px` — minimal, functional.\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Circular`, with fallbacks: `custom-font, Helvetica Neue, Helvetica, Arial`\n- **Monospace**: `Source Code Pro`, with fallbacks: `Office Code Pro, Menlo`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Circular | 72px (4.50rem) | 400 | 1.00 (tight) | normal | Maximum density, zero waste |\n| Section Heading | Circular | 36px (2.25rem) | 400 | 1.25 (tight) | normal | Feature section titles |\n| Card Title | Circular | 24px (1.50rem) | 400 | 1.33 | -0.16px | Slight negative tracking |\n| Sub-heading | Circular | 18px (1.13rem) | 400 | 1.56 | normal | Secondary headings |\n| Body | Circular | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Nav Link | Circular | 14px (0.88rem) | 500 | 1.00–1.43 | normal | Navigation items |\n| Button | Circular | 14px (0.88rem) | 500 | 1.14 (tight) | normal | Button labels |\n| Caption | Circular | 14px (0.88rem) | 400–500 | 1.43 | normal | Metadata, tags |\n| Small | Circular | 12px (0.75rem) | 400 | 1.33 | normal | Fine print, footer links |\n| Code Label | Source Code Pro | 12px (0.75rem) | 400 | 1.33 | 1.2px | `text-transform: uppercase` |\n\n### Principles\n- **Weight restraint**: Nearly all text uses weight 400 (regular\u002Fbook). Weight 500 appears only for navigation links and button labels. There is no bold (700) in the detected system — hierarchy is created through size, not weight.\n- **1.00 hero line-height**: The hero text is compressed to absolute zero leading. This is the defining typographic gesture — text that feels like a terminal command: dense, efficient, no wasted vertical space.\n- **Negative tracking on cards**: Card titles use -0.16px letter-spacing, a subtle tightening that differentiates them from body text without being obvious.\n- **Monospace as ritual**: Source Code Pro in uppercase with 1.2px letter-spacing is the \"developer console\" voice — used sparingly for technical labels that connect to the product experience.\n- **Geometric personality**: Circular's rounded terminals create warmth in what could otherwise be a cold, technical interface. The font is the humanizing element.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Pill (Dark)**\n- Background: `#0f0f0f`\n- Text: `#fafafa`\n- Padding: 8px 32px\n- Radius: 9999px (full pill)\n- Border: `1px solid #fafafa` (white border on dark)\n- Focus shadow: `rgba(0, 0, 0, 0.1) 0px 4px 12px`\n- Use: Primary CTA (\"Start your project\")\n\n**Secondary Pill (Dark, Muted)**\n- Background: `#0f0f0f`\n- Text: `#fafafa`\n- Padding: 8px 32px\n- Radius: 9999px\n- Border: `1px solid #2e2e2e` (dark border)\n- Opacity: 0.8\n- Use: Secondary CTA alongside primary\n\n**Ghost Button**\n- Background: transparent\n- Text: `#fafafa`\n- Padding: 8px\n- Radius: 6px\n- Border: `1px solid transparent`\n- Use: Tertiary actions, icon buttons\n\n### Cards & Containers\n- Background: dark surfaces (`#171717` or slightly lighter)\n- Border: `1px solid #2e2e2e` or `#363636`\n- Radius: 8px–16px\n- No visible shadows — borders define edges\n- Internal padding: 16px–24px\n\n### Tabs\n- Border: `1px solid #2e2e2e`\n- Radius: 9999px (pill tabs)\n- Active: green accent or lighter surface\n- Inactive: dark, muted\n\n### Links\n- **Green**: `#00c573` — Supabase-branded links\n- **Primary Light**: `#fafafa` — standard links on dark\n- **Secondary**: `#b4b4b4` — muted links\n- **Muted**: `#898989` — tertiary links, footer\n\n### Navigation\n- Dark background matching page (`#171717`)\n- Supabase logo with green icon\n- Circular 14px weight 500 for nav links\n- Clean horizontal layout with product dropdown\n- Green \"Start your project\" CTA pill button\n- Sticky header behavior\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 90px, 96px, 128px\n- Notable large jumps: 48px → 90px → 96px → 128px for major section spacing\n\n### Grid & Container\n- Centered content with generous max-width\n- Full-width dark sections with constrained inner content\n- Feature grids: icon-based grids with consistent card sizes\n- Logo grids for \"Trusted by\" sections\n- Footer: multi-column on dark background\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C600px | Single column, stacked layout |\n| Desktop | >600px | Multi-column grids, expanded layout |\n\n*Note: Supabase uses a notably minimal breakpoint system — primarily a single 600px breakpoint, suggesting a mobile-first approach with progressive enhancement.*\n\n### Whitespace Philosophy\n- **Dramatic section spacing**: 90px–128px between major sections creates a cinematic pacing — each section is its own scene in the dark void.\n- **Dense content blocks**: Within sections, spacing is tight (16px–24px), creating concentrated information clusters.\n- **Border-defined space**: Instead of whitespace + shadows for separation, Supabase uses thin borders on dark backgrounds — separation through line, not gap.\n\n### Border Radius Scale\n- Standard (6px): Ghost buttons, small elements\n- Comfortable (8px): Cards, containers\n- Medium (11px–12px): Mid-size panels\n- Large (16px): Feature cards, major containers\n- Pill (9999px): Primary buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, border `#2e2e2e` | Default state, most surfaces |\n| Subtle Border (Level 1) | Border `#363636` or `#393939` | Interactive elements, hover |\n| Focus (Level 2) | `rgba(0, 0, 0, 0.1) 0px 4px 12px` | Focus states only |\n| Green Accent (Level 3) | Border `rgba(62, 207, 142, 0.3)` | Brand-highlighted elements |\n\n**Shadow Philosophy**: Supabase deliberately avoids shadows. In a dark-mode-native design, shadows are nearly invisible and serve no purpose. Instead, depth is communicated through a sophisticated border hierarchy — from `#242424` (barely visible) through `#2e2e2e` (standard) to `#393939` (prominent). The green accent border (`rgba(62, 207, 142, 0.3)`) at 30% opacity is the \"elevated\" state — the brand color itself becomes the depth signal.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use near-black backgrounds (`#0f0f0f`, `#171717`) — depth comes from the gray border hierarchy\n- Apply Supabase green (`#3ecf8e`, `#00c573`) sparingly — it's an identity marker, not a decoration\n- Use Circular at weight 400 for nearly everything — 500 only for buttons and nav\n- Set hero text to 1.00 line-height — the zero-leading is the typographic signature\n- Create depth through border color differences (`#242424` → `#2e2e2e` → `#363636`)\n- Use pill shape (9999px) exclusively for primary CTAs and tabs\n- Employ HSL-based colors with alpha for translucent layering effects\n- Use Source Code Pro uppercase labels for developer-context markers\n\n### Don't\n- Don't add box-shadows — they're invisible on dark backgrounds and break the border-defined depth system\n- Don't use bold (700) text weight — the system uses 400 and 500 only\n- Don't apply green to backgrounds or large surfaces — it's for borders, links, and small accents\n- Don't use warm colors (crimson, orange) as primary design elements — they exist as semantic tokens for states\n- Don't increase hero line-height above 1.00 — the density is intentional\n- Don't use large border radius (16px+) on buttons — pills (9999px) or standard (6px), nothing in between\n- Don't lighten the background above `#171717` for primary surfaces — the darkness is structural\n- Don't forget the translucent borders — `rgba` border colors are the layering mechanism\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C600px | Single column, stacked features, condensed nav |\n| Desktop | >600px | Multi-column grids, full nav, expanded sections |\n\n### Collapsing Strategy\n- Hero: 72px → scales down proportionally\n- Feature grids: multi-column → single column stacked\n- Logo row: horizontal → wrapped grid\n- Navigation: full → hamburger\n- Section spacing: 90–128px → 48–64px\n- Buttons: inline → full-width stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: `#0f0f0f` (button), `#171717` (page)\n- Text: `#fafafa` (primary), `#b4b4b4` (secondary), `#898989` (muted)\n- Brand green: `#3ecf8e` (brand), `#00c573` (links)\n- Borders: `#242424` (subtle), `#2e2e2e` (standard), `#363636` (prominent)\n- Green border: `rgba(62, 207, 142, 0.3)` (accent)\n\n### Example Component Prompts\n- \"Create a hero section on #171717 background. Headline at 72px Circular weight 400, line-height 1.00, #fafafa text. Sub-text at 16px Circular weight 400, line-height 1.50, #b4b4b4. Pill CTA button (#0f0f0f bg, #fafafa text, 9999px radius, 8px 32px padding, 1px solid #fafafa border).\"\n- \"Design a feature card: #171717 background, 1px solid #2e2e2e border, 16px radius. Title at 24px Circular weight 400, letter-spacing -0.16px. Body at 14px weight 400, #898989 text.\"\n- \"Build navigation bar: #171717 background. Circular 14px weight 500 for links, #fafafa text. Supabase logo with green icon left-aligned. Green pill CTA 'Start your project' right-aligned.\"\n- \"Create a technical label: Source Code Pro 12px, uppercase, letter-spacing 1.2px, #898989 text.\"\n- \"Design a framework logo grid: 6-column layout on dark, grayscale logos at 60% opacity, 1px solid #2e2e2e border between sections.\"\n\n### Iteration Guide\n1. Start with #171717 background — everything is dark-mode-native\n2. Green is the brand identity marker — use it for links, logo, and accent borders only\n3. Depth comes from borders (#242424 → #2e2e2e → #363636), not shadows\n4. Weight 400 is the default for everything — 500 only for interactive elements\n5. Hero line-height of 1.00 is the signature typographic move\n6. Pill (9999px) for primary actions, 6px for secondary, 8-16px for cards\n7. HSL with alpha channels creates the sophisticated translucent layering\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Supabase (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand *\u002F\n    --color-green: #3ecf8e;\n    --color-green-link: #00c573;\n    --color-green-border: rgba(62, 207, 142, 0.3);\n    \u002F* Neutral Scale *\u002F\n    --color-near-black: #0f0f0f;\n    --color-dark: #171717;\n    --color-dark-border: #242424;\n    --color-border-dark: #2e2e2e;\n    --color-mid-border: #363636;\n    --color-border-light: #393939;\n    --color-charcoal: #434343;\n    --color-dark-gray: #4d4d4d;\n    --color-mid-gray: #898989;\n    --color-light-gray: #b4b4b4;\n    --color-near-white: #efefef;\n    --color-off-white: #fafafa;\n    \u002F* Surface *\u002F\n    --color-glass-dark: rgba(41, 41, 41, 0.84);\n    \u002F* Radix *\u002F\n    --color-violet: hsl(251, 63.2%, 63.2%);\n    --color-crimson: hsl(348, 60%, 50%);\n    --color-purple: hsl(272, 51%, 54%);\n    --color-indigo: hsl(226, 70%, 55%);\n    --color-yellow: hsl(48, 90%, 55%);\n    --color-tomato: hsl(10, 78%, 54%);\n    --color-orange: hsl(24, 94%, 50%);\n\n    --font-primary: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-mono: 'Source Code Pro', 'Office Code Pro', Menlo, monospace;\n\n    \u002F* Theme tokens *\u002F\n    --bg-page: #171717;\n    --bg-hero: #171717;\n    --bg-card: #171717;\n    --bg-input: #1a1328;\n    --bg-nav: rgba(23, 23, 23, 0.92);\n    --text-primary: #fafafa;\n    --text-secondary: #b4b4b4;\n    --text-muted: #898989;\n    --border-color: #2e2e2e;\n    --border-subtle: #242424;\n    --section-label-color: #3ecf8e;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 400;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--text-primary);\n  }\n  .nav-brand .brand-icon {\n    width: 24px;\n    height: 24px;\n    background: var(--color-green);\n    border-radius: 6px;\n    display: inline-block;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.43;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-green-link); }\n  .nav-cta {\n    background: var(--color-near-black);\n    color: var(--color-off-white);\n    padding: 8px 32px;\n    border: 1px solid var(--color-off-white);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 128px 40px 96px;\n    background: var(--bg-hero);\n  }\n  .hero-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--color-green);\n    margin-bottom: 24px;\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 72px;\n    font-weight: 400;\n    line-height: 1.00;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.56;\n    margin-bottom: 40px;\n    max-width: 560px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n\n  \u002F* BUTTONS *\u002F\n  .btn-primary-pill {\n    background: var(--color-near-black);\n    color: var(--color-off-white);\n    padding: 8px 32px;\n    border: 1px solid var(--color-off-white);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n  .btn-secondary-pill {\n    background: var(--color-near-black);\n    color: var(--color-off-white);\n    padding: 8px 32px;\n    border: 1px solid var(--color-border-dark);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n    opacity: 0.8;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-off-white);\n    padding: 8px 16px;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n  .btn-green-pill {\n    background: var(--color-green);\n    color: #0f0f0f;\n    padding: 8px 32px;\n    border: 1px solid var(--color-green);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1024px;\n    margin: 0 auto;\n    padding: 90px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 36px;\n    font-weight: 400;\n    line-height: 1.25;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1024px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-primary);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block { height: 80px; }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTON ROW *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    border-radius: 16px;\n    padding: 24px;\n    background: var(--bg-card);\n  }\n  .card-standard {\n    border: 1px solid var(--color-border-dark);\n  }\n  .card-prominent {\n    border: 1px solid var(--color-mid-border);\n  }\n  .card-green-accent {\n    border: 1px solid var(--color-green-border);\n  }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.33;\n    letter-spacing: -0.16px;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; font-weight: 400; }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    margin-bottom: 8px;\n    display: block;\n  }\n  .form-input {\n    width: 100%;\n    padding: 10px 14px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.43;\n    color: var(--text-primary);\n    background: var(--bg-input);\n    border: 1px solid var(--color-border-dark);\n    border-radius: 6px;\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--text-muted); }\n  .form-input-focus {\n    border-color: var(--color-green);\n    box-shadow: 0 0 0 1px var(--color-green-border);\n  }\n  .form-input-error {\n    border-color: var(--color-tomato);\n  }\n  .form-error-text {\n    font-size: 12px;\n    color: hsl(10, 78%, 54%);\n    margin-top: 6px;\n  }\n  textarea.form-input {\n    min-height: 80px;\n    resize: vertical;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--color-border-dark);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--color-dark);\n    border: 1px solid var(--color-border-dark);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    background: var(--bg-card);\n  }\n  .elevation-name { font-family: var(--font-primary); font-size: 16px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 40px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">awesome-design-md\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Start your project\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-label\">Design System Preview\u003C\u002Fdiv>\n  \u003Ch1>Design System\u003Cbr>Inspired by Supabase\u003C\u002Fh1>\n  \u003Cp>Dark-mode-native developer platform aesthetic. Emerald green accents on near-black surfaces with border-defined depth.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-pill\">Start your project\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary-pill\">View Documentation\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Brand\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3ecf8e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Supabase Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3ecf8e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary brand, logo, accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00c573;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Green Link\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00c573\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Interactive green for links and actions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(62, 207, 142, 0.3); border: 1px solid rgba(62, 207, 142, 0.3);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Green Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(62,207,142,0.3)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle green border accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutral Scale\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0f0f0f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0f0f0f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary button bg, deepest surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #171717;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, primary canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #242424;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#242424\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Horizontal rules, section dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2e2e2e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2e2e2e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, tab borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #363636;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#363636\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders, dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #393939;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#393939\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #434343;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#434343\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary borders, dark accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4d4d4d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4d4d4d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Heavy secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #898989;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#898989\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Muted text, link color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b4b4b4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b4b4b4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary link text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #efefef;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#efefef\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light border, subtle surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Off White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, button text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Radix Color Tokens\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(251, 63.2%, 63.2%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Violet 10\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(251, 63%, 63%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Vibrant accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(272, 51%, 54%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Purple 5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(272, 51%, 54%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Accent spectrum\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(348, 60%, 50%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Crimson 9\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(348, 60%, 50%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warm accent \u002F alert\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(226, 70%, 55%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Indigo\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(226, 70%, 55%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle blue wash\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(48, 90%, 55%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Yellow 7\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(48, 90%, 55%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Attention \u002F warning\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(10, 78%, 54%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Tomato 4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(10, 78%, 54%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Error accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(24, 94%, 50%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Orange 6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(24, 94%, 50%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Overlay\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(41, 41, 41, 0.84);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(41,41,41,0.84)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Translucent dark overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsla(210, 87.8%, 16.1%, 0.031);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Slate Alpha\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(210,88%,16%,0.03)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Ultra-subtle blue wash\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsla(200, 90.3%, 93.4%, 0.109);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Fixed Scale Alpha\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(200,90%,93%,0.11)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light frost overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 72px; font-weight: 400; line-height: 1.00;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Hero — 72px \u002F weight 400 \u002F line-height 1.00 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 36px; font-weight: 400; line-height: 1.25;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F weight 400 \u002F line-height 1.25 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: -0.16px;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F weight 400 \u002F line-height 1.33 \u002F letter-spacing -0.16px — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 18px; font-weight: 400; line-height: 1.56;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 18px \u002F weight 400 \u002F line-height 1.56 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;\">Body text for paragraphs and general content. Nearly all text uses weight 400 for hierarchy through size alone.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body — 16px \u002F weight 400 \u002F line-height 1.50 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 500; line-height: 1.43;\">Nav Link · Button Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Nav Link \u002F Button — 14px \u002F weight 500 \u002F line-height 1.14–1.43 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-muted);\">Caption and metadata text for tags and descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F weight 400–500 \u002F line-height 1.43 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--text-muted);\">Fine print, footer links, small metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — 12px \u002F weight 400 \u002F line-height 1.33 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-green);\">Code Label · Technical Marker\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Label — 12px \u002F weight 400 \u002F line-height 1.33 \u002F letter-spacing 1.2px \u002F uppercase — Source Code Pro\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-primary-pill\">Start your project\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Primary Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-secondary-pill\">View Documentation\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Secondary Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">Tertiary Action\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost Button\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-green-pill\">Deploy Now\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Green Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Dark Container\u003C\u002Fh3>\n      \u003Cp>Default card with 1px solid #2e2e2e border and 16px radius. Depth defined through border contrast, not shadows. Background matches page at #171717.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-prominent\">\n      \u003Cdiv class=\"card-label\">Prominent Card\u003C\u002Fdiv>\n      \u003Ch3>Mid Border Container\u003C\u002Fh3>\n      \u003Cp>Elevated card using #363636 border for higher visual prominence. The lighter border creates the sense of depth in the dark environment.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-green-accent\">\n      \u003Cdiv class=\"card-label\">Accent Card\u003C\u002Fdiv>\n      \u003Ch3>Green Accent Container\u003C\u002Fh3>\n      \u003Cp>Brand-highlighted card with rgba(62, 207, 142, 0.3) border. The green accent at 30% opacity is the highest elevation signal.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-title\">05 \u002F Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Form Elements\u003C\u002Fh2>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your project name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-focus\" value=\"my-supabase-project\" placeholder=\"Enter your project name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid name!\">\n        \u003Cdiv class=\"form-error-text\">Project name must only contain alphanumeric characters and hyphens.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Database Region\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"us-east-1\" value=\"us-east-1\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project...\">A real-time backend for modern web and mobile applications.\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">06 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">Base unit: 8px. Scale from 1px to 128px with notable large jumps for section spacing.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 20px; height: 20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 28px; height: 28px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 56px; height: 56px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 68px; height: 68px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 100px; height: 100px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 140px; height: 140px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 170px; height: 170px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">90px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 180px; height: 180px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">96px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 200px; height: 200px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">128px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">07 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">From standard 6px for ghost buttons to pill 9999px for primary CTAs. Nothing in between for buttons.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Ghost buttons, small\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards, containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Mid-size panels\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Feature cards, major\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Primary pills, tabs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">08 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">No shadows. Depth is communicated through a sophisticated border hierarchy from barely visible to prominent green accent.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #2e2e2e;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, border #2e2e2e. Default state for most surfaces and containers.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0 — #2e2e2e\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #363636;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Subtle Border\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border #363636 or #393939. Interactive elements, hover states, prominent cards.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — #363636\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #393939; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Focus\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Minimal functional shadow: rgba(0,0,0,0.1) 0px 4px 12px. Focus states only.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2 — Focus shadow\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(62, 207, 142, 0.3);\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Green Accent\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Brand-highlighted elements. The green accent border at 30% opacity is the highest elevation signal.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3 — Green accent border\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 96px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Supabase (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Brand *\u002F\n    --color-green: #3ecf8e;\n    --color-green-link: #00c573;\n    --color-green-border: rgba(62, 207, 142, 0.3);\n    \u002F* Neutral Scale *\u002F\n    --color-near-black: #0f0f0f;\n    --color-dark: #171717;\n    --color-dark-border: #242424;\n    --color-border-dark: #2e2e2e;\n    --color-mid-border: #363636;\n    --color-border-light: #393939;\n    --color-charcoal: #434343;\n    --color-dark-gray: #4d4d4d;\n    --color-mid-gray: #898989;\n    --color-light-gray: #b4b4b4;\n    --color-near-white: #efefef;\n    --color-off-white: #fafafa;\n    \u002F* Surface *\u002F\n    --color-glass-dark: rgba(41, 41, 41, 0.84);\n    \u002F* Radix *\u002F\n    --color-violet: hsl(251, 63.2%, 63.2%);\n    --color-crimson: hsl(348, 60%, 50%);\n    --color-purple: hsl(272, 51%, 54%);\n    --color-indigo: hsl(226, 70%, 55%);\n    --color-yellow: hsl(48, 90%, 55%);\n    --color-tomato: hsl(10, 78%, 54%);\n    --color-orange: hsl(24, 94%, 50%);\n\n    --font-primary: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-mono: 'Source Code Pro', 'Office Code Pro', Menlo, monospace;\n\n    \u002F* Dark mode tokens — deeper background *\u002F\n    --bg-page: #0f0f0f;\n    --bg-hero: #0f0f0f;\n    --bg-card: #141414;\n    --bg-input: #140e1f;\n    --bg-nav: rgba(15, 15, 15, 0.92);\n    --text-primary: #fafafa;\n    --text-secondary: #b4b4b4;\n    --text-muted: #898989;\n    --border-color: #2e2e2e;\n    --border-subtle: #1e1e1e;\n    --section-label-color: #3ecf8e;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-primary);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: rgba(62, 207, 142, 0.12);\n    color: var(--color-green);\n    border: 1px solid var(--color-green-border);\n    border-radius: 9999px;\n    padding: 6px 16px;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 1.2px;\n    text-transform: uppercase;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand {\n    font-family: var(--font-primary);\n    font-size: 18px;\n    font-weight: 400;\n    letter-spacing: -0.3px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    color: var(--text-primary);\n  }\n  .nav-brand .brand-icon {\n    width: 24px;\n    height: 24px;\n    background: var(--color-green);\n    border-radius: 6px;\n    display: inline-block;\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.43;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--color-green-link); }\n  .nav-cta {\n    background: var(--color-green);\n    color: #0f0f0f;\n    padding: 8px 32px;\n    border: 1px solid var(--color-green);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    text-align: center;\n    padding: 128px 40px 96px;\n    background: var(--bg-hero);\n  }\n  .hero-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--color-green);\n    margin-bottom: 24px;\n  }\n  .hero h1 {\n    font-family: var(--font-primary);\n    font-size: 72px;\n    font-weight: 400;\n    line-height: 1.00;\n    letter-spacing: normal;\n    margin-bottom: 24px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.56;\n    margin-bottom: 40px;\n    max-width: 560px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; }\n\n  \u002F* BUTTONS *\u002F\n  .btn-primary-pill {\n    background: var(--color-near-black);\n    color: var(--color-off-white);\n    padding: 8px 32px;\n    border: 1px solid var(--color-off-white);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n  .btn-secondary-pill {\n    background: var(--color-near-black);\n    color: var(--color-off-white);\n    padding: 8px 32px;\n    border: 1px solid var(--color-border-dark);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n    opacity: 0.8;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-off-white);\n    padding: 8px 16px;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n  .btn-green-pill {\n    background: var(--color-green);\n    color: #0f0f0f;\n    padding: 8px 32px;\n    border: 1px solid var(--color-green);\n    border-radius: 9999px;\n    font-size: 14px;\n    font-family: var(--font-primary);\n    font-weight: 500;\n    line-height: 1.14;\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1024px;\n    margin: 0 auto;\n    padding: 90px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    font-weight: 400;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-primary);\n    font-size: 36px;\n    font-weight: 400;\n    line-height: 1.25;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1024px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-primary);\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block { height: 80px; }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTON ROW *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    border-radius: 16px;\n    padding: 24px;\n    background: var(--bg-card);\n  }\n  .card-standard {\n    border: 1px solid var(--color-border-dark);\n  }\n  .card-prominent {\n    border: 1px solid var(--color-mid-border);\n  }\n  .card-green-accent {\n    border: 1px solid var(--color-green-border);\n  }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n  .card h3 {\n    font-family: var(--font-primary);\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 1.33;\n    letter-spacing: -0.16px;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; font-weight: 400; }\n\n  \u002F* FORMS *\u002F\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { margin-bottom: 20px; }\n  .form-label {\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    margin-bottom: 8px;\n    display: block;\n  }\n  .form-input {\n    width: 100%;\n    padding: 10px 14px;\n    font-family: var(--font-primary);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.43;\n    color: var(--text-primary);\n    background: var(--bg-input);\n    border: 1px solid var(--color-border-dark);\n    border-radius: 6px;\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--text-muted); }\n  .form-input-focus {\n    border-color: var(--color-green);\n    box-shadow: 0 0 0 1px var(--color-green-border);\n  }\n  .form-input-error {\n    border-color: var(--color-tomato);\n  }\n  .form-error-text {\n    font-size: 12px;\n    color: hsl(10, 78%, 54%);\n    margin-top: 6px;\n  }\n  textarea.form-input {\n    min-height: 80px;\n    resize: vertical;\n  }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: var(--color-border-dark);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--color-border-dark);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    background: var(--bg-card);\n  }\n  .elevation-name { font-family: var(--font-primary); font-size: 16px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }\n  .elevation-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 40px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n    .dark-badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 12px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">awesome-design-md\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#forms\">Forms\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Start your project\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-label\">Design System Preview\u003C\u002Fdiv>\n  \u003Ch1>Design System\u003Cbr>Inspired by Supabase\u003C\u002Fh1>\n  \u003Cp>Even deeper darkness. The deepest surface (#0f0f0f) as the page canvas, where borders define every edge and green marks the brand.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-pill\">Start your project\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary-pill\">View Documentation\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Brand\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3ecf8e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Supabase Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3ecf8e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary brand, logo, accent borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00c573;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Green Link\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00c573\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Interactive green for links and actions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(62, 207, 142, 0.3); border: 1px solid rgba(62, 207, 142, 0.3);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Green Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(62,207,142,0.3)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle green border accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutral Scale\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #0f0f0f;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0f0f0f\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary button bg, deepest surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #171717;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, primary canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #242424;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#242424\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Horizontal rules, section dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2e2e2e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2e2e2e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, tab borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #363636;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#363636\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button borders, dividers\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #393939;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Border Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#393939\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #434343;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#434343\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary borders, dark accents\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4d4d4d;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4d4d4d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Heavy secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #898989;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#898989\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Muted text, link color\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b4b4b4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Light Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b4b4b4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary link text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #efefef;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Near White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#efefef\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light border, subtle surface\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fafafa;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Off White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, button text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Radix Color Tokens\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(251, 63.2%, 63.2%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Violet 10\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(251, 63%, 63%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Vibrant accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(272, 51%, 54%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Purple 5\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(272, 51%, 54%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Accent spectrum\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(348, 60%, 50%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Crimson 9\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(348, 60%, 50%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warm accent \u002F alert\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(226, 70%, 55%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Indigo\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(226, 70%, 55%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle blue wash\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(48, 90%, 55%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Yellow 7\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(48, 90%, 55%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Attention \u002F warning\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(10, 78%, 54%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Tomato 4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(10, 78%, 54%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Error accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsl(24, 94%, 50%);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Orange 6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsl(24, 94%, 50%)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Overlay\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(41, 41, 41, 0.84);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(41,41,41,0.84)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Translucent dark overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsla(210, 87.8%, 16.1%, 0.031);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Slate Alpha\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(210,88%,16%,0.03)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Ultra-subtle blue wash\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: hsla(200, 90.3%, 93.4%, 0.109);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Fixed Scale Alpha\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">hsla(200,90%,93%,0.11)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Light frost overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 72px; font-weight: 400; line-height: 1.00;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display Hero — 72px \u002F weight 400 \u002F line-height 1.00 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 36px; font-weight: 400; line-height: 1.25;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F weight 400 \u002F line-height 1.25 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: -0.16px;\">Card Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Card Title — 24px \u002F weight 400 \u002F line-height 1.33 \u002F letter-spacing -0.16px — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 18px; font-weight: 400; line-height: 1.56;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading — 18px \u002F weight 400 \u002F line-height 1.56 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.50;\">Body text for paragraphs and general content. Nearly all text uses weight 400 for hierarchy through size alone.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body — 16px \u002F weight 400 \u002F line-height 1.50 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 500; line-height: 1.43;\">Nav Link · Button Label\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Nav Link \u002F Button — 14px \u002F weight 500 \u002F line-height 1.14–1.43 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--text-muted);\">Caption and metadata text for tags and descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F weight 400–500 \u002F line-height 1.43 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-primary); font-size: 12px; font-weight: 400; line-height: 1.33; color: var(--text-muted);\">Fine print, footer links, small metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Small — 12px \u002F weight 400 \u002F line-height 1.33 — Circular (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-green);\">Code Label · Technical Marker\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Label — 12px \u002F weight 400 \u002F line-height 1.33 \u002F letter-spacing 1.2px \u002F uppercase — Source Code Pro\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-primary-pill\">Start your project\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Primary Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-secondary-pill\">View Documentation\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Secondary Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">Tertiary Action\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost Button\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-green-pill\">Deploy Now\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Green Pill\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Border Dark Container\u003C\u002Fh3>\n      \u003Cp>Default card with 1px solid #2e2e2e border and 16px radius. Depth defined through border contrast, not shadows. Background matches page at #0f0f0f.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-prominent\">\n      \u003Cdiv class=\"card-label\">Prominent Card\u003C\u002Fdiv>\n      \u003Ch3>Mid Border Container\u003C\u002Fh3>\n      \u003Cp>Elevated card using #363636 border for higher visual prominence. The lighter border creates the sense of depth in the dark environment.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-green-accent\">\n      \u003Cdiv class=\"card-label\">Accent Card\u003C\u002Fdiv>\n      \u003Ch3>Green Accent Container\u003C\u002Fh3>\n      \u003Cp>Brand-highlighted card with rgba(62, 207, 142, 0.3) border. The green accent at 30% opacity is the highest elevation signal.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-title\">05 \u002F Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Form Elements\u003C\u002Fh2>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your project name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Focus State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-focus\" value=\"my-supabase-project\" placeholder=\"Enter your project name\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Error State\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid name!\">\n        \u003Cdiv class=\"form-error-text\">Project name must only contain alphanumeric characters and hyphens.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Database Region\u003C\u002Flabel>\n        \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"us-east-1\" value=\"us-east-1\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-group\">\n        \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n        \u003Ctextarea class=\"form-input\" placeholder=\"Describe your project...\">A real-time backend for modern web and mobile applications.\u003C\u002Ftextarea>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">06 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">Base unit: 8px. Scale from 1px to 128px with notable large jumps for section spacing.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 20px; height: 20px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 28px; height: 28px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 40px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 56px; height: 56px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 68px; height: 68px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 100px; height: 100px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 120px; height: 120px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 140px; height: 140px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 170px; height: 170px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">90px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 180px; height: 180px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">96px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 200px; height: 200px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">128px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">07 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">From standard 6px for ghost buttons to pill 9999px for primary CTAs. Nothing in between for buttons.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Ghost buttons, small\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Cards, containers\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Mid-size panels\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 16px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Feature cards, major\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Primary pills, tabs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">08 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-muted); margin-bottom: 32px;\">No shadows. Depth is communicated through a sophisticated border hierarchy from barely visible to prominent green accent.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #2e2e2e;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, border #2e2e2e. Default state for most surfaces and containers.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0 — #2e2e2e\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #363636;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Subtle Border\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Border #363636 or #393939. Interactive elements, hover states, prominent cards.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1 — #363636\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid #393939; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px;\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Focus\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Minimal functional shadow: rgba(0,0,0,0.1) 0px 4px 12px. Focus states only.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2 — Focus shadow\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid rgba(62, 207, 142, 0.3);\">\n      \u003Cdiv>\n        \u003Cdiv class=\"elevation-name\">Green Accent\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Brand-highlighted elements. The green accent border at 30% opacity is the highest elevation signal.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3 — Green accent border\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 96px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Supabase Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsupabase\u002FDESIGN.md) extracted from the public [Supabase](https:\u002F\u002Fsupabase.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsupabase\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Supabase design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Supabase Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsupabase\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Supabase Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsupabase\u002Fpreview-screenshot.png)\n",{"slug":341,"name":342,"category":90,"designMd":343,"previewHtml":344,"previewDarkHtml":345,"readme":346},"superhuman","Superhuman","# Design System Inspiration of Superhuman\n\n## 1. Visual Theme & Atmosphere\n\nSuperhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic purple gradient, a deep twilight wash of `#1b1938` that evokes the moment just before dawn, overlaid with confident white typography. Below this dramatic entrance, the rest of the site is almost entirely white canvas with dark charcoal text, creating a stark but refined reading experience.\n\nThe typography is the true signature: Super Sans VF, a custom variable font with unconventional weight stops (460, 540, 600, 700) that sit between traditional font weight categories. Weight 460 — slightly heavier than regular but lighter than medium — is the workhorse, creating text that feels more confident than typical 400-weight but never aggressive. The tight line-heights (0.96 on display text) compress headlines into dense, powerful blocks, while generous 1.50 line-height on body text provides airy readability. This tension between compressed power and breathing room defines the Superhuman typographic voice.\n\nThe design philosophy is maximum confidence through minimum decoration. Warm cream buttons (`#e9e5dd`) instead of bright CTAs, a near-absence of borders and shadows, and lavender purple (`#cbb7fb`) as the sole accent color. It's a productivity tool that markets itself like a luxury brand — every pixel earns its place, nothing is merely decorative. The brand naming convention extends to colors: the primary purple is called \"Mysteria,\" straddling blue and purple with deliberate ambiguity.\n\n**Key Characteristics:**\n- Deep purple gradient hero (`#1b1938`) contrasting against a predominantly white content body\n- Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) — sits between conventional weight categories\n- Ultra-tight display line-height (0.96) creating compressed, powerful headlines\n- Warm Cream (`#e9e5dd`) buttons instead of bright\u002Fsaturated CTAs — understated luxury\n- Lavender Purple (`#cbb7fb`) as the singular accent color — a soft, approachable purple\n- Minimal border-radius scale: only 8px and 16px — no micro-rounding, no pill shapes\n- Product screenshots dominate the content — the UI sells itself with minimal surrounding decoration\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Mysteria Purple** (`#1b1938`): Hero gradient background, deep purple that straddles blue-purple — the darkest expression of the brand\n- **Lavender Glow** (`#cbb7fb`): Primary accent and highlight color — soft purple used for emphasis, decorative elements, and interactive highlights\n- **Charcoal Ink** (`#292827`): Primary text and heading color on light surfaces — warm near-black with faint brown undertone\n\n### Secondary & Accent\n- **Amethyst Link** (`#714cb6`): Underlined link text — mid-range purple that connects to the brand palette while signaling interactivity\n- **Translucent White** (`color(srgb 1 1 1 \u002F 0.95)`): Hero overlay text — near-white at 95% opacity for depth layering on dark surfaces\n- **Misted White** (`color(srgb 1 1 1 \u002F 0.8)`): Secondary text on dark surfaces — 80% opacity white for hierarchy on the hero gradient\n\n### Surface & Background\n- **Pure White** (`#ffffff`): Primary page background — the dominant canvas color for all content sections\n- **Warm Cream** (`#e9e5dd`): Button background — a warm, neutral cream that avoids the coldness of pure gray\n- **Parchment Border** (`#dcd7d3`): Card and divider borders — warm light gray with slight pink undertone\n\n### Neutrals & Text\n- **Charcoal Ink** (`#292827`): Primary heading and body text on white surfaces\n- **Amethyst Link** (`#714cb6`): In-content links with underline decoration\n- **Translucent White 95%** (`color(srgb 1 1 1 \u002F 0.95)`): Primary text on dark\u002Fpurple surfaces\n- **Translucent White 80%** (`color(srgb 1 1 1 \u002F 0.8)`): Secondary text on dark\u002Fpurple surfaces\n\n### Semantic & Accent\n- Superhuman operates with extreme color restraint — Lavender Glow (`#cbb7fb`) is the only true accent\n- Interactive states are communicated through opacity shifts and underline decorations rather than color changes\n- The warm cream button palette avoids any saturated semantic colors (no red errors, green success visible on marketing)\n\n### Gradient System\n- **Hero Gradient**: Deep purple gradient starting from `#1b1938`, transitioning through purple-to-twilight tones across the hero section — the most dramatic visual element on the entire site\n- **Content Transition**: The gradient dissolves into the white content area, creating a cinematic curtain-lift effect as the user scrolls\n- No other gradients on the marketing site — the hero gradient is a singular dramatic gesture\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: `Super Sans VF` — custom variable font with non-standard weight axis. Fallbacks: `system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue`\n- **Product UI** (referenced in brand): `Messina Sans` \u002F `Messina Serif` \u002F `Messina Mono` from Luzi Type — used in the product itself for sans-serif-to-serif transitions\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Super Sans VF | 64px | 540 | 0.96 | 0px | Maximum compression, powerful block headlines |\n| Section Display | Super Sans VF | 48px | 460 | 0.96 | -1.32px | Lighter weight for section introductions |\n| Section Heading | Super Sans VF | 48px | 460 | 0.96 | 0px | Alternate section heading without tracking |\n| Feature Title | Super Sans VF | 28px | 540 | 1.14 | -0.63px | Feature block headlines, tighter |\n| Sub-heading Large | Super Sans VF | 26px | 460 | 1.30 | 0px | Content sub-sections |\n| Card Heading | Super Sans VF | 22px | 460 | 0.76 | -0.315px | Card title with extreme compression |\n| Body Heading | Super Sans VF | 20px | 460 | 1.20 | 0px | Bold content intros |\n| Body Heading Alt | Super Sans VF | 20px | 460 | 1.10 | -0.55px | Tighter variant for emphasis |\n| Body Heading Relaxed | Super Sans VF | 20px | 460 | 1.25 | -0.4px | More breathing room variant |\n| Emphasis Body | Super Sans VF | 18px | 540 | 1.50 | -0.135px | Medium-weight body for callouts |\n| Body | Super Sans VF | 16px | 460 | 1.50 | 0px | Standard reading text — generous line-height |\n| Button \u002F UI Bold | Super Sans VF | 16px | 700 | 1.00 | 0px | Bold UI elements |\n| Button \u002F UI Semi | Super Sans VF | 16px | 600 | 1.00 | 0px | Semi-bold navigation and labels |\n| Nav Link | Super Sans VF | 16px | 460 | 1.20 | 0px | Navigation items |\n| Caption | Super Sans VF | 14px | 500 | 1.20 | -0.315px | Small labels, metadata |\n| Caption Semi | Super Sans VF | 14px | 600 | 1.29 | 0px | Emphasized small text |\n| Caption Body | Super Sans VF | 14px | 460 | 1.50 | 0px | Small body text |\n| Micro Label | Super Sans VF | 12px | 700 | 1.50 | 0px | Smallest text — badges, tags |\n\n### Principles\n- **Non-standard weight axis**: Weights 460 and 540 are deliberately between conventional Regular (400) and Medium (500), creating a typographic texture that feels subtly \"off\" in a confident way — slightly heavier than expected, never quite bold\n- **Extreme display compression**: Display headlines at 0.96 line-height collapse lines nearly on top of each other, creating dense typographic blocks that feel architectural\n- **Body generosity**: In contrast, body text at 1.50 line-height is extremely spacious, ensuring comfortable reading after the dense headline impact\n- **Selective negative tracking**: Letter-spacing is applied surgically — -1.32px on 48px headings, -0.63px on 28px features, but 0px on body text. The larger the text, the tighter the tracking\n- **Variable font efficiency**: A single font file serves all weight variations (460–700), enabling smooth weight transitions and micro-adjustments\n\n## 4. Component Stylings\n\n### Buttons\n- **Warm Cream Primary**: `#e9e5dd` background, Charcoal Ink (`#292827`) text, subtle rounded corners (8px radius), no visible border. The signature CTA — warm, muted, luxurious rather than aggressive\n- **Dark Primary** (on light sections): `#292827` background with white text, 8px radius — inverse of the warm cream for contrast sections\n- **Ghost \u002F Text Link**: No background, underline decoration, Amethyst Link (`#714cb6`) or Charcoal Ink color depending on context\n- **Hero CTA**: Warm Cream on the dark purple gradient — the cream color pops dramatically against `#1b1938`\n- **Hover**: Subtle opacity or brightness shift — no dramatic color transformations\n\n### Cards & Containers\n- **Content Card**: White background, Parchment Border (`#dcd7d3`) 1px border, 16px border-radius — clean and minimal\n- **Dark Surface Card**: `#292827` border on dark sections, maintaining warm-neutral tone\n- **Hero Surface**: Semi-transparent white border (`rgba(255, 255, 255, 0.2)`) on purple gradient — ghostly containment\n- **Product Screenshot Cards**: Large product UI images with clean edges, minimal framing — the product itself is the visual\n- **Hover**: Minimal state changes — consistency and calm over flashy interactions\n\n### Inputs & Forms\n- Minimal form presence on the marketing site — Superhuman funnels users directly to signup\n- Dark-bordered inputs with Charcoal Ink borders and warm-toned placeholder text\n- Focus: Border emphasis increase, likely shifting from Parchment Border to Charcoal Ink\n\n### Navigation\n- **Top nav**: Clean white background on content sections, transparent on hero gradient\n- **Nav links**: Super Sans VF at 16px, weight 460\u002F600 for hierarchy\n- **CTA button**: Warm Cream (`#e9e5dd`) pill in the nav — subtle, not attention-grabbing\n- **Sticky behavior**: Nav remains fixed on scroll with background transition\n- **Mobile**: Collapses to hamburger menu with simplified layout\n\n### Image Treatment\n- **Product screenshots**: Large, dominant product UI images showing the email interface — the product is the hero\n- **Lifestyle photography**: A single dramatic image (silhouette against purple\u002Fred gradient) in the hero area — cinematic and editorial\n- **Full-width presentation**: Screenshots span full container width with subtle shadow or no border\n- **Aspect ratios**: Wide landscape ratios (roughly 16:9) for product screenshots\n- **Color integration**: Screenshots are carefully color-graded to harmonize with the purple-to-white page flow\n\n### Testimonial \u002F Social Proof\n- \"Your Superhuman suite\" section with product feature grid\n- Feature descriptions paired with product screenshots — proof through demonstration rather than quotes\n- Clean grid layout with consistent card sizing\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 56px\n- **Section padding**: 48px–80px vertical between major sections\n- **Card padding**: 16px–32px internal spacing\n- **Component gaps**: 8px–16px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px content container, centered\n- **Column patterns**: Full-width hero, centered single-column for key messaging, 2-3 column grid for feature cards\n- **Feature grid**: Even column distribution for \"Your Superhuman suite\" product showcase\n\n### Whitespace Philosophy\n- **Confident emptiness**: Generous whitespace between sections signals premium positioning — every element has room to breathe\n- **Product as content**: Large product screenshots fill space that lesser sites would fill with marketing copy\n- **Progressive density**: The hero is spacious and cinematic, content sections become denser with feature grids, then opens up again for CTAs\n\n### Border Radius Scale\n- **8px**: Buttons, inline elements (`span`, `button`, `div`) — the universal small radius\n- **16px**: Cards, links, larger containers (`a`, card elements) — the universal large radius\n- Only two radii in the entire system — radical simplicity. No micro-rounding (2px), no pill shapes (50px+)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, white background | Primary page canvas, most content surfaces |\n| Level 1 (Border) | `1px solid #dcd7d3` (Parchment Border) | Card containment, section dividers |\n| Level 2 (Dark Border) | `1px solid #292827` | Header elements, dark section separators |\n| Level 3 (Glow) | Subtle shadow (from 6 shadow definitions detected) | Product screenshot containers, elevated cards |\n| Level 4 (Hero Depth) | `rgba(255, 255, 255, 0.2)` transparent border | Elements on the dark purple gradient hero |\n\n### Shadow Philosophy\nSuperhuman's elevation system is remarkably restrained on the marketing site. Depth is primarily communicated through:\n- **Border containment**: Warm-toned borders (`#dcd7d3`) at 1px create gentle separation\n- **Color contrast**: The hero gradient creates massive depth through color shift rather than shadows\n- **Product screenshots**: Screenshots themselves create depth by showing a layered UI within the flat page\n- **Opacity layering**: Semi-transparent whites on the hero gradient create atmospheric depth layers\n\n### Decorative Depth\n- **Hero gradient**: The `#1b1938` → white gradient transition is the primary depth device — a cinematic curtain effect\n- **Lavender accents**: `#cbb7fb` Lavender Glow elements float above the dark gradient, creating a stellar\u002Fatmospheric effect\n- **No glassmorphism**: Despite the translucent borders, there are no blur\u002Ffrosted-glass effects\n- **Photography depth**: The hero silhouette image creates natural atmospheric depth without artificial CSS\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Super Sans VF at weight 460 as the default — it's slightly heavier than regular, which is the brand's typographic signature\n- Keep display headlines at 0.96 line-height — the compression is intentional and powerful\n- Use Warm Cream (`#e9e5dd`) for primary buttons — not white, not gray, specifically warm cream\n- Limit border-radius to 8px (small) and 16px (large) — the binary radius system is deliberate\n- Apply negative letter-spacing on headlines only (-0.63px to -1.32px) — body text stays at 0px\n- Use Lavender Glow (`#cbb7fb`) as the only accent color — it's the sole color departure from the neutral palette\n- Let product screenshots be the primary visual content — the UI sells itself\n- Maintain the dramatic hero gradient as a singular gesture — the rest of the page is white\n\n### Don't\n- Use conventional font weights (400, 500, 600) — Superhuman's 460 and 540 are deliberately between standard stops\n- Add bright or saturated CTA colors (blue, green, red) — buttons are intentionally muted in Warm Cream or Charcoal\n- Introduce additional accent colors beyond Lavender Glow — the palette is deliberately restrained to one accent\n- Apply shadows generously — depth comes from borders, color contrast, and photography, not box-shadows\n- Use tight line-height on body text — display is compressed (0.96) but body is generous (1.50)\n- Add decorative elements, icons, or illustrations — Superhuman relies on product UI and minimal typography\n- Create pill-shaped buttons — the system uses 8px radius, not rounded pills\n- Use pure black (`#000000`) for text — Charcoal Ink (`#292827`) is warmer and softer\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single column, hero text reduces to ~36px, stacked feature cards, hamburger nav |\n| Tablet | 768px–1024px | 2-column feature grid begins, hero text ~48px, nav partially visible |\n| Desktop | 1024px–1440px | Full layout, 64px hero display, multi-column feature grid, full nav |\n| Large Desktop | >1440px | Max-width container centered, generous side margins |\n\n### Touch Targets\n- Buttons: 8px radius with comfortable padding — meets touch target guidelines\n- Nav links: 16px text with adequate surrounding padding\n- Mobile CTAs: Full-width Warm Cream buttons for easy thumb reach\n- Links: Underline decoration provides clear tap affordance\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger menu on mobile\n- **Hero text**: 64px display → 48px → ~36px across breakpoints\n- **Feature grid**: Multi-column product showcase → 2-column → single stacked column\n- **Product screenshots**: Scale within containers, maintaining landscape ratios\n- **Section spacing**: Reduces proportionally — generous desktop margins compress on mobile\n\n### Image Behavior\n- Product screenshots scale responsively while maintaining aspect ratios\n- Hero silhouette image crops or scales — maintains dramatic composition\n- No art direction changes — same compositions across all breakpoints\n- Lazy loading likely on below-fold product screenshots\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Hero Background: Mysteria Purple (`#1b1938`)\n- Primary Text (light bg): Charcoal Ink (`#292827`)\n- Primary Text (dark bg): Translucent White (`color(srgb 1 1 1 \u002F 0.95)` — use `rgba(255,255,255,0.95)`)\n- Accent: Lavender Glow (`#cbb7fb`)\n- Button Background: Warm Cream (`#e9e5dd`)\n- Border: Parchment Border (`#dcd7d3`)\n- Link: Amethyst Link (`#714cb6`)\n- Page Background: Pure White (`#ffffff`)\n\n### Example Component Prompts\n- \"Create a hero section with deep purple gradient background (#1b1938), 64px Super Sans heading at weight 540, line-height 0.96, white text at 95% opacity, and a warm cream button (#e9e5dd, 8px radius, #292827 text)\"\n- \"Design a feature card with white background, 1px #dcd7d3 border, 16px radius, 20px Super Sans heading at weight 460, and 16px body text at weight 460 with 1.50 line-height in #292827\"\n- \"Build a navigation bar with white background, Super Sans links at 16px weight 460, a warm cream CTA button (#e9e5dd, 8px radius), sticky positioning\"\n- \"Create a product showcase section with centered 48px heading (weight 460, -1.32px letter-spacing, #292827), a large product screenshot below, on white background\"\n- \"Design an accent badge using Lavender Glow (#cbb7fb) background, 8px radius, 12px bold text (weight 700), for category labels\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify font weight is 460 (not 400 or 500) for body and 540 for display — the non-standard weights are essential\n2. Check that display line-height is 0.96 — if headlines look too spaced, they're wrong\n3. Ensure buttons use Warm Cream (#e9e5dd) not pure white or gray — the warmth is subtle but critical\n4. Confirm the only accent color is Lavender Glow (#cbb7fb) — no other hues should appear\n5. The overall tone should feel like a luxury product presentation — minimal, confident, with one dramatic color gesture in the hero\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Superhuman\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --mysteria-purple: #1b1938;\n    --lavender-glow: #cbb7fb;\n    --charcoal-ink: #292827;\n    --amethyst-link: #714cb6;\n    --translucent-white-95: rgba(255,255,255,0.95);\n    --translucent-white-80: rgba(255,255,255,0.8);\n    --pure-white: #ffffff;\n    --warm-cream: #e9e5dd;\n    --parchment-border: #dcd7d3;\n    --font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-family);\n    background: var(--pure-white);\n    color: var(--charcoal-ink);\n    font-weight: 460;\n    font-size: 16px;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: rgba(27, 25, 56, 0.95);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n  }\n  .nav-brand {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--translucent-white-95);\n    text-decoration: none;\n    letter-spacing: -0.2px;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 32px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 14px;\n    font-weight: 460;\n    color: var(--translucent-white-80);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--translucent-white-95); }\n  .nav-cta {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 8px 20px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: linear-gradient(180deg, var(--mysteria-purple) 0%, #2a1f5e 40%, #4a2d7a 70%, var(--lavender-glow) 100%);\n    padding: 120px 40px 140px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 120px;\n    background: linear-gradient(to bottom, transparent, var(--pure-white));\n  }\n  .hero h1 {\n    font-size: 64px;\n    font-weight: 540;\n    line-height: 0.96;\n    letter-spacing: 0px;\n    color: var(--translucent-white-95);\n    max-width: 800px;\n    margin: 0 auto 24px;\n  }\n  .hero .subtitle {\n    font-size: 20px;\n    font-weight: 460;\n    line-height: 1.25;\n    color: var(--translucent-white-80);\n    max-width: 560px;\n    margin: 0 auto 40px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .btn-primary {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-primary:hover { opacity: 0.9; }\n  .btn-secondary {\n    background: transparent;\n    color: var(--translucent-white-95);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 460;\n    text-decoration: none;\n    border: 1px solid rgba(255,255,255,0.2);\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-secondary:hover { background: rgba(255,255,255,0.05); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-size: 48px;\n    font-weight: 460;\n    line-height: 0.96;\n    letter-spacing: -1.32px;\n    color: var(--charcoal-ink);\n    margin-bottom: 12px;\n  }\n  .section-subtitle {\n    font-size: 18px;\n    font-weight: 460;\n    line-height: 1.50;\n    color: var(--charcoal-ink);\n    opacity: 0.6;\n    margin-bottom: 48px;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-category { margin-bottom: 40px; }\n  .color-category h3 {\n    font-size: 20px;\n    font-weight: 540;\n    line-height: 1.14;\n    margin-bottom: 20px;\n    color: var(--charcoal-ink);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 20px;\n  }\n  .color-swatch {\n    border-radius: 16px;\n    overflow: hidden;\n    border: 1px solid var(--parchment-border);\n  }\n  .color-swatch .swatch-color {\n    height: 100px;\n    width: 100%;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px 16px;\n    background: var(--pure-white);\n  }\n  .color-swatch .swatch-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--charcoal-ink);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.5;\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.6;\n    line-height: 1.4;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 24px 0;\n    border-bottom: 1px solid var(--parchment-border);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text {\n    color: var(--charcoal-ink);\n    margin-bottom: 8px;\n  }\n  .type-sample .type-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--amethyst-link);\n    font-family: monospace;\n    line-height: 1.4;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n  .button-item .btn-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.5;\n    font-family: monospace;\n  }\n  .btn-dark {\n    background: var(--charcoal-ink);\n    color: var(--pure-white);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    background: transparent;\n    color: var(--amethyst-link);\n    padding: 14px 0;\n    border: none;\n    font-size: 16px;\n    font-weight: 460;\n    text-decoration: underline;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-ghost:hover { opacity: 0.7; }\n  .btn-hero-cream {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    border: none;\n    cursor: pointer;\n    display: inline-block;\n  }\n  .btn-outline-hero {\n    background: transparent;\n    color: var(--charcoal-ink);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 460;\n    border: 1px solid var(--parchment-border);\n    cursor: pointer;\n  }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    border-radius: 16px;\n    padding: 32px;\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .card-bordered {\n    background: var(--pure-white);\n    border: 1px solid var(--parchment-border);\n  }\n  .card-dark {\n    background: var(--charcoal-ink);\n    border: 1px solid #292827;\n    color: var(--translucent-white-95);\n  }\n  .card-dark .card-desc { color: var(--translucent-white-80); }\n  .card-hero-surface {\n    background: var(--mysteria-purple);\n    border: 1px solid rgba(255,255,255,0.2);\n    color: var(--translucent-white-95);\n  }\n  .card-hero-surface .card-desc { color: var(--translucent-white-80); }\n  .card-hover:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n  }\n  .card h4 {\n    font-size: 22px;\n    font-weight: 460;\n    line-height: 0.76;\n    letter-spacing: -0.315px;\n    margin-bottom: 16px;\n  }\n  .card .card-desc {\n    font-size: 16px;\n    font-weight: 460;\n    line-height: 1.50;\n    opacity: 0.7;\n  }\n  .card .card-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--amethyst-link);\n    font-family: monospace;\n    margin-top: 16px;\n    opacity: 0.8;\n  }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 8px; }\n  .form-group label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--charcoal-ink);\n  }\n  .form-group input,\n  .form-group textarea {\n    font-family: var(--font-family);\n    font-size: 16px;\n    font-weight: 460;\n    padding: 12px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--parchment-border);\n    background: var(--pure-white);\n    color: var(--charcoal-ink);\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-group input:focus,\n  .form-group textarea:focus {\n    border-color: var(--charcoal-ink);\n  }\n  .form-group input.error {\n    border-color: #c0392b;\n  }\n  .form-group textarea { resize: vertical; min-height: 100px; }\n  .form-hint {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.5;\n  }\n  .form-error-text {\n    font-size: 12px;\n    font-weight: 460;\n    color: #c0392b;\n  }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: flex-end;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--lavender-glow);\n    border-radius: 4px;\n    height: 48px;\n  }\n  .spacing-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--charcoal-ink);\n    font-family: monospace;\n    opacity: 0.6;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 32px;\n    align-items: center;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n  }\n  .radius-box {\n    width: 100px;\n    height: 100px;\n    background: var(--warm-cream);\n    border: 1px solid var(--parchment-border);\n  }\n  .radius-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--charcoal-ink);\n    font-family: monospace;\n  }\n  .radius-context {\n    font-size: 11px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.5;\n    text-align: center;\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-section { background: #f5f4f2; border-radius: 16px; padding: 48px; }\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--pure-white);\n    border-radius: 16px;\n    padding: 32px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-card h4 {\n    font-size: 16px;\n    font-weight: 540;\n    color: var(--charcoal-ink);\n    margin-bottom: 8px;\n  }\n  .elevation-card p {\n    font-size: 13px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.6;\n    line-height: 1.4;\n  }\n  .elev-flat { box-shadow: none; border: none; }\n  .elev-border { box-shadow: none; border: 1px solid var(--parchment-border); }\n  .elev-dark-border { box-shadow: none; border: 1px solid var(--charcoal-ink); }\n  .elev-glow { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: none; }\n  .elev-hero {\n    background: var(--mysteria-purple);\n    color: var(--translucent-white-95);\n    border: 1px solid rgba(255,255,255,0.2);\n  }\n  .elev-hero h4 { color: var(--translucent-white-95); }\n  .elev-hero p { color: var(--translucent-white-80); }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    text-align: center;\n    padding: 48px 40px;\n    border-top: 1px solid var(--parchment-border);\n    font-size: 14px;\n    font-weight: 460;\n    color: var(--charcoal-ink);\n    opacity: 0.5;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 80px 20px 100px; }\n    .hero h1 { font-size: 36px; }\n    .hero .subtitle { font-size: 16px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 32px; letter-spacing: -0.8px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 24px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Superhuman\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from Superhuman's website, rendered as a living style guide.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View DESIGN.md\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Every color token from the Superhuman design system with semantic naming and roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#1b1938;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Mysteria Purple\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#1b1938\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Hero gradient background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#cbb7fb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Lavender Glow\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#cbb7fb\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary accent and highlight\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#292827;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Charcoal Ink\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#292827\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#714cb6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Amethyst Link\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#714cb6\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Underlined link text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:rgba(255,255,255,0.95); border: 1px solid #ddd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Translucent White 95%\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.95)\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Hero text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:rgba(255,255,255,0.8); border: 1px solid #ddd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Misted White 80%\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.8)\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Secondary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#ffffff; border: 1px solid #eee;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#e9e5dd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Warm Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#e9e5dd\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Button background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#dcd7d3;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Parchment Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#dcd7d3\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Card and divider borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Super Sans VF with non-standard weight stops (460, 540, 600, 700).\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:64px; font-weight:540; line-height:0.96;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Display Hero — 64px \u002F 540 \u002F 0.96 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:48px; font-weight:460; line-height:0.96; letter-spacing:-1.32px;\">Section Display\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Display — 48px \u002F 460 \u002F 0.96 \u002F -1.32px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:48px; font-weight:460; line-height:0.96;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Heading — 48px \u002F 460 \u002F 0.96 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:28px; font-weight:540; line-height:1.14; letter-spacing:-0.63px;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Feature Title — 28px \u002F 540 \u002F 1.14 \u002F -0.63px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:26px; font-weight:460; line-height:1.30;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading Large — 26px \u002F 460 \u002F 1.30 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:22px; font-weight:460; line-height:0.76; letter-spacing:-0.315px;\">Card Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Card Heading — 22px \u002F 460 \u002F 0.76 \u002F -0.315px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:460; line-height:1.20;\">Body Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Heading — 20px \u002F 460 \u002F 1.20 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:460; line-height:1.10; letter-spacing:-0.55px;\">Body Heading Alt\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Heading Alt — 20px \u002F 460 \u002F 1.10 \u002F -0.55px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:18px; font-weight:540; line-height:1.50; letter-spacing:-0.135px;\">Emphasis Body — Medium weight for callouts and highlights\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Emphasis Body — 18px \u002F 540 \u002F 1.50 \u002F -0.135px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:460; line-height:1.50;\">Body — Standard reading text with generous line-height for comfortable reading across long content blocks.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 460 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:700; line-height:1.00;\">Button \u002F UI Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button \u002F UI Bold — 16px \u002F 700 \u002F 1.00 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:600; line-height:1.00;\">Button \u002F UI Semi\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button \u002F UI Semi — 16px \u002F 600 \u002F 1.00 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:500; line-height:1.20; letter-spacing:-0.315px;\">Caption — Small labels and metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 500 \u002F 1.20 \u002F -0.315px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:600; line-height:1.29;\">Caption Semi — Emphasized small text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption Semi — 14px \u002F 600 \u002F 1.29 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:12px; font-weight:700; line-height:1.50;\">MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Label — 12px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Restrained CTAs using Warm Cream and Charcoal Ink.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-hero-cream\">Warm Cream Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#e9e5dd bg \u002F #292827 text \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-dark\">Dark Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#292827 bg \u002F #fff text \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-outline-hero\">Outline\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">transparent \u002F #dcd7d3 border \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-ghost\">Ghost \u002F Text Link\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#714cb6 \u002F underline \u002F no bg\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:40px; background:var(--mysteria-purple); border-radius:16px; padding:40px;\">\n    \u003Cp style=\"font-size:14px; font-weight:600; color:var(--translucent-white-80); margin-bottom:16px; font-family:monospace;\">On dark hero surface:\u003C\u002Fp>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cdiv class=\"button-item\">\n        \u003Cbutton class=\"btn-primary\">Hero CTA\u003C\u002Fbutton>\n        \u003Cspan class=\"btn-label\" style=\"color:var(--translucent-white-80);\">#e9e5dd bg on #1b1938\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"button-item\">\n        \u003Cbutton class=\"btn-secondary\">Secondary Hero\u003C\u002Fbutton>\n        \u003Cspan class=\"btn-label\" style=\"color:var(--translucent-white-80);\">transparent \u002F white border\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Clean containment using borders and minimal shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered card-hover\">\n      \u003Ch4>Content Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">White background with Parchment Border, 16px radius. Hover to see lift effect.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">border: 1px solid #dcd7d3 \u002F radius: 16px\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark\">\n      \u003Ch4>Dark Surface Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Charcoal Ink background with warm-neutral tone for dark sections of the page.\u003C\u002Fp>\n      \u003Cp class=\"card-label\" style=\"color:var(--lavender-glow);\">bg: #292827 \u002F border: 1px solid #292827\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-hero-surface\">\n      \u003Ch4>Hero Surface Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Deep purple background with semi-transparent white border for elements on the hero gradient.\u003C\u002Fp>\n      \u003Cp class=\"card-label\" style=\"color:var(--lavender-glow);\">bg: #1b1938 \u002F border: rgba(255,255,255,0.2)\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Minimal form presence with warm-toned borders and clean focus states.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Default Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Enter your email\">\n      \u003Cspan class=\"form-hint\">border: 1px solid #dcd7d3 \u002F radius: 8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Focus State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Focused input\" style=\"border-color:#292827;\">\n      \u003Cspan class=\"form-hint\">focus: border-color shifts to #292827\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"error\" placeholder=\"Invalid input\" value=\"bad@\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid email address\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Textarea\u003C\u002Flabel>\n      \u003Ctextarea placeholder=\"Enter your message\">\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-hint\">Same styling as inputs, resizable vertically\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit system with 15 scale values.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:18px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">18px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:28px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">28px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:36px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">36px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:48px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:56px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">56px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Binary system: 8px for small elements, 16px for cards and containers.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">0px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Sharp edges (none used)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, spans, inline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">16px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Cards, links, containers\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Restrained elevation using borders and color contrast instead of heavy shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\n        \u003Cdiv>\n          \u003Ch4>Level 0 — Flat\u003C\u002Fh4>\n          \u003Cp>No shadow, white background. The primary canvas for most content surfaces.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-border\">\n        \u003Cdiv>\n          \u003Ch4>Level 1 — Border\u003C\u002Fh4>\n          \u003Cp>1px solid Parchment Border (#dcd7d3). Gentle card containment and section dividers.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-dark-border\">\n        \u003Cdiv>\n          \u003Ch4>Level 2 — Dark Border\u003C\u002Fh4>\n          \u003Cp>1px solid Charcoal Ink (#292827). Header elements and dark section separators.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-glow\">\n        \u003Cdiv>\n          \u003Ch4>Level 3 — Glow\u003C\u002Fh4>\n          \u003Cp>Subtle box-shadow for product screenshot containers and elevated cards.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-hero\">\n        \u003Cdiv>\n          \u003Ch4>Level 4 — Hero Depth\u003C\u002Fh4>\n          \u003Cp>Semi-transparent white border on deep purple. Elements floating on the hero gradient.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\n  Generated from DESIGN.md — Superhuman Design System Catalog\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Superhuman — Dark Mode\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --mysteria-purple: #1b1938;\n    --lavender-glow: #cbb7fb;\n    --charcoal-ink: #292827;\n    --amethyst-link: #714cb6;\n    --translucent-white-95: rgba(255,255,255,0.95);\n    --translucent-white-80: rgba(255,255,255,0.8);\n    --pure-white: #ffffff;\n    --warm-cream: #e9e5dd;\n    --parchment-border: #dcd7d3;\n    --font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n\n    \u002F* Dark mode surfaces *\u002F\n    --dark-bg: #121111;\n    --dark-surface: #1c1b1a;\n    --dark-surface-elevated: #252423;\n    --dark-border: #3a3938;\n    --dark-text-primary: rgba(255,255,255,0.92);\n    --dark-text-secondary: rgba(255,255,255,0.6);\n    --dark-text-tertiary: rgba(255,255,255,0.4);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-family);\n    background: var(--dark-bg);\n    color: var(--dark-text-primary);\n    font-weight: 460;\n    font-size: 16px;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 6px 14px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: rgba(18, 17, 17, 0.92);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--dark-border);\n  }\n  .nav-brand {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--dark-text-primary);\n    text-decoration: none;\n    letter-spacing: -0.2px;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 32px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-size: 14px;\n    font-weight: 460;\n    color: var(--dark-text-secondary);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--dark-text-primary); }\n  .nav-cta {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 8px 20px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    background: linear-gradient(180deg, var(--mysteria-purple) 0%, #2a1f5e 40%, #4a2d7a 70%, #3a2468 100%);\n    padding: 120px 40px 140px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 120px;\n    background: linear-gradient(to bottom, transparent, var(--dark-bg));\n  }\n  .hero h1 {\n    font-size: 64px;\n    font-weight: 540;\n    line-height: 0.96;\n    letter-spacing: 0px;\n    color: var(--translucent-white-95);\n    max-width: 800px;\n    margin: 0 auto 24px;\n  }\n  .hero .subtitle {\n    font-size: 20px;\n    font-weight: 460;\n    line-height: 1.25;\n    color: var(--translucent-white-80);\n    max-width: 560px;\n    margin: 0 auto 40px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .btn-primary {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    text-decoration: none;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-primary:hover { opacity: 0.9; }\n  .btn-secondary {\n    background: transparent;\n    color: var(--translucent-white-95);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 460;\n    text-decoration: none;\n    border: 1px solid rgba(255,255,255,0.2);\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-secondary:hover { background: rgba(255,255,255,0.05); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-size: 48px;\n    font-weight: 460;\n    line-height: 0.96;\n    letter-spacing: -1.32px;\n    color: var(--dark-text-primary);\n    margin-bottom: 12px;\n  }\n  .section-subtitle {\n    font-size: 18px;\n    font-weight: 460;\n    line-height: 1.50;\n    color: var(--dark-text-secondary);\n    margin-bottom: 48px;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-category { margin-bottom: 40px; }\n  .color-category h3 {\n    font-size: 20px;\n    font-weight: 540;\n    line-height: 1.14;\n    margin-bottom: 20px;\n    color: var(--dark-text-primary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 20px;\n  }\n  .color-swatch {\n    border-radius: 16px;\n    overflow: hidden;\n    border: 1px solid var(--dark-border);\n  }\n  .color-swatch .swatch-color {\n    height: 100px;\n    width: 100%;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px 16px;\n    background: var(--dark-surface);\n  }\n  .color-swatch .swatch-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--dark-text-primary);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--dark-text-tertiary);\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--dark-text-secondary);\n    line-height: 1.4;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    padding: 24px 0;\n    border-bottom: 1px solid var(--dark-border);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample .type-text {\n    color: var(--dark-text-primary);\n    margin-bottom: 8px;\n  }\n  .type-sample .type-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--lavender-glow);\n    font-family: monospace;\n    line-height: 1.4;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n  .button-item .btn-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--dark-text-tertiary);\n    font-family: monospace;\n  }\n  .btn-cream-dark {\n    background: var(--warm-cream);\n    color: var(--charcoal-ink);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-cream-dark:hover { opacity: 0.9; }\n  .btn-light {\n    background: var(--dark-text-primary);\n    color: var(--dark-bg);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 600;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-light:hover { opacity: 0.85; }\n  .btn-outline-dark {\n    background: transparent;\n    color: var(--dark-text-primary);\n    padding: 14px 32px;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 460;\n    border: 1px solid var(--dark-border);\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-outline-dark:hover { background: rgba(255,255,255,0.05); }\n  .btn-ghost-dark {\n    background: transparent;\n    color: var(--lavender-glow);\n    padding: 14px 0;\n    border: none;\n    font-size: 16px;\n    font-weight: 460;\n    text-decoration: underline;\n    cursor: pointer;\n    transition: opacity 0.2s;\n  }\n  .btn-ghost-dark:hover { opacity: 0.7; }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    border-radius: 16px;\n    padding: 32px;\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .card-dark-bordered {\n    background: var(--dark-surface);\n    border: 1px solid var(--dark-border);\n  }\n  .card-dark-elevated {\n    background: var(--dark-surface-elevated);\n    border: 1px solid var(--dark-border);\n  }\n  .card-hero-surface {\n    background: var(--mysteria-purple);\n    border: 1px solid rgba(255,255,255,0.2);\n  }\n  .card-hover:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n  }\n  .card h4 {\n    font-size: 22px;\n    font-weight: 460;\n    line-height: 0.76;\n    letter-spacing: -0.315px;\n    margin-bottom: 16px;\n    color: var(--dark-text-primary);\n  }\n  .card .card-desc {\n    font-size: 16px;\n    font-weight: 460;\n    line-height: 1.50;\n    color: var(--dark-text-secondary);\n  }\n  .card .card-label {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--lavender-glow);\n    font-family: monospace;\n    margin-top: 16px;\n    opacity: 0.8;\n  }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 8px; }\n  .form-group label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--dark-text-primary);\n  }\n  .form-group input,\n  .form-group textarea {\n    font-family: var(--font-family);\n    font-size: 16px;\n    font-weight: 460;\n    padding: 12px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--dark-border);\n    background: var(--dark-surface);\n    color: var(--dark-text-primary);\n    outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-group input::placeholder,\n  .form-group textarea::placeholder {\n    color: var(--dark-text-tertiary);\n  }\n  .form-group input:focus,\n  .form-group textarea:focus {\n    border-color: var(--lavender-glow);\n  }\n  .form-group input.error {\n    border-color: #e74c3c;\n  }\n  .form-group textarea { resize: vertical; min-height: 100px; }\n  .form-hint {\n    font-size: 12px;\n    font-weight: 460;\n    color: var(--dark-text-tertiary);\n  }\n  .form-error-text {\n    font-size: 12px;\n    font-weight: 460;\n    color: #e74c3c;\n  }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: flex-end;\n  }\n  .spacing-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .spacing-box {\n    background: var(--lavender-glow);\n    border-radius: 4px;\n    height: 48px;\n    opacity: 0.7;\n  }\n  .spacing-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--dark-text-secondary);\n    font-family: monospace;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 32px;\n    align-items: center;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n  }\n  .radius-box {\n    width: 100px;\n    height: 100px;\n    background: var(--dark-surface-elevated);\n    border: 1px solid var(--dark-border);\n  }\n  .radius-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--dark-text-primary);\n    font-family: monospace;\n  }\n  .radius-context {\n    font-size: 11px;\n    font-weight: 460;\n    color: var(--dark-text-tertiary);\n    text-align: center;\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-section { background: var(--dark-surface); border-radius: 16px; padding: 48px; border: 1px solid var(--dark-border); }\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    background: var(--dark-surface-elevated);\n    border-radius: 16px;\n    padding: 32px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-card h4 {\n    font-size: 16px;\n    font-weight: 540;\n    color: var(--dark-text-primary);\n    margin-bottom: 8px;\n  }\n  .elevation-card p {\n    font-size: 13px;\n    font-weight: 460;\n    color: var(--dark-text-secondary);\n    line-height: 1.4;\n  }\n  .elev-flat { box-shadow: none; border: none; }\n  .elev-border { box-shadow: none; border: 1px solid var(--dark-border); }\n  .elev-dark-border { box-shadow: none; border: 1px solid var(--dark-text-secondary); }\n  .elev-glow { box-shadow: 0 4px 20px rgba(203, 183, 251, 0.1); border: none; }\n  .elev-hero {\n    background: var(--mysteria-purple);\n    border: 1px solid rgba(255,255,255,0.2);\n  }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    text-align: center;\n    padding: 48px 40px;\n    border-top: 1px solid var(--dark-border);\n    font-size: 14px;\n    font-weight: 460;\n    color: var(--dark-text-tertiary);\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 80px 20px 100px; }\n    .hero h1 { font-size: 36px; }\n    .hero .subtitle { font-size: 16px; }\n    .section { padding: 48px 20px; }\n    .section-title { font-size: 32px; letter-spacing: -0.8px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-section { padding: 24px; }\n    .elevation-grid { grid-template-columns: 1fr; }\n    .dark-badge { top: 12px; right: 12px; font-size: 11px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#radius\">Radius\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca href=\"#\" class=\"nav-cta\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Superhuman\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens extracted from Superhuman's website, rendered as a living style guide.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View DESIGN.md\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Every color token from the Superhuman design system with semantic naming and roles.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#1b1938;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Mysteria Purple\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#1b1938\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Hero gradient background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#cbb7fb;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Lavender Glow\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#cbb7fb\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary accent and highlight\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#292827;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Charcoal Ink\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#292827\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#714cb6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Amethyst Link\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#714cb6\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Underlined link text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:rgba(255,255,255,0.95);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Translucent White 95%\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.95)\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Hero text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:rgba(255,255,255,0.8);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Misted White 80%\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.8)\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Secondary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-category\">\n    \u003Ch3>Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Primary page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#e9e5dd;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Warm Cream\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#e9e5dd\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Button background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"swatch-color\" style=\"background:#dcd7d3;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-info\">\n          \u003Cdiv class=\"swatch-name\">Parchment Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-hex\">#dcd7d3\u003C\u002Fdiv>\n          \u003Cdiv class=\"swatch-role\">Card and divider borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Super Sans VF with non-standard weight stops (460, 540, 600, 700).\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:64px; font-weight:540; line-height:0.96;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Display Hero — 64px \u002F 540 \u002F 0.96 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:48px; font-weight:460; line-height:0.96; letter-spacing:-1.32px;\">Section Display\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Display — 48px \u002F 460 \u002F 0.96 \u002F -1.32px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:48px; font-weight:460; line-height:0.96;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Section Heading — 48px \u002F 460 \u002F 0.96 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:28px; font-weight:540; line-height:1.14; letter-spacing:-0.63px;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Feature Title — 28px \u002F 540 \u002F 1.14 \u002F -0.63px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:26px; font-weight:460; line-height:1.30;\">Sub-heading Large\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-heading Large — 26px \u002F 460 \u002F 1.30 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:22px; font-weight:460; line-height:0.76; letter-spacing:-0.315px;\">Card Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Card Heading — 22px \u002F 460 \u002F 0.76 \u002F -0.315px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:460; line-height:1.20;\">Body Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Heading — 20px \u002F 460 \u002F 1.20 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:20px; font-weight:460; line-height:1.10; letter-spacing:-0.55px;\">Body Heading Alt\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Heading Alt — 20px \u002F 460 \u002F 1.10 \u002F -0.55px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:18px; font-weight:540; line-height:1.50; letter-spacing:-0.135px;\">Emphasis Body — Medium weight for callouts and highlights\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Emphasis Body — 18px \u002F 540 \u002F 1.50 \u002F -0.135px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:460; line-height:1.50;\">Body — Standard reading text with generous line-height for comfortable reading across long content blocks.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body — 16px \u002F 460 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:700; line-height:1.00;\">Button \u002F UI Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button \u002F UI Bold — 16px \u002F 700 \u002F 1.00 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:16px; font-weight:600; line-height:1.00;\">Button \u002F UI Semi\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Button \u002F UI Semi — 16px \u002F 600 \u002F 1.00 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:500; line-height:1.20; letter-spacing:-0.315px;\">Caption — Small labels and metadata\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption — 14px \u002F 500 \u002F 1.20 \u002F -0.315px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:14px; font-weight:600; line-height:1.29;\">Caption Semi — Emphasized small text\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Caption Semi — 14px \u002F 600 \u002F 1.29 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-text\" style=\"font-size:12px; font-weight:700; line-height:1.50;\">MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Micro Label — 12px \u002F 700 \u002F 1.50 \u002F 0px\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Restrained CTAs using Warm Cream and light tones on dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-cream-dark\">Warm Cream Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#e9e5dd bg \u002F #292827 text \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-light\">Light Primary\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">white bg \u002F dark text \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-outline-dark\">Outline\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">transparent \u002F dark border \u002F 8px radius\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\n      \u003Cbutton class=\"btn-ghost-dark\">Ghost \u002F Text Link\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">#cbb7fb \u002F underline \u002F no bg\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:40px; background:var(--mysteria-purple); border-radius:16px; padding:40px;\">\n    \u003Cp style=\"font-size:14px; font-weight:600; color:var(--translucent-white-80); margin-bottom:16px; font-family:monospace;\">On hero gradient surface:\u003C\u002Fp>\n    \u003Cdiv class=\"button-grid\">\n      \u003Cdiv class=\"button-item\">\n        \u003Cbutton class=\"btn-primary\">Hero CTA\u003C\u002Fbutton>\n        \u003Cspan class=\"btn-label\" style=\"color:var(--translucent-white-80);\">#e9e5dd bg on #1b1938\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"button-item\">\n        \u003Cbutton class=\"btn-secondary\">Secondary Hero\u003C\u002Fbutton>\n        \u003Cspan class=\"btn-label\" style=\"color:var(--translucent-white-80);\">transparent \u002F white border\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Clean containment using borders on dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-dark-bordered card-hover\">\n      \u003Ch4>Surface Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Dark surface with subtle border, 16px radius. Hover to see the lift effect.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #1c1b1a \u002F border: 1px solid #3a3938\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dark-elevated\">\n      \u003Ch4>Elevated Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Slightly lighter dark surface for elevated containers and feature sections.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #252423 \u002F border: 1px solid #3a3938\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-hero-surface\">\n      \u003Ch4>Hero Surface Card\u003C\u002Fh4>\n      \u003Cp class=\"card-desc\">Deep purple background with semi-transparent white border for elements on the hero gradient.\u003C\u002Fp>\n      \u003Cp class=\"card-label\">bg: #1b1938 \u002F border: rgba(255,255,255,0.2)\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Dark-surface inputs with warm-toned focus states.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Default Input\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Enter your email\">\n      \u003Cspan class=\"form-hint\">border: 1px solid #3a3938 \u002F radius: 8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Focus State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" placeholder=\"Focused input\" style=\"border-color:#cbb7fb;\">\n      \u003Cspan class=\"form-hint\">focus: border-color shifts to Lavender Glow\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Error State\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"error\" placeholder=\"Invalid input\" value=\"bad@\">\n      \u003Cspan class=\"form-error-text\">Please enter a valid email address\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel>Textarea\u003C\u002Flabel>\n      \u003Ctextarea placeholder=\"Enter your message\">\u003C\u002Ftextarea>\n      \u003Cspan class=\"form-hint\">Same styling as inputs, resizable vertically\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">8px base unit system with 15 scale values.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:2px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">2px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:4px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:6px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:18px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">18px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:20px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:24px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:28px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">28px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:36px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">36px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:40px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">40px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:48px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\n      \u003Cdiv class=\"spacing-box\" style=\"width:56px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-label\">56px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Binary system: 8px for small elements, 16px for cards and containers.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">0px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Sharp edges (none used)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">8px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Buttons, spans, inline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">16px\u003C\u002Fspan>\n      \u003Cspan class=\"radius-context\">Cards, links, containers\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-subtitle\">Restrained elevation using borders and color contrast instead of heavy shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-section\">\n    \u003Cdiv class=\"elevation-grid\">\n      \u003Cdiv class=\"elevation-card elev-flat\">\n        \u003Cdiv>\n          \u003Ch4>Level 0 — Flat\u003C\u002Fh4>\n          \u003Cp>No shadow, dark surface background. The primary canvas for most content.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-border\">\n        \u003Cdiv>\n          \u003Ch4>Level 1 — Border\u003C\u002Fh4>\n          \u003Cp>1px solid subtle border. Gentle card containment and section dividers.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-dark-border\">\n        \u003Cdiv>\n          \u003Ch4>Level 2 — Strong Border\u003C\u002Fh4>\n          \u003Cp>1px solid lighter border. Header elements and prominent section separators.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-glow\">\n        \u003Cdiv>\n          \u003Ch4>Level 3 — Lavender Glow\u003C\u002Fh4>\n          \u003Cp>Subtle lavender-tinted shadow for elevated cards and featured content.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card elev-hero\">\n        \u003Cdiv>\n          \u003Ch4>Level 4 — Hero Depth\u003C\u002Fh4>\n          \u003Cp>Semi-transparent white border on deep purple. Elements floating on the hero gradient.\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter>\n  Generated from DESIGN.md — Superhuman Design System Catalog (Dark Mode)\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Superhuman Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsuperhuman\u002FDESIGN.md) extracted from the public [Superhuman](https:\u002F\u002Fsuperhuman.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fsuperhuman\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Superhuman design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Superhuman Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsuperhuman\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Superhuman Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fsuperhuman\u002Fpreview-screenshot.png)\n",{"slug":348,"name":349,"category":30,"designMd":350,"previewHtml":351,"previewDarkHtml":352,"readme":353},"tesla","Tesla","# Design System Inspiration of Tesla\n\n## 1. Visual Theme & Atmosphere\n\nTesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing. The page opens with a full-viewport hero that fills the entire screen with cinematic car photography: three vehicles arranged on polished concrete against a hazy cityscape sky, with a single model name floating above in translucent white type. There are no decorative borders, no gradients, no patterns, no shadows. The UI exists only to provide just enough navigational structure to get out of the way. Every pixel that isn't product imagery is white space, and that restraint is the design system's most powerful statement.\n\nThe color philosophy is almost ascetic: a single blue (`#3E6AE1`) for primary calls to action, three shades of dark gray for text hierarchy, and white for everything else. The entire emotional weight is carried by photography — sprawling landscape shots, studio-lit vehicle profiles, and atmospheric environmental compositions that stretch edge-to-edge across each viewport-height section. The UI chrome dissolves into the imagery. The navigation bar floats above the hero with no visible background, border, or shadow — the TESLA wordmark and five navigation labels simply exist in the space, trusting the content beneath them to provide sufficient contrast.\n\nTypography recently transitioned from Gotham to Universal Sans — a custom family split into \"Display\" for headlines and \"Text\" for body\u002FUI elements — unifying the website, mobile app, and in-car software into a single typographic voice. The Display variant renders hero titles at 40px weight 500, while the Text variant handles everything from navigation (14px\u002F500) to body copy (14px\u002F400). The font carries a geometric precision with slightly humanist terminals that feels engineered rather than designed — exactly matching Tesla's brand identity of technology that doesn't need to announce itself. There are no text shadows, no text gradients, no decorative type treatments. Every letterform earns its place through clarity alone.\n\n**Key Characteristics:**\n- Full-viewport hero sections (100vh) dominated by cinematic car photography with minimal overlay UI\n- Near-zero UI decoration: no shadows, no gradients, no borders, no patterns anywhere on the page\n- Single accent color — Electric Blue (`#3E6AE1`) — used exclusively for primary CTA buttons\n- Universal Sans font family (Display + Text) unifying web, app, and in-car interfaces\n- Photography-first presentation where product imagery carries all emotional weight\n- Frosted-glass navigation concept with transparent\u002Fwhite nav that floats over hero content\n- 0.33s cubic-bezier transitions as the universal timing for all interactive state changes\n- Carousel-driven hero with dot indicators and edge arrow navigation for multiple vehicle showcases\n- \"Ask a Question\" persistent chatbot bar anchored to the viewport bottom\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Electric Blue** (`#3E6AE1`): Primary CTA button background — a confident, mid-saturation blue (rgb 62, 106, 225) that stands alone as the only chromatic color in the entire interface. Used exclusively for \"Order Now\" and other primary action buttons\n- **Pure White** (`#FFFFFF`): Dominant background color for all surfaces, panels, navigation, and secondary button fills — the canvas that lets photography breathe\n\n### Secondary & Accent\n- **Promo Blue** (`#3E6AE1`): Blue also serves for promotional text (\"0% APR Available\") displayed over hero imagery in the same hue as the CTA — creating a visual link between incentive messaging and action\n- No secondary accent colors exist. Tesla deliberately avoids color variety to maintain extreme visual discipline\n\n### Surface & Background\n- **White Canvas** (`#FFFFFF`): Page background, navigation panel, dropdown menus, and all surface containers\n- **Light Ash** (`#F4F4F4`): Subtle alternate surface for section differentiation — barely perceptible shift from pure white (rgb 244, 244, 244)\n- **Carbon Dark** (`#171A20`): Dark surface color for hero text overlays and potential dark-mode contexts (rgb 23, 26, 32) — a warm near-black with a blue undertone\n- **Frosted Glass** (`rgba(255, 255, 255, 0.75)`): Semi-transparent white for navigation backdrop-filter effects on scroll\n\n### Neutrals & Text\n- **Carbon Dark** (`#171A20`): Primary heading and navigation text — the darkest text value (rgb 23, 26, 32), used for model names, nav labels, and hero titles on light backgrounds\n- **Graphite** (`#393C41`): Body text and secondary content (rgb 57, 60, 65) — the default paragraph color, slightly warmer than pure gray\n- **Pewter** (`#5C5E62`): Tertiary text for sub-links, secondary navigation links like \"Learn\" and \"Order\" (rgb 92, 94, 98)\n- **Silver Fog** (`#8E8E8E`): Placeholder text in input fields and disabled states (rgb 142, 142, 142)\n- **Cloud Gray** (`#EEEEEE`): Light borders and divider lines (rgb 238, 238, 238)\n- **Pale Silver** (`#D0D1D2`): Subtle UI borders and delineation (rgb 208, 209, 210)\n\n### Semantic & Accent\n- Tesla's marketing site avoids semantic color coding (no green\u002Fred\u002Fyellow status indicators). Error, success, and warning states follow standard browser defaults in form contexts\n- The blue CTA (`#3E6AE1`) serves as the sole interactive color signal\n\n### Gradient System\n- No gradients are used anywhere in the interface\n- Depth is achieved entirely through photography, whitespace, and the binary contrast between full-bleed imagery and clean white surfaces\n- The navigation achieves layering through opacity (frosted glass effect) rather than gradient or shadow\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `Universal Sans Display`, -apple-system, Arial, sans-serif — used for hero titles and large model names. A geometric sans-serif with precisely engineered proportions, recently replacing Gotham to unify Tesla's digital ecosystem (website, mobile app, vehicle interface)\n- **Text\u002FUI**: `Universal Sans Text`, -apple-system, Arial, sans-serif — used for navigation, body copy, buttons, and all UI text. Optimized for legibility at smaller sizes with slightly wider proportions than the Display variant\n- **No OpenType features** detected — typography is completely unembellished\n- **No italic variants** observed on the marketing site\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Title | 40px (2.50rem) | 500 | 48px (1.20) | normal | Universal Sans Display, white on dark hero imagery |\n| Product Name | 17px (1.06rem) | 500 | 20px (1.18) | normal | Universal Sans Text, model names in nav panel and cards |\n| Nav Item | 14px (0.88rem) | 500 | 16.8px (1.20) | normal | Universal Sans Text, primary navigation labels |\n| Body Text | 14px (0.88rem) | 400 | 20px (1.43) | normal | Universal Sans Text, paragraph and descriptive content |\n| Button Label | 14px (0.88rem) | 500 | 16.8px (1.20) | normal | Universal Sans Text, CTA button text |\n| Sub-link | 14px (0.88rem) | 400 | 20px (1.43) | normal | Tertiary links (Learn, Order, Experience) |\n| Promo Text | 22px (1.38rem) | 400 | 20px (0.91) | normal | White promotional text on hero (\"0% APR Available\") |\n| Category Label | 16px (est.) | 500 | — | normal | White text labels on category cards (\"Sport Sedan\") |\n\n### Principles\n- **\"Normal\" letter-spacing everywhere**: Unlike most modern tech brands that use negative tracking for headlines, Tesla uses default letter-spacing at every level. This reflects a philosophy that the typeface should speak for itself without manipulation\n- **Weight restraint**: Only two weights appear — 500 (medium) for headings\u002FUI and 400 (regular) for body. No bold (700), no light (300). The system avoids typographic drama\n- **Unified font sizing**: Most UI text clusters at 14px with only hero titles (40px) and promo text (22px) breaking away. This extreme uniformity creates a sense of engineered consistency\n- **Display vs Text split**: The two-variant system (Display for hero, Text for UI) creates subtle optical correction without visible stylistic difference — they appear as the same typeface at different sizes\n- **No text transforms**: No uppercase text appears in the main navigation or CTAs — the lowercase approach reinforces Tesla's understated confidence\n\n## 4. Component Stylings\n\n### Buttons\nAll buttons use barely-rounded rectangles (4px border-radius) — creating a sharp, technical aesthetic that mirrors the precision of the vehicles.\n\n**Primary CTA** — The main action button:\n- Default: bg `#3E6AE1` (Electric Blue), text `#FFFFFF`, fontSize 14px, fontWeight 500, padding 4px with inner content centering, borderRadius 4px, minHeight 40px, width 200px\n- Border: 3px solid transparent (reserves space for focus\u002Factive border animation)\n- Box Shadow: `rgba(0,0,0,0) 0px 0px 0px 2px inset` (invisible at rest, animates to visible on focus)\n- Transition: `border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s`\n- Hover: subtle darkening of blue background\n- Used for: \"Order Now\" calls to action\n\n**Secondary CTA** — The alternative action button:\n- Default: bg `#FFFFFF`, text `#393C41` (Graphite), same dimensions and border pattern as primary\n- Transition: identical timing to primary (0.33s)\n- Used for: \"View Inventory\" alongside primary CTA\n\n**Nav Button** — Top navigation items:\n- Default: bg transparent, text `#171A20` (Carbon Dark), fontSize 14px, fontWeight 500, borderRadius 4px, padding 4px 16px, minHeight 32px\n- Transition: `color 0.33s, background-color 0.33s`\n- Active\u002Fexpanded: subtle background highlight\n- Used for: \"Vehicles\", \"Energy\", \"Charging\", \"Discover\", \"Shop\"\n\n**Text Link** — In-content actions:\n- Default: text `#5C5E62` (Pewter), fontSize 14px, fontWeight 400, no background, no border\n- Hover: underline decoration with box-shadow transition\n- Transition: `box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75), color 0.33s`\n- Used for: \"Learn\", \"Order\", \"Experience\", \"New\", \"Pre-Owned\" links in dropdown panel\n\n### Cards & Containers\n\n**Vehicle Card** (Navigation panel):\n- Background: transparent (inherits panel white)\n- Border: none\n- Shadow: none\n- Content: vehicle image (transparent PNG) + model name centered below + two text links\n- Layout: 3-column grid within the dropdown panel\n- No hover animation on the card itself — interaction is via the text links beneath\n\n**Category Card** (Homepage lower section):\n- Background: full-bleed landscape photography\n- Border radius: approximately 12px (subtly rounded)\n- Overflow: hidden (clips image to rounded corners)\n- Text: white label in top-left corner (\"Sport Sedan\", \"Midsize SUV\")\n- Size: large format, approximately 2:1 aspect ratio\n- No shadow, no border, no overlay gradient — text relies on image darkness for contrast\n\n### Inputs & Forms\n- Background: transparent\n- Text color: `#171A20` (Carbon Dark)\n- Placeholder color: `#8E8E8E` (Silver Fog)\n- Border: minimal, inherits from browser defaults\n- Font: Universal Sans Text, 14px\n- The \"Ask a Question\" chatbot input bar sits at the viewport bottom with a clean white background and subtle border\n\n### Navigation\n- **Desktop**: Centered horizontal nav with TESLA wordmark (spaced uppercase letters) on the left, five category buttons center-aligned, and three icon buttons (help, globe\u002Flanguage, account) on the right\n- **Background**: White (transitions from transparent over dark hero to opaque white on scroll via class toggle `tds-site-header--white-background`)\n- **Dropdown panel**: Full-width white panel with 3-column vehicle grid + right sidebar text links, no shadow, no border — appears seamlessly below the nav\n- **Sticky behavior**: `sticky-without-slide` class — stays at top without slide-in animation\n- **Mobile**: Hamburger collapse pattern\n- **No visible separator** between nav and content — the nav blends with the hero\n\n### Image Treatment\n- **Hero**: Full-viewport (100vh) sections with cinematic photography — edge-to-edge, no padding, no margin\n- **Vehicle images**: Transparent PNG renders on white background in dropdown panel, studio-quality 3\u002F4 angle shots\n- **Category cards**: Landscape photography with approximately 2:1 ratio, rounded corners (12px)\n- **Carousel**: Auto-advancing with dot indicators (3 dots) and left\u002Fright arrow navigation on edges\n- **Lazy loading**: Below-fold sections use lazy loading, rendering as blank white until scrolled into view\n\n### Persistent Chat Bar\n- Anchored to viewport bottom, visible across all sections\n- White background with subtle border\n- Contains: chat icon + \"Ask a Question\" label + placeholder text (\"What's Dog Mode?\") + send icon + \"Schedule a Drive Today\" secondary CTA\n- Schedule CTA has a teal\u002Fblue icon accent\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Common values**: 8px (0.5rem), 16px (1rem), 21.44px (1.34rem)\n- **Button padding**: 4px (minimal outer) with content centering via flexbox, 4px 16px for nav items\n- **Section padding**: Full-viewport sections with content centered vertically\n- **Card gap**: approximately 16px between category cards\n\n### Grid & Container\n- **Max width**: approximately 1383px (full viewport width used for most content)\n- **Hero**: Full-bleed, edge-to-edge, 100vh sections\n- **Navigation panel**: 3-column grid for vehicle cards with right-aligned text sidebar (~70\u002F30 split)\n- **Category cards**: 2-up horizontal layout (large left card + smaller right card)\n\n### Whitespace Philosophy\nTesla uses whitespace as a luxury signal. The generous vertical spacing between sections (each section is a full viewport height) means you can only see one \"message\" at a time — one car, one model name, one CTA pair. This creates a gallery-like browsing experience where each scroll is a deliberate transition, not a continuous feed. White space is not empty — it's the frame that elevates each vehicle to the status of art piece.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | Most elements — sharp edges are the default |\n| 4px | Buttons (primary, secondary, nav items) — barely perceptible rounding |\n| ~12px | Category cards — noticeable but restrained rounding on larger surfaces |\n| 50% | Carousel dot indicators — perfect circles |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, no border | Default state for all elements — cards, panels, buttons at rest |\n| Level 1 (Frost) | `rgba(255,255,255,0.75)` backdrop | Navigation bar on scroll — frosted glass transparency |\n| Level 2 (Overlay) | `rgba(128,128,128,0.65)` | Modal overlays and region\u002Fcookie popups |\n| Level 3 (Subtle) | `rgba(0,0,0,0.05)` | Minimal shadow hints on rare hover states |\n\n### Shadow Philosophy\nTesla's approach to elevation is essentially \"none.\" The site avoids box-shadows entirely in its primary interface. Depth is communicated through three alternative strategies:\n1. **Z-index layering**: The sticky navigation sits above hero content through positioning, not shadow\n2. **Opacity-based transparency**: The frosted glass nav and overlay modals use background-color opacity rather than shadow to indicate layering\n3. **Photography-as-depth**: The full-bleed images create their own visual depth through perspective, lighting, and composition — making UI shadows redundant\n\n### Decorative Depth\n- No gradients, glows, or atmospheric effects on UI elements\n- The hero imagery itself provides all visual richness — sunset skies, reflected light on car surfaces, ground shadows from studio lighting\n- The carousel arrow buttons use a semi-transparent white background to float above the hero imagery without disrupting it\n\n## 7. Do's and Don'ts\n\n### Do\n- Let photography dominate every screen — the product IS the design\n- Use Electric Blue (`#3E6AE1`) exclusively for primary CTAs — never for decorative purposes\n- Maintain viewport-height sections for major content blocks — one message per screen\n- Keep typography at weight 400-500 only — no bold, no light, no extremes\n- Use 4px border-radius for all interactive elements — precision over playfulness\n- Trust whitespace as a luxury signal — never fill available space just because it's empty\n- Keep all transitions at 0.33s — consistency in motion is as important as consistency in color\n- Use transparent PNG vehicle imagery on white backgrounds for product showcases\n- Center CTAs horizontally below model names — the vertical rhythm is model → subtitle → buttons\n- Maintain the Display\u002FText font split — Display for hero-scale text only, Text for everything else\n\n### Don't\n- Add shadows to any element — elevation through shadow contradicts the flat, gallery aesthetic\n- Use more than one chromatic color besides the blue CTA — the palette is intentionally monochrome-plus-one\n- Apply gradients, patterns, or decorative backgrounds to surfaces — white and photography are the only backgrounds\n- Use text larger than 40px on the web — the typography is deliberately restrained even at hero scale\n- Add borders to cards or containers — separation is achieved through spacing, not lines\n- Use uppercase text transforms — Tesla's confidence is expressed through lowercase calm\n- Introduce rounded-pill buttons or large border-radii — the 4px radius is deliberate and precise\n- Override the Universal Sans family with other typefaces — cross-platform consistency is a core brand value\n- Add hover animations with scale\u002Ftranslate transforms — Tesla's interactions are color-only (background and border transitions)\n- Clutter the viewport with multiple CTAs — every screen should have at most two action buttons\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C768px | Single-column layout, hamburger nav replaces horizontal labels, hero text scales to ~28px, CTA buttons stack vertically, category cards become full-width |\n| Tablet | 768-1024px | 2-column nav panel, hero maintains full-viewport height, CTAs remain side-by-side, reduced horizontal padding |\n| Desktop | 1024-1440px | Full horizontal nav, 3-column vehicle grid in dropdown, hero at 40px, side-by-side CTAs at 200px\u002F160px width |\n| Large Desktop | >1440px | Content remains centered, hero photography scales to fill wider viewports, max-width container for nav panel content |\n\n### Touch Targets\n- Primary CTA buttons: 200px × 40px minimum (well above 44×44px WCAG requirement)\n- Nav buttons: minimum 32px height with 4px 16px padding — adequate touch targets\n- Carousel arrows: ~44px square white semi-transparent buttons at viewport edges\n- Text links (\"Learn\", \"Order\"): 14px text with adequate line-height spacing for touch\n\n### Collapsing Strategy\n- **Navigation**: Horizontal category buttons (Vehicles, Energy, Charging, Discover, Shop) collapse to a hamburger\u002Fdrawer menu on mobile\n- **Hero CTA pair**: Side-by-side buttons on desktop stack vertically on mobile\n- **Category cards**: 2-up horizontal layout collapses to single-column full-width on mobile\n- **Vehicle grid**: 3-column grid in desktop nav panel becomes 2-column on tablet, single-column on mobile\n- **Spacing**: Section vertical padding remains generous (viewport-height sections) but horizontal padding reduces\n\n### Image Behavior\n- Hero images are fully responsive and fill the entire viewport at every breakpoint\n- Vehicle carousel images use `object-fit: cover` to maintain cinematic composition across widths\n- Transparent PNG vehicle images in the nav panel scale proportionally within their grid cells\n- Category card images maintain their landscape ratio and clip via `overflow: hidden` with border-radius\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Electric Blue (#3E6AE1)\"\n- Background: \"Pure White (#FFFFFF)\"\n- Heading text: \"Carbon Dark (#171A20)\"\n- Body text: \"Graphite (#393C41)\"\n- Tertiary text: \"Pewter (#5C5E62)\"\n- Placeholder: \"Silver Fog (#8E8E8E)\"\n- Alternate surface: \"Light Ash (#F4F4F4)\"\n- Dark surface: \"Carbon Dark (#171A20)\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport background image, centered 'Model Y' title in Universal Sans Display at 40px weight 500 in white, a subtitle line below, and two buttons side by side: a primary Electric Blue (#3E6AE1) 'Order Now' button and a secondary white 'View Inventory' button, both with 4px border-radius and 40px height\"\n- \"Design a navigation bar with a spaced-letter wordmark on the left, five text buttons (14px, weight 500, Carbon Dark #171A20) centered, and three icon buttons on the right, all on a white background with no shadow or border\"\n- \"Build a vehicle card grid with 3 columns, each card showing a transparent-background car image above a model name (17px, weight 500, Carbon Dark) and two text links (14px, weight 400, Pewter #5C5E62) labeled 'Learn' and 'Order', on a pure white surface with no borders or shadows\"\n- \"Create a category card with full-bleed landscape photography, 12px border-radius, overflow hidden, and a white text label ('Sport Sedan') positioned in the top-left corner with no overlay gradient\"\n- \"Design a persistent bottom bar with a chat input ('Ask a Question' placeholder), a send icon, and a secondary CTA ('Schedule a Drive Today') with a teal icon, anchored to the viewport bottom on a white background\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Tesla's system is so minimal that each element must be pixel-perfect\n2. Reference specific color names and hex codes from this document — there are only 6-7 colors in the entire system\n3. Use natural language descriptions, not CSS values — \"barely rounded corners\" not \"border-radius: 4px\"\n4. Describe the desired \"feel\" alongside specific measurements — \"gallery-like silence between sections\" communicates the whitespace philosophy better than \"margin-bottom: 100vh\"\n5. Always verify that photography is doing the emotional heavy-lifting — if the UI itself feels \"designed,\" it's too much\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Tesla\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --electric-blue: #3E6AE1;\n    --pure-white: #FFFFFF;\n    --carbon-dark: #171A20;\n    --graphite: #393C41;\n    --pewter: #5C5E62;\n    --silver-fog: #8E8E8E;\n    --cloud-gray: #EEEEEE;\n    --pale-silver: #D0D1D2;\n    --light-ash: #F4F4F4;\n    --frosted-glass: rgba(255,255,255,0.75);\n    --overlay: rgba(128,128,128,0.65);\n    --subtle-shadow: rgba(0,0,0,0.05);\n    --font-display: 'Inter', -apple-system, Arial, sans-serif;\n    --font-text: 'Inter', -apple-system, Arial, sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-text);\n    background: var(--pure-white);\n    color: var(--graphite);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.43;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 40px;\n    background: var(--pure-white);\n    min-height: 56px;\n  }\n  .nav-brand {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    text-decoration: none;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    text-decoration: none;\n    padding: 4px 16px;\n    border-radius: 4px;\n    min-height: 32px;\n    display: inline-flex;\n    align-items: center;\n    transition: color 0.33s, background-color 0.33s;\n  }\n  .nav-links a:hover { background: var(--light-ash); }\n  .nav-cta {\n    background: var(--electric-blue);\n    color: var(--pure-white) !important;\n    padding: 8px 24px;\n    border-radius: 4px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    text-decoration: none;\n    transition: background-color 0.33s;\n    min-height: 40px;\n    display: inline-flex;\n    align-items: center;\n  }\n  .nav-cta:hover { background: #3560CC; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 80px 40px 60px;\n    background: linear-gradient(180deg, #c8d6e5 0%, #dfe6ed 30%, #f0f0f0 70%, #e8e8e8 100%);\n    text-align: center;\n    overflow: hidden;\n  }\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 200px;\n    background: linear-gradient(transparent, rgba(200,200,200,0.3));\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 48px;\n    letter-spacing: normal;\n    color: var(--carbon-dark);\n    margin-bottom: 8px;\n  }\n  .hero .subtitle {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--graphite);\n    margin-bottom: 32px;\n    line-height: 20px;\n  }\n  .hero .promo {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--electric-blue);\n    margin-bottom: 24px;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 40px;\n  }\n  .btn-primary {\n    background: var(--electric-blue);\n    color: var(--pure-white);\n    border: 3px solid transparent;\n    border-radius: 4px;\n    padding: 4px 24px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 40px;\n    min-width: 200px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s;\n    text-decoration: none;\n  }\n  .btn-primary:hover { background: #3560CC; }\n  .btn-secondary {\n    background: var(--pure-white);\n    color: var(--graphite);\n    border: 3px solid transparent;\n    border-radius: 4px;\n    padding: 4px 24px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 40px;\n    min-width: 160px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s;\n    text-decoration: none;\n  }\n  .btn-secondary:hover { background: var(--light-ash); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 28px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    margin-bottom: 8px;\n    line-height: 1.2;\n  }\n  .section-desc {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--pewter);\n    margin-bottom: 40px;\n    line-height: 20px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--cloud-gray);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-group-label {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    margin-bottom: 16px;\n    margin-top: 24px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  .color-swatch .swatch-block {\n    height: 80px;\n    border-radius: 4px 4px 0 0;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px;\n    background: var(--pure-white);\n    border: 1px solid var(--cloud-gray);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n  }\n  .color-swatch .swatch-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    color: var(--pewter);\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 11px;\n    color: var(--silver-fog);\n    line-height: 1.3;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--cloud-gray);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--silver-fog);\n    margin-top: 8px;\n    font-family: monospace;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 16px;\n  }\n  .btn-nav {\n    background: transparent;\n    color: var(--carbon-dark);\n    border: none;\n    border-radius: 4px;\n    padding: 4px 16px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 32px;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    transition: color 0.33s, background-color 0.33s;\n  }\n  .btn-nav:hover { background: var(--light-ash); }\n  .btn-text-link {\n    background: none;\n    border: none;\n    color: var(--pewter);\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    cursor: pointer;\n    padding: 4px 0;\n    transition: box-shadow 0.33s, color 0.33s;\n    text-decoration: none;\n  }\n  .btn-text-link:hover {\n    box-shadow: 0 1px 0 var(--pewter);\n  }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .card {\n    background: var(--pure-white);\n    border-radius: 4px;\n    overflow: hidden;\n    transition: background-color 0.33s;\n  }\n  .card-image {\n    height: 200px;\n    background: var(--light-ash);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .card-image-placeholder {\n    font-size: 40px;\n    font-weight: 500;\n    color: var(--pale-silver);\n    font-family: var(--font-display);\n  }\n  .card-body {\n    padding: 20px;\n    text-align: center;\n  }\n  .card-title {\n    font-size: 17px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    margin-bottom: 8px;\n    font-family: var(--font-text);\n  }\n  .card-links {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n  }\n  .card-links a {\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--pewter);\n    text-decoration: none;\n    transition: box-shadow 0.33s, color 0.33s;\n  }\n  .card-links a:hover { box-shadow: 0 1px 0 var(--pewter); }\n\n  .card-category {\n    border-radius: 12px;\n    overflow: hidden;\n    position: relative;\n    height: 180px;\n    display: flex;\n    align-items: flex-start;\n    padding: 24px;\n  }\n  .card-category .cat-label {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--pure-white);\n    position: relative;\n    z-index: 1;\n  }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    margin-bottom: 32px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n  }\n  .form-input {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--carbon-dark);\n    background: var(--pure-white);\n    border: 1px solid var(--pale-silver);\n    border-radius: 4px;\n    padding: 10px 12px;\n    min-height: 40px;\n    outline: none;\n    transition: border-color 0.33s;\n  }\n  .form-input::placeholder { color: var(--silver-fog); }\n  .form-input:focus { border-color: var(--electric-blue); }\n  .form-input.error { border-color: #E74C3C; }\n  .form-textarea {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--carbon-dark);\n    background: var(--pure-white);\n    border: 1px solid var(--pale-silver);\n    border-radius: 4px;\n    padding: 10px 12px;\n    min-height: 100px;\n    outline: none;\n    resize: vertical;\n    transition: border-color 0.33s;\n  }\n  .form-textarea::placeholder { color: var(--silver-fog); }\n  .form-textarea:focus { border-color: var(--electric-blue); }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 12px;\n  }\n  .spacing-box {\n    height: 32px;\n    background: var(--electric-blue);\n    border-radius: 4px;\n    opacity: 0.7;\n  }\n  .spacing-label {\n    font-size: 12px;\n    color: var(--pewter);\n    font-family: monospace;\n    min-width: 80px;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n  .radius-item {\n    text-align: center;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--light-ash);\n    border: 2px solid var(--pale-silver);\n    margin-bottom: 8px;\n  }\n  .radius-value {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    font-family: monospace;\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--silver-fog);\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-row {\n    display: flex;\n    gap: 32px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n  .elevation-card {\n    width: 200px;\n    padding: 24px;\n    border-radius: 4px;\n    text-align: center;\n    background: var(--pure-white);\n  }\n  .elevation-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--carbon-dark);\n    margin-bottom: 4px;\n  }\n  .elevation-desc {\n    font-size: 11px;\n    color: var(--pewter);\n  }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    padding: 40px;\n    text-align: center;\n    border-top: 1px solid var(--cloud-gray);\n  }\n  footer p {\n    font-size: 12px;\n    color: var(--silver-fog);\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 28px; line-height: 36px; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .btn-primary, .btn-secondary { min-width: 240px; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    nav { padding: 12px 20px; }\n    .section { padding: 60px 20px; }\n    .nav-links { display: none; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#\">Vehicles\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Energy\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Charging\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Discover\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Shop\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Tesla\u003C\u002Fh1>\n  \u003Cp class=\"promo\">Photography-first. Interface-invisible.\u003C\u002Fp>\n  \u003Cp class=\"subtitle\">A visual catalog generated from DESIGN.md — every token, every value, every design decision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#\" class=\"btn-primary\">Order Now\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-secondary\">View Inventory\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Tesla's palette is almost ascetic — one blue, three grays, and white. Every surface is monochrome to let photography dominate.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #3E6AE1;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Electric Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#3E6AE1\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary CTA buttons — the only chromatic color\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #FFFFFF; border: 1px solid #EEEEEE;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Background, surfaces, secondary buttons\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #F4F4F4;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Light Ash\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F4F4F4\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Alternate surface, hover states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #171A20;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Carbon Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#171A20\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Dark surface, hero overlays\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: rgba(255,255,255,0.75); border: 1px solid #D0D1D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Frosted Glass\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.75)\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Nav backdrop-filter on scroll\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutrals & Text\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #171A20;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Carbon Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#171A20\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Headings, navigation text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #393C41;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Graphite\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#393C41\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Body text, secondary content\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #5C5E62;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pewter\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#5C5E62\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Tertiary text, sub-links\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #8E8E8E;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Silver Fog\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#8E8E8E\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Placeholders, disabled states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #EEEEEE;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Cloud Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#EEEEEE\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Borders, divider lines\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #D0D1D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pale Silver\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#D0D1D2\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">UI borders, delineation\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Universal Sans Display for heroes, Universal Sans Text for everything else. Only weights 400 and 500. Shown with Inter as the closest available Google Font substitute.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 48px; color: var(--carbon-dark);\">Model Y\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Hero Title — 40px \u002F 500 \u002F 48px line-height \u002F Universal Sans Display\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 22px; font-weight: 400; line-height: 20px; color: var(--pure-white); background: var(--carbon-dark); padding: 12px 16px; border-radius: 4px; display: inline-block;\">0% APR Available\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Promo Text — 22px \u002F 400 \u002F Universal Sans Text \u002F white on dark\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 17px; font-weight: 500; line-height: 20px; color: var(--carbon-dark);\">Model 3\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Product Name — 17px \u002F 500 \u002F 20px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: 16.8px; color: var(--carbon-dark);\">Vehicles   Energy   Charging   Discover   Shop\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav Item — 14px \u002F 500 \u002F 16.8px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--graphite);\">Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Text — 14px \u002F 400 \u002F 20px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--pewter);\">Learn    Order    Experience\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-link — 14px \u002F 400 \u002F 20px line-height \u002F Pewter (#5C5E62)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Barely-rounded rectangles (4px radius). One blue for primary, white for secondary, transparent for nav. No pill shapes, no outlines.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-primary\">Order Now\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--silver-fog); font-family:monospace;\">Primary — bg #3E6AE1, 4px radius, 40px height, 200px width\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-secondary\">View Inventory\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--silver-fog); font-family:monospace;\">Secondary — bg #FFFFFF, 4px radius, 40px height, 160px width\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cbutton class=\"btn-nav\">Vehicles\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-nav\">Energy\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-nav\">Charging\u003C\u002Fbutton>\n    \u003Cspan style=\"font-size:12px; color:var(--silver-fog); font-family:monospace;\">Nav — transparent bg, 4px radius, 32px height\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-text-link\">Learn\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-text-link\">Order\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-text-link\">Experience\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--silver-fog); font-family:monospace;\">Text Link — no bg, Pewter #5C5E62, underline on hover\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Vehicle cards with no borders or shadows. Category cards with full-bleed photography and 12px radius.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Vehicle Cards (Navigation Panel)\u003C\u002Fdiv>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">S\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model S\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">3\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model 3\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">Y\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model Y\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Category Cards (Homepage)\u003C\u002Fdiv>\n  \u003Cdiv style=\"display:grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 32px;\">\n    \u003Cdiv class=\"card-category\" style=\"background: linear-gradient(135deg, #2c3e50, #4a6741);\">\n      \u003Cspan class=\"cat-label\">Sport Sedan\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-category\" style=\"background: linear-gradient(135deg, #34495e, #2c6e49);\">\n      \u003Cspan class=\"cat-label\">Midsize SUV\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Minimal input styling with 4px radius and Pale Silver borders. Focus state triggers Electric Blue border.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter your email\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Focus Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Focused state\" style=\"border-color: var(--electric-blue);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Error Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input error\" type=\"text\" placeholder=\"Error state\" value=\"Invalid entry\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-textarea\" placeholder=\"Ask a question...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit. Extremely restrained spacing tokens — precision over variety.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Button inner padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 32px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Base unit, nav item gap\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 64px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Nav item horizontal padding, card gap\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 96px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Button horizontal padding, category card inner padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 160px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Section horizontal padding, nav horizontal padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">80px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 320px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Section vertical padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">100vh\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 480px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--silver-fog);\">Hero section height — one message per screen\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp and precise. Only 4px for buttons and 12px for category cards.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">0px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Default (most elements)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Category cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 50%;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">50%\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Carousel dots\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" style=\"background: var(--light-ash); margin: 0 auto; max-width: 100%; padding: 80px 40px;\">\n  \u003Cdiv style=\"max-width: 1200px; margin: 0 auto;\">\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Tesla avoids shadows entirely. Depth comes from opacity-based layering and photography-as-depth.\u003C\u002Fp>\n\n    \u003Cdiv class=\"elevation-row\">\n      \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--cloud-gray);\">\n        \u003Cdiv class=\"elevation-name\">Level 0 — Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Default for all elements.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background: rgba(255,255,255,0.75); border: 1px solid var(--pale-silver); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\">\n        \u003Cdiv class=\"elevation-name\">Level 1 — Frost\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Frosted glass. Navigation on scroll.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background: rgba(128,128,128,0.65); color: white;\">\n        \u003Cdiv class=\"elevation-name\" style=\"color: white;\">Level 2 — Overlay\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\" style=\"color: rgba(255,255,255,0.8);\">Modal overlays, popups.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid var(--cloud-gray);\">\n        \u003Cdiv class=\"elevation-name\">Level 3 — Subtle\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Minimal shadow hints on rare hover states.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter>\n  \u003Cp style=\"color: var(--silver-fog); font-size: 12px;\">Design System Inspired by Tesla — Generated from DESIGN.md by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Tesla — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --electric-blue: #3E6AE1;\n    --pure-white: #FFFFFF;\n    --carbon-dark: #171A20;\n    --graphite: #393C41;\n    --pewter: #5C5E62;\n    --silver-fog: #8E8E8E;\n    --cloud-gray: #2A2D33;\n    --pale-silver: #3A3D43;\n    --light-ash: #1E2127;\n    --surface-dark: #0D0F13;\n    --text-primary: #E8E8E8;\n    --text-secondary: #B0B2B5;\n    --text-muted: #8E8E8E;\n    --border-dark: #2A2D33;\n    --font-display: 'Inter', -apple-system, Arial, sans-serif;\n    --font-text: 'Inter', -apple-system, Arial, sans-serif;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    font-family: var(--font-text);\n    background: var(--carbon-dark);\n    color: var(--text-secondary);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.43;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed;\n    top: 16px;\n    right: 16px;\n    z-index: 200;\n    background: var(--electric-blue);\n    color: var(--pure-white);\n    padding: 6px 14px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n  }\n\n  \u002F* NAV *\u002F\n  nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 40px;\n    background: var(--carbon-dark);\n    min-height: 56px;\n    border-bottom: 1px solid var(--border-dark);\n  }\n  .nav-brand {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n    text-decoration: none;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n  }\n  .nav-links {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    list-style: none;\n  }\n  .nav-links a {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n    text-decoration: none;\n    padding: 4px 16px;\n    border-radius: 4px;\n    min-height: 32px;\n    display: inline-flex;\n    align-items: center;\n    transition: color 0.33s, background-color 0.33s;\n  }\n  .nav-links a:hover { background: var(--light-ash); }\n  .nav-cta {\n    background: var(--electric-blue);\n    color: var(--pure-white) !important;\n    padding: 8px 24px;\n    border-radius: 4px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    text-decoration: none;\n    transition: background-color 0.33s;\n    min-height: 40px;\n    display: inline-flex;\n    align-items: center;\n  }\n  .nav-cta:hover { background: #4A78F0; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 80px 40px 60px;\n    background: linear-gradient(180deg, #0a0c10 0%, #12151c 30%, #1a1d25 70%, #171A20 100%);\n    text-align: center;\n    overflow: hidden;\n  }\n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 200px;\n    background: linear-gradient(transparent, rgba(0,0,0,0.2));\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 48px;\n    letter-spacing: normal;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n  }\n  .hero .subtitle {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-muted);\n    margin-bottom: 32px;\n    line-height: 20px;\n  }\n  .hero .promo {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--electric-blue);\n    margin-bottom: 24px;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n  .hero-buttons {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 40px;\n  }\n  .btn-primary {\n    background: var(--electric-blue);\n    color: var(--pure-white);\n    border: 3px solid transparent;\n    border-radius: 4px;\n    padding: 4px 24px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 40px;\n    min-width: 200px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s;\n    text-decoration: none;\n  }\n  .btn-primary:hover { background: #4A78F0; }\n  .btn-secondary {\n    background: var(--light-ash);\n    color: var(--text-primary);\n    border: 3px solid transparent;\n    border-radius: 4px;\n    padding: 4px 24px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 40px;\n    min-width: 160px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: border-color 0.33s, background-color 0.33s, color 0.33s, box-shadow 0.25s;\n    text-decoration: none;\n  }\n  .btn-secondary:hover { background: var(--pale-silver); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 28px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n    line-height: 1.2;\n  }\n  .section-desc {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--text-muted);\n    margin-bottom: 40px;\n    line-height: 20px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-dark);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* 1. COLOR PALETTE *\u002F\n  .color-group-label {\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 16px;\n    margin-top: 24px;\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .color-swatch {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  .color-swatch .swatch-block {\n    height: 80px;\n    border-radius: 4px 4px 0 0;\n  }\n  .color-swatch .swatch-info {\n    padding: 12px;\n    background: var(--light-ash);\n    border: 1px solid var(--border-dark);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n  }\n  .color-swatch .swatch-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 2px;\n  }\n  .color-swatch .swatch-hex {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n    font-family: monospace;\n  }\n  .color-swatch .swatch-role {\n    font-size: 11px;\n    color: var(--pewter);\n    line-height: 1.3;\n  }\n\n  \u002F* 2. TYPOGRAPHY *\u002F\n  .type-sample {\n    margin-bottom: 32px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-dark);\n  }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-size: 12px;\n    font-weight: 400;\n    color: var(--text-muted);\n    margin-top: 8px;\n    font-family: monospace;\n  }\n\n  \u002F* 3. BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 16px;\n  }\n  .btn-nav {\n    background: transparent;\n    color: var(--text-primary);\n    border: none;\n    border-radius: 4px;\n    padding: 4px 16px;\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 500;\n    min-height: 32px;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    transition: color 0.33s, background-color 0.33s;\n  }\n  .btn-nav:hover { background: var(--light-ash); }\n  .btn-text-link {\n    background: none;\n    border: none;\n    color: var(--text-muted);\n    font-family: var(--font-text);\n    font-size: 14px;\n    font-weight: 400;\n    cursor: pointer;\n    padding: 4px 0;\n    transition: box-shadow 0.33s, color 0.33s;\n    text-decoration: none;\n  }\n  .btn-text-link:hover {\n    box-shadow: 0 1px 0 var(--text-muted);\n  }\n\n  \u002F* 4. CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n  .card {\n    background: var(--light-ash);\n    border-radius: 4px;\n    overflow: hidden;\n    border: 1px solid var(--border-dark);\n  }\n  .card-image {\n    height: 200px;\n    background: var(--surface-dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .card-image-placeholder {\n    font-size: 40px;\n    font-weight: 500;\n    color: var(--pale-silver);\n    font-family: var(--font-display);\n  }\n  .card-body {\n    padding: 20px;\n    text-align: center;\n  }\n  .card-title {\n    font-size: 17px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 8px;\n    font-family: var(--font-text);\n  }\n  .card-links {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n  }\n  .card-links a {\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-muted);\n    text-decoration: none;\n    transition: box-shadow 0.33s, color 0.33s;\n  }\n  .card-links a:hover { box-shadow: 0 1px 0 var(--text-muted); }\n\n  .card-category {\n    border-radius: 12px;\n    overflow: hidden;\n    position: relative;\n    height: 180px;\n    display: flex;\n    align-items: flex-start;\n    padding: 24px;\n  }\n  .card-category .cat-label {\n    font-size: 16px;\n    font-weight: 500;\n    color: var(--pure-white);\n    position: relative;\n    z-index: 1;\n  }\n\n  \u002F* 5. FORMS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 24px;\n    margin-bottom: 32px;\n  }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n  }\n  .form-input {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--surface-dark);\n    border: 1px solid var(--pale-silver);\n    border-radius: 4px;\n    padding: 10px 12px;\n    min-height: 40px;\n    outline: none;\n    transition: border-color 0.33s;\n  }\n  .form-input::placeholder { color: var(--pewter); }\n  .form-input:focus { border-color: var(--electric-blue); }\n  .form-input.error { border-color: #E74C3C; }\n  .form-textarea {\n    font-family: var(--font-text);\n    font-size: 14px;\n    color: var(--text-primary);\n    background: var(--surface-dark);\n    border: 1px solid var(--pale-silver);\n    border-radius: 4px;\n    padding: 10px 12px;\n    min-height: 100px;\n    outline: none;\n    resize: vertical;\n    transition: border-color 0.33s;\n  }\n  .form-textarea::placeholder { color: var(--pewter); }\n  .form-textarea:focus { border-color: var(--electric-blue); }\n\n  \u002F* 6. SPACING *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 12px;\n  }\n  .spacing-box {\n    height: 32px;\n    background: var(--electric-blue);\n    border-radius: 4px;\n    opacity: 0.6;\n  }\n  .spacing-label {\n    font-size: 12px;\n    color: var(--text-muted);\n    font-family: monospace;\n    min-width: 80px;\n  }\n\n  \u002F* 7. RADIUS *\u002F\n  .radius-row {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n  .radius-item {\n    text-align: center;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--light-ash);\n    border: 2px solid var(--pale-silver);\n    margin-bottom: 8px;\n  }\n  .radius-value {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-primary);\n    font-family: monospace;\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* 8. ELEVATION *\u002F\n  .elevation-row {\n    display: flex;\n    gap: 32px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n  .elevation-card {\n    width: 200px;\n    padding: 24px;\n    border-radius: 4px;\n    text-align: center;\n    background: var(--light-ash);\n  }\n  .elevation-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n  }\n  .elevation-desc {\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* FOOTER *\u002F\n  footer {\n    padding: 40px;\n    text-align: center;\n    border-top: 1px solid var(--border-dark);\n  }\n  footer p {\n    font-size: 12px;\n    color: var(--pewter);\n  }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 28px; line-height: 36px; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .btn-primary, .btn-secondary { min-width: 240px; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .form-grid { grid-template-columns: 1fr; }\n    .card-grid { grid-template-columns: 1fr; }\n    nav { padding: 12px 20px; }\n    .section { padding: 60px 20px; }\n    .nav-links { display: none; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- DARK MODE BADGE -->\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- NAV -->\n\u003Cnav>\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#\">Vehicles\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Energy\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Charging\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Discover\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Shop\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by Tesla\u003C\u002Fh1>\n  \u003Cp class=\"promo\">Photography-first. Interface-invisible.\u003C\u002Fp>\n  \u003Cp class=\"subtitle\">A visual catalog generated from DESIGN.md — every token, every value, every design decision.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#\" class=\"btn-primary\">Order Now\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-secondary\">View Inventory\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 1. COLOR PALETTE -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Tesla's palette is almost ascetic — one blue, three grays, and white. Every surface is monochrome to let photography dominate.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #3E6AE1;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Electric Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#3E6AE1\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Primary CTA buttons — the only chromatic color\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #FFFFFF;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#FFFFFF\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Background, surfaces, secondary buttons\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Surface & Background\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #F4F4F4;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Light Ash\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#F4F4F4\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Alternate surface, hover states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #171A20;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Carbon Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#171A20\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Dark surface, hero overlays\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: rgba(255,255,255,0.75); border: 1px solid #3A3D43;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Frosted Glass\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">rgba(255,255,255,0.75)\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Nav backdrop-filter on scroll\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutrals & Text\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #171A20;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Carbon Dark\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#171A20\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Headings, navigation text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #393C41;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Graphite\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#393C41\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Body text, secondary content\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #5C5E62;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pewter\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#5C5E62\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Tertiary text, sub-links\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #8E8E8E;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Silver Fog\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#8E8E8E\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Placeholders, disabled states\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #EEEEEE;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Cloud Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#EEEEEE\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">Borders, divider lines\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\n      \u003Cdiv class=\"swatch-block\" style=\"background: #D0D1D2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"swatch-info\">\n        \u003Cdiv class=\"swatch-name\">Pale Silver\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-hex\">#D0D1D2\u003C\u002Fdiv>\n        \u003Cdiv class=\"swatch-role\">UI borders, delineation\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 2. TYPOGRAPHY -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Universal Sans Display for heroes, Universal Sans Text for everything else. Only weights 400 and 500. Shown with Inter as the closest available Google Font substitute.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 48px; color: var(--text-primary);\">Model Y\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Hero Title — 40px \u002F 500 \u002F 48px line-height \u002F Universal Sans Display\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 22px; font-weight: 400; line-height: 20px; color: var(--pure-white); background: var(--surface-dark); padding: 12px 16px; border-radius: 4px; display: inline-block;\">0% APR Available\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Promo Text — 22px \u002F 400 \u002F Universal Sans Text \u002F white on dark\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 17px; font-weight: 500; line-height: 20px; color: var(--text-primary);\">Model 3\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Product Name — 17px \u002F 500 \u002F 20px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: 16.8px; color: var(--text-primary);\">Vehicles   Energy   Charging   Discover   Shop\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Nav Item — 14px \u002F 500 \u002F 16.8px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-secondary);\">Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Body Text — 14px \u002F 400 \u002F 20px line-height \u002F Universal Sans Text\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv style=\"font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted);\">Learn    Order    Experience\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-label\">Sub-link — 14px \u002F 400 \u002F 20px line-height \u002F Pewter (#5C5E62)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 3. BUTTONS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Barely-rounded rectangles (4px radius). One blue for primary, dark surface for secondary, transparent for nav.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-primary\">Order Now\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--text-muted); font-family:monospace;\">Primary — bg #3E6AE1, 4px radius, 40px height, 200px width\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-secondary\">View Inventory\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--text-muted); font-family:monospace;\">Secondary — bg dark surface, 4px radius, 40px height, 160px width\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Cbutton class=\"btn-nav\">Vehicles\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-nav\">Energy\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-nav\">Charging\u003C\u002Fbutton>\n    \u003Cspan style=\"font-size:12px; color:var(--text-muted); font-family:monospace;\">Nav — transparent bg, 4px radius, 32px height\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"button-row\">\n    \u003Ca href=\"#\" class=\"btn-text-link\">Learn\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-text-link\">Order\u003C\u002Fa>\n    \u003Ca href=\"#\" class=\"btn-text-link\">Experience\u003C\u002Fa>\n    \u003Cspan style=\"font-size:12px; color:var(--text-muted); font-family:monospace;\">Text Link — no bg, muted color, underline on hover\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 4. CARDS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Vehicle cards with subtle dark borders. Category cards with full-bleed photography and 12px radius.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group-label\">Vehicle Cards (Navigation Panel)\u003C\u002Fdiv>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">S\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model S\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">3\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model 3\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image\">\n        \u003Cspan class=\"card-image-placeholder\">Y\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Model Y\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-links\">\n          \u003Ca href=\"#\">Learn\u003C\u002Fa>\n          \u003Ca href=\"#\">Order\u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Category Cards (Homepage)\u003C\u002Fdiv>\n  \u003Cdiv style=\"display:grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 32px;\">\n    \u003Cdiv class=\"card-category\" style=\"background: linear-gradient(135deg, #1a2a3a, #2a3a2a);\">\n      \u003Cspan class=\"cat-label\">Sport Sedan\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card-category\" style=\"background: linear-gradient(135deg, #1e2e3e, #1a3a2a);\">\n      \u003Cspan class=\"cat-label\">Midsize SUV\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 5. FORMS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Minimal input styling with 4px radius and dark borders. Focus state triggers Electric Blue border.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Default Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Enter your email\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Focus Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input\" type=\"text\" placeholder=\"Focused state\" style=\"border-color: var(--electric-blue);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Error Input\u003C\u002Flabel>\n      \u003Cinput class=\"form-input error\" type=\"text\" placeholder=\"Error state\" value=\"Invalid entry\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Textarea\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-textarea\" placeholder=\"Ask a question...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 6. SPACING -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit. Extremely restrained spacing tokens — precision over variety.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Button inner padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 32px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Base unit, nav item gap\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 64px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Nav item horizontal padding, card gap\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 96px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Button horizontal padding, category card inner padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 160px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Section horizontal padding, nav horizontal padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">80px\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 320px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Section vertical padding\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-label\">100vh\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-box\" style=\"width: 480px;\">\u003C\u002Fdiv>\n    \u003Cspan style=\"font-size:11px; color:var(--text-muted);\">Hero section height — one message per screen\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 7. BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Sharp and precise. Only 4px for buttons and 12px for category cards.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 0px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">0px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Default (most elements)\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Buttons, inputs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Category cards\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius: 50%;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-value\">50%\u003C\u002Fdiv>\n      \u003Cdiv class=\"radius-context\">Carousel dots\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- 8. ELEVATION -->\n\u003Csection class=\"section\" style=\"background: var(--surface-dark); margin: 0 auto; max-width: 100%; padding: 80px 40px;\">\n  \u003Cdiv style=\"max-width: 1200px; margin: 0 auto;\">\n    \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n    \u003Cp class=\"section-desc\">Tesla avoids shadows entirely. Depth comes from opacity-based layering and photography-as-depth.\u003C\u002Fp>\n\n    \u003Cdiv class=\"elevation-row\">\n      \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-dark);\">\n        \u003Cdiv class=\"elevation-name\">Level 0 — Flat\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">No shadow, no border. Default for all elements.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background: rgba(255,255,255,0.08); border: 1px solid var(--border-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\">\n        \u003Cdiv class=\"elevation-name\">Level 1 — Frost\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Frosted glass. Navigation on scroll.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"background: rgba(128,128,128,0.45);\">\n        \u003Cdiv class=\"elevation-name\">Level 2 — Overlay\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Modal overlays, popups.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 2px 8px rgba(0,0,0,0.3); border: 1px solid var(--border-dark);\">\n        \u003Cdiv class=\"elevation-name\">Level 3 — Subtle\u003C\u002Fdiv>\n        \u003Cdiv class=\"elevation-desc\">Minimal shadow hints on rare hover states.\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter>\n  \u003Cp>Design System Inspired by Tesla — Generated from DESIGN.md by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Tesla Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ftesla\u002FDESIGN.md) extracted from the public [Tesla](https:\u002F\u002Ftesla.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ftesla\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Tesla design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Tesla Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ftesla\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Tesla Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ftesla\u002Fpreview-screenshot.png)\n",{"slug":355,"name":356,"category":45,"designMd":357,"previewHtml":358,"previewDarkHtml":359,"readme":360},"together.ai","Together AI","# Design System Inspiration of Together AI\n\n## 1. Visual Theme & Atmosphere\n\nTogether AI's interface is a pastel-gradient dreamscape built for enterprise AI infrastructure — a design that somehow makes GPU clusters and model inference feel light, airy, and optimistic. The hero section blooms with soft pink-blue-lavender gradients and abstract, painterly illustrations that evoke clouds and flight, establishing a visual metaphor for the \"AI-Native Cloud\" proposition. Against this softness, the typography cuts through with precision: \"The Future\" display font at 64px with aggressive negative tracking (-1.92px) creates dense, authoritative headline blocks.\n\nThe design straddles two worlds: a bright, white-canvas light side where pastel gradients and stats cards create an approachable platform overview, and a dark navy universe (`#010120` — not gray-black but a deep midnight blue) where research papers and technical content live. This dual-world approach elegantly separates the \"business\" messaging (light, friendly, stat-driven) from the \"research\" messaging (dark, serious, academic).\n\nWhat makes Together AI distinctive is its type system. \"The Future\" handles all display and body text with a geometric modernist aesthetic, while \"PP Neue Montreal Mono\" provides uppercase labels with meticulous letter-spacing — creating a \"technical infrastructure company with taste\" personality. The brand accents — magenta (`#ef2cc1`) and orange (`#fc4c02`) — appear sparingly in the gradient and illustrations, never polluting the clean UI.\n\n**Key Characteristics:**\n- Soft pastel gradients (pink, blue, lavender) against pure white canvas\n- Deep midnight blue (`#010120`) for dark\u002Fresearch sections — not gray-black\n- Custom \"The Future\" font with aggressive negative letter-spacing throughout\n- PP Neue Montreal Mono for uppercase technical labels\n- Sharp geometry (4px, 8px radius) — not rounded, not pill\n- Magenta (#ef2cc1) + orange (#fc4c02) brand accents in illustrations only\n- Lavender (#bdbbff) as a soft secondary accent\n- Enterprise stats prominently displayed (2x, 60%, 90%)\n- Dark-blue-tinted shadows (rgba(1, 1, 32, 0.1))\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Brand Magenta** (`#ef2cc1`): The primary brand accent — a vivid pink-magenta used in gradient illustrations and the highest-signal brand moments. Never used as UI chrome.\n- **Brand Orange** (`#fc4c02`): The secondary brand accent — a vivid orange for gradient endpoints and warm accent moments.\n- **Dark Blue** (`#010120`): The primary dark surface — a deep midnight blue-black used for research sections, footer, and dark containers. Not gray, not black — distinctly blue.\n\n### Secondary & Accent\n- **Soft Lavender** (`#bdbbff`): A gentle blue-violet used for subtle accents, secondary indicators, and soft UI highlights.\n- **Black 40** (`#00000066`): Semi-transparent black for de-emphasized overlays and secondary text.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary light-section page background.\n- **Dark Blue** (`#010120`): Dark-section backgrounds — research, footer, technical content.\n- **Glass Light** (`rgba(255, 255, 255, 0.12)`): Frosted glass button backgrounds on dark sections.\n- **Glass Dark** (`rgba(0, 0, 0, 0.08)`): Subtle tinted surfaces on light sections.\n\n### Neutrals & Text\n- **Pure Black** (`#000000`): Primary text on light surfaces.\n- **Pure White** (`#ffffff`): Primary text on dark surfaces.\n- **Black 8%** (`rgba(0, 0, 0, 0.08)`): Borders and subtle containment on light surfaces.\n- **White 12%** (`rgba(255, 255, 255, 0.12)`): Borders and containment on dark surfaces.\n\n### Gradient System\n- **Pastel Cloud Gradient**: Soft pink → lavender → soft blue gradients in hero illustrations. These appear in abstract, painterly forms — clouds, feathers, flowing shapes — that create visual warmth without literal meaning.\n- **Hero Gradient**: The hero background uses soft pastel tints layered over white, creating a dawn-like atmospheric effect.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `The Future`, with fallback: `Arial`\n- **Monospace \u002F Labels**: `PP Neue Montreal Mono`, with fallback: `Georgia`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | The Future | 64px (4rem) | 400–500 | 1.00–1.10 (tight) | -1.92px | Maximum impact, dense blocks |\n| Section Heading | The Future | 40px (2.5rem) | 500 | 1.20 (tight) | -0.8px | Feature section titles |\n| Sub-heading | The Future | 28px (1.75rem) | 500 | 1.15 (tight) | -0.42px | Card headings |\n| Feature Title | The Future | 22px (1.38rem) | 500 | 1.15 (tight) | -0.22px | Small feature headings |\n| Body Large | The Future | 18px (1.13rem) | 400–500 | 1.30 (tight) | -0.18px | Descriptions, sections |\n| Body \u002F Button | The Future | 16px (1rem) | 400–500 | 1.25–1.30 | -0.16px | Standard body, nav, buttons |\n| Caption | The Future | 14px (0.88rem) | 400–500 | 1.40 | normal | Metadata, descriptions |\n| Mono Label | PP Neue Montreal Mono | 16px (1rem) | 500 | 1.00 (tight) | 0.08px | Uppercase section labels |\n| Mono Small | PP Neue Montreal Mono | 11px (0.69rem) | 500 | 1.00–1.40 | 0.055–0.08px | Small uppercase tags |\n| Mono Micro | PP Neue Montreal Mono | 10px (0.63rem) | 400 | 1.40 | 0.05px | Smallest uppercase labels |\n\n### Principles\n- **Negative tracking everywhere**: Every size of \"The Future\" uses negative letter-spacing (-0.16px to -1.92px), creating consistently tight, modern text.\n- **Mono for structure**: PP Neue Montreal Mono in uppercase with positive letter-spacing creates technical \"label\" moments that structure the page without competing with display text.\n- **Weight 500 as emphasis**: The system uses 400 (regular) and 500 (medium) — no bold. Medium weight marks headings and emphasis.\n- **Tight line-heights throughout**: Even body text uses 1.25–1.30 line-height — tighter than typical, creating a dense, information-rich feel.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Glass on Dark**\n- Background: `rgba(255, 255, 255, 0.12)` (frosted glass)\n- Text: Pure White (`#ffffff`)\n- Radius: sharp (4px)\n- Opacity: 0.5\n- Hover: transparent dark overlay\n- Used on dark sections — subtle, glass-like\n\n**Dark Solid**\n- Background: Dark Blue (`#010120`) or Pure Black\n- Text: Pure White\n- Radius: sharp (4px)\n- The primary CTA on light surfaces\n\n**Outlined Light**\n- Border: `1px solid rgba(0, 0, 0, 0.08)`\n- Background: transparent or subtle glass\n- Text: Pure Black\n- Radius: sharp (4px)\n- Secondary actions on light surfaces\n\n### Cards & Containers\n- Background: Pure White or subtle glass tint\n- Border: `1px solid rgba(0, 0, 0, 0.08)` on light; `1px solid rgba(255, 255, 255, 0.12)` on dark\n- Radius: sharp (4px) for badges and small elements; comfortable (8px) for larger containers\n- Shadow: dark-blue-tinted (`rgba(1, 1, 32, 0.1) 0px 4px 10px`) — warm and subtle\n- Stats cards with large numbers prominently displayed\n\n### Badges \u002F Tags\n- Background: `rgba(0, 0, 0, 0.04)` (light) or `rgba(255, 255, 255, 0.12)` (dark)\n- Text: Black (light) or White (dark)\n- Padding: 2px 8px (compact)\n- Radius: sharp (4px)\n- Border: `1px solid rgba(0, 0, 0, 0.08)`\n- PP Neue Montreal Mono, uppercase, 16px\n\n### Navigation\n- Clean horizontal nav on white\u002Ftransparent\n- Logo: Together AI wordmark\n- Links: The Future at 16px, weight 400\n- CTA: Dark solid button\n- Hover: no text-decoration\n\n### Image Treatment\n- Abstract pastel gradient illustrations (cloud\u002Ffeather forms)\n- Product UI screenshots on dark\u002Flight surfaces\n- Team photos in editorial style\n- Research paper cards with dark backgrounds\n\n### Distinctive Components\n\n**Stats Bar**\n- Large performance metrics (2x, 60%, 90%)\n- Bold display numbers\n- Short descriptive captions beneath\n- Clean horizontal layout\n\n**Mono Section Labels**\n- PP Neue Montreal Mono, uppercase, 11px, letter-spacing 0.055px\n- Used as navigational signposts throughout the page\n- Technical, structured feel\n\n**Research Section**\n- Dark Blue (#010120) background\n- White text, research paper thumbnails\n- Creates a distinct \"academic\" zone\n\n**Large Footer Logo**\n- \"together\" wordmark rendered at massive scale in the dark footer\n- Creates a brand-statement closing moment\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 80px, 100px, 120px\n- Button\u002Fbadge padding: 2px 8px (compact)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (80–120px)\n\n### Grid & Container\n- Max container width: approximately 1200px, centered\n- Hero: centered with pastel gradient background\n- Feature sections: multi-column card grids\n- Stats: horizontal row of metric cards\n- Research: dark full-width section\n\n### Whitespace Philosophy\n- **Optimistic breathing room**: Generous spacing between sections creates an open, inviting feel that makes enterprise AI infrastructure feel accessible.\n- **Dual atmosphere**: Light sections breathe with whitespace; dark sections are denser with content.\n- **Stats as visual anchors**: Large numbers with small captions create natural focal points.\n\n### Border Radius Scale\n- Sharp (4px): Buttons, badges, tags, small interactive elements — the primary radius\n- Comfortable (8px): Larger containers, feature cards\n\n*This is a deliberately restrained radius system — no pills, no generous rounding. The sharp geometry contrasts with the soft pastel gradients.*\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Contained (Level 1) | `1px solid rgba(0,0,0,0.08)` (light) or `rgba(255,255,255,0.12)` (dark) | Cards, badges, containers |\n| Elevated (Level 2) | `rgba(1, 1, 32, 0.1) 0px 4px 10px` | Feature cards, hover states |\n| Dark Zone (Level 3) | Dark Blue (#010120) full-width background | Research, footer, technical sections |\n\n**Shadow Philosophy**: Together AI uses a single, distinctive shadow — tinted with Dark Blue (`rgba(1, 1, 32, 0.1)`) rather than generic black. This gives elevated elements a subtle blue-ish cast that ties them to the brand's midnight-blue dark mode. The shadow is soft (10px blur, 4px offset) and always downward — creating gentle paper-hover elevation.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pastel gradients (pink\u002Fblue\u002Flavender) for hero illustrations and decorative backgrounds\n- Use Dark Blue (#010120) for dark sections — never generic gray-black\n- Apply negative letter-spacing on all \"The Future\" text (scaled by size)\n- Use PP Neue Montreal Mono in uppercase for section labels and technical markers\n- Keep border-radius sharp (4px) for badges and interactive elements\n- Use the dark-blue-tinted shadow for elevation\n- Maintain the light\u002Fdark section duality — business (light) vs research (dark)\n- Show enterprise stats prominently with large display numbers\n\n### Don't\n- Don't use Brand Magenta (#ef2cc1) or Brand Orange (#fc4c02) as UI colors — they're for illustrations only\n- Don't use pill-shaped or generously rounded corners — the geometry is sharp\n- Don't use generic gray-black for dark sections — always Dark Blue (#010120)\n- Don't use positive letter-spacing on \"The Future\" — it's always negative\n- Don't use bold (700+) weight — 400–500 is the full range\n- Don't use warm-toned shadows — always dark-blue-tinted\n- Don't reduce section spacing below 48px — the open feeling is core\n- Don't mix in additional typefaces — \"The Future\" + PP Neue Montreal Mono is the pair\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C479px | Compact layout, stacked everything |\n| Large Mobile | 479–767px | Single column, hamburger nav |\n| Tablet | 768–991px | 2-column grids begin |\n| Desktop | 992px+ | Full multi-column layout |\n\n### Touch Targets\n- Buttons with adequate padding\n- Card surfaces as touch targets\n- Navigation links at comfortable 16px\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger on mobile\n- **Hero text**: 64px → 40px → 28px progressive scaling\n- **Stats bar**: Horizontal → stacked vertical\n- **Feature grids**: Multi-column → single column\n- **Research section**: Cards stack vertically\n\n### Image Behavior\n- Pastel illustrations scale proportionally\n- Product screenshots maintain aspect ratio\n- Team photos scale within containers\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text (light): \"Pure Black (#000000)\"\n- Primary Text (dark): \"Pure White (#ffffff)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Dark Surface: \"Dark Blue (#010120)\"\n- Brand Accent 1: \"Brand Magenta (#ef2cc1)\"\n- Brand Accent 2: \"Brand Orange (#fc4c02)\"\n- Soft Accent: \"Soft Lavender (#bdbbff)\"\n- Border (light): \"rgba(0, 0, 0, 0.08)\"\n\n### Example Component Prompts\n- \"Create a hero section on white with soft pastel gradients (pink → lavender → blue) as background. Headline at 64px 'The Future' weight 500, line-height 1.10, letter-spacing -1.92px. Pure Black text. Include a dark blue CTA button (#010120, 4px radius).\"\n- \"Design a stats card: large display number (64px, weight 500) with a small caption below (14px). White background, 8px radius, dark-blue-tinted shadow (rgba(1, 1, 32, 0.1) 0px 4px 10px).\"\n- \"Build a section label: PP Neue Montreal Mono, 11px, weight 500, uppercase, letter-spacing 0.055px. Black text on light, white on dark.\"\n- \"Create a dark research section: Dark Blue (#010120) background. White text, section heading at 40px 'The Future' weight 500, letter-spacing -0.8px. Cards with rgba(255, 255, 255, 0.12) border.\"\n- \"Design a badge: 4px radius, rgba(0, 0, 0, 0.04) background, 1px solid rgba(0, 0, 0, 0.08) border, 'The Future' 16px text. Padding: 2px 8px.\"\n\n### Iteration Guide\n1. Always specify negative letter-spacing for \"The Future\" — it's scaled by size\n2. Dark sections use #010120 (midnight blue), never generic black\n3. Shadows are always dark-blue-tinted: rgba(1, 1, 32, 0.1)\n4. Mono labels are always uppercase with positive letter-spacing\n5. Keep radius sharp (4px or 8px) — no pills, no generous rounding\n6. Pastel gradients are for decoration, not UI chrome\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Together AI (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-brand-magenta: #ef2cc1;\n    --color-brand-orange: #fc4c02;\n    --color-dark-blue: #010120;\n    --color-soft-lavender: #bdbbff;\n    --color-black-40: #00000066;\n    --color-white: #ffffff;\n    --color-black: #000000;\n    --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;\n    --font-mono: 'Space Mono', 'Courier New', Consolas, monospace;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-nav: rgba(255,255,255,0.95);\n    --text-primary: #000000;\n    --text-secondary: #00000066;\n    --text-muted: #00000066;\n    --border-color: rgba(0,0,0,0.08);\n    --border-subtle: rgba(0,0,0,0.08);\n    --glass-bg: rgba(0,0,0,0.08);\n    --badge-bg: rgba(0,0,0,0.04);\n    --shadow-card: rgba(1, 1, 32, 0.1) 0px 4px 10px;\n    --section-label-color: var(--color-black);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.30;\n    letter-spacing: -0.16px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.18px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .nav-brand .logo-dot {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--color-brand-magenta), var(--color-brand-orange));\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    transition: opacity 0.2s;\n  }\n  .nav-links a:hover { opacity: 0.6; }\n  .nav-cta {\n    background: var(--color-dark-blue);\n    color: var(--color-white);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(180deg,\n      rgba(239,44,193,0.08) 0%,\n      rgba(189,187,255,0.12) 35%,\n      rgba(130,170,255,0.08) 65%,\n      rgba(255,255,255,0) 100%\n    );\n    pointer-events: none;\n  }\n  .hero-gradient-orb {\n    position: absolute;\n    top: -60px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 800px;\n    height: 500px;\n    background: radial-gradient(ellipse at center,\n      rgba(239,44,193,0.10) 0%,\n      rgba(189,187,255,0.15) 30%,\n      rgba(130,170,255,0.08) 60%,\n      transparent 80%\n    );\n    filter: blur(40px);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: -1.92px;\n    margin-bottom: 24px;\n    position: relative;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.30;\n    letter-spacing: -0.18px;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-dark-solid {\n    background: var(--color-dark-blue);\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n  .btn-outlined {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n\n  \u002F* MONO LABEL *\u002F\n  .mono-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-secondary);\n    margin-bottom: 12px;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-secondary);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: -0.8px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-display);\n    font-size: 22px;\n    font-weight: 500;\n    line-height: 1.15;\n    letter-spacing: -0.22px;\n    margin-bottom: 20px;\n    color: var(--text-primary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name {\n    font-family: var(--font-display);\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: -0.13px;\n    margin-bottom: 2px;\n  }\n  .color-swatch-hex {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n  }\n  .color-swatch-role {\n    font-family: var(--font-display);\n    font-size: 12px;\n    color: var(--text-muted);\n    line-height: 1.4;\n    letter-spacing: -0.12px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n  }\n  .btn-glass-dark {\n    background: rgba(255,255,255,0.12);\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n  .btn-glass-dark-wrapper {\n    background: var(--color-dark-blue);\n    display: inline-block;\n    padding: 16px;\n    border-radius: 8px;\n  }\n\n  \u002F* BADGE *\u002F\n  .badge {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 16px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: var(--badge-bg);\n    border: 1px solid var(--border-color);\n    color: var(--text-primary);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-bordered {\n    border: 1px solid var(--border-color);\n  }\n  .card-elevated {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--shadow-card);\n  }\n  .card-stat {\n    border: 1px solid var(--border-color);\n    text-align: center;\n    padding: 32px 24px;\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 22px;\n    font-weight: 500;\n    line-height: 1.15;\n    letter-spacing: -0.22px;\n    margin-bottom: 12px;\n  }\n  .card p {\n    color: var(--text-secondary);\n    font-size: 16px;\n    line-height: 1.30;\n    letter-spacing: -0.16px;\n  }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n  .stat-number {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: -1.92px;\n    margin-bottom: 8px;\n  }\n  .stat-caption {\n    font-family: var(--font-display);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    line-height: 1.40;\n  }\n\n  \u002F* DARK ZONE CARD PREVIEW *\u002F\n  .dark-zone-preview {\n    background: var(--color-dark-blue);\n    border-radius: 8px;\n    padding: 32px;\n    margin-top: 24px;\n  }\n  .dark-zone-preview .card {\n    background: transparent;\n    border: 1px solid rgba(255,255,255,0.12);\n    color: #ffffff;\n  }\n  .dark-zone-preview .card h3 { color: #ffffff; }\n  .dark-zone-preview .card p { color: rgba(255,255,255,0.6); }\n  .dark-zone-preview .card-label { color: rgba(255,255,255,0.5); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(189,187,255,0.2);\n    border: 1px solid rgba(189,187,255,0.5);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--border-color); }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }\n  .elevation-dark-zone {\n    background: var(--color-dark-blue);\n    color: var(--color-white);\n    border: none;\n  }\n  .elevation-dark-zone .elevation-name,\n  .elevation-dark-zone .elevation-desc { color: var(--color-white); }\n  .elevation-dark-zone .elevation-desc { opacity: 0.6; }\n  .elevation-dark-zone .elevation-level { color: var(--color-soft-lavender); }\n  .elevation-name {\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    margin-bottom: 8px;\n  }\n  .elevation-desc {\n    font-size: 13px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    letter-spacing: -0.13px;\n  }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 40px; letter-spacing: -1.2px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; letter-spacing: -0.42px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cdiv class=\"logo-dot\">\u003C\u002Fdiv> Together AI\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-gradient-orb\">\u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>Together AI\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-dark-solid\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-outlined\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary Brand\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ef2cc1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Brand Magenta\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ef2cc1\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient illustrations only, never UI chrome\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fc4c02;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Brand Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fc4c02\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient endpoints, warm accent moments\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #010120; border-bottom: 1px solid rgba(255,255,255,0.12);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#010120\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark surface, research sections, footer\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #bdbbff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Soft Lavender\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#bdbbff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle accents, secondary indicators, highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00000066;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Black 40\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00000066\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized overlays, secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary light-section page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #010120; border-bottom: 1px solid rgba(255,255,255,0.12);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#010120\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Research, footer, technical sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.12); border: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Frosted glass button backgrounds on dark\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle tinted surfaces on light sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Black 8%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.12); border: 1px solid rgba(0,0,0,0.08);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">White 12%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Gradient System\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\" style=\"grid-column: span 2;\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: linear-gradient(135deg, rgba(239,44,193,0.3), rgba(189,187,255,0.4), rgba(130,170,255,0.3)); height: 100px;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pastel Cloud Gradient\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">pink -> lavender -> blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hero illustrations, decorative backgrounds, abstract forms\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.10; letter-spacing: -1.92px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 64px \u002F 500 \u002F 1.10 \u002F -1.92px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.20; letter-spacing: -0.8px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 40px \u002F 500 \u002F 1.20 \u002F -0.8px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.42px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 28px \u002F 500 \u002F 1.15 \u002F -0.42px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.22px;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 22px \u002F 500 \u002F 1.15 \u002F -0.22px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.30; letter-spacing: -0.18px;\">Body large text for descriptions and section introductions. The Future provides geometric modernist aesthetic for all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large -- 18px \u002F 400 \u002F 1.30 \u002F -0.18px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.30; letter-spacing: -0.16px;\">Standard body text for paragraphs, navigation links, and button labels. Tight line-height creates dense, information-rich layouts.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F 400 \u002F 1.30 \u002F -0.16px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption -- 14px \u002F 400 \u002F 1.40 \u002F normal -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 1.00; letter-spacing: 0.08px; text-transform: uppercase;\">MONO SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Label -- 16px \u002F 500 \u002F 1.00 \u002F 0.08px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.40; letter-spacing: 0.055px; text-transform: uppercase; color: var(--text-muted);\">MONO SMALL UPPERCASE TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Small -- 11px \u002F 500 \u002F 1.40 \u002F 0.055px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.40; letter-spacing: 0.05px; text-transform: uppercase; color: var(--text-muted);\">MONO MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Micro -- 10px \u002F 400 \u002F 1.40 \u002F 0.05px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-solid\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Dark Solid CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-outlined\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outlined Light\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cdiv class=\"btn-glass-dark-wrapper\">\n        \u003Cbutton class=\"btn-glass-dark\">Explore\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"button-demo-label\">Glass on Dark\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cspan class=\"badge\">INFERENCE\u003C\u002Fspan>\n      \u003Cdiv class=\"button-demo-label\">Badge \u002F Tag\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Stats bar preview -->\n  \u003Cdiv style=\"margin-top: 48px;\">\n    \u003Cdiv class=\"section-title\">Stats Bar\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-grid\" style=\"grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px;\">\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">2x\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">Faster inference speed\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">60%\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">Cost reduction\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">90%\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">GPU utilization\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">CONTAINED\u003C\u002Fdiv>\n      \u003Ch3>Standard Card\u003C\u002Fh3>\n      \u003Cp>Content card with 1px solid rgba(0,0,0,0.08) border and 8px radius. The default container for features and content sections on light surfaces.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">ELEVATED\u003C\u002Fdiv>\n      \u003Ch3>Shadow Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with dark-blue-tinted shadow (rgba(1,1,32,0.1) 0px 4px 10px). Used for feature cards and hover states. Subtle blue-ish cast.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-bordered\" style=\"border-color: var(--color-soft-lavender);\">\n      \u003Cdiv class=\"card-label\" style=\"color: var(--color-soft-lavender);\">ACCENT\u003C\u002Fdiv>\n      \u003Ch3>Lavender Accent\u003C\u002Fh3>\n      \u003Cp>Card with soft lavender border accent. Used for highlighted or selected content where a gentle visual distinction is needed.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"dark-zone-preview\">\n    \u003Cdiv class=\"section-title\" style=\"color: rgba(255,255,255,0.5);\">DARK ZONE CARDS\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-grid\" style=\"margin-top: 16px;\">\n      \u003Cdiv class=\"card card-bordered\">\n        \u003Cdiv class=\"card-label\">RESEARCH\u003C\u002Fdiv>\n        \u003Ch3>Research Paper\u003C\u002Fh3>\n        \u003Cp>Card on Dark Blue (#010120) surface with rgba(255,255,255,0.12) border. Used in research and technical content sections.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card card-bordered\">\n        \u003Cdiv class=\"card-label\">TECHNICAL\u003C\u002Fdiv>\n        \u003Ch3>Technical Content\u003C\u002Fh3>\n        \u003Cp>The dark zone creates a distinct academic atmosphere, separating research messaging from the bright business sections.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;\">Base unit: 8px. Scale: 1px to 120px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 176px; height: 176px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;\">Deliberately restrained: only 4px and 8px. No pills, no generous rounding.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, badges, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid rgba(0,0,0,0.08) on light or rgba(255,255,255,0.12) on dark. Cards, badges, containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark-blue-tinted shadow: rgba(1,1,32,0.1) 0px 4px 10px. Feature cards and hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dark-zone\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Dark Zone\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark Blue (#010120) full-width background. Research, footer, technical sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Together AI (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-brand-magenta: #ef2cc1;\n    --color-brand-orange: #fc4c02;\n    --color-dark-blue: #010120;\n    --color-soft-lavender: #bdbbff;\n    --color-black-40: #00000066;\n    --color-white: #ffffff;\n    --color-black: #000000;\n    --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;\n    --font-mono: 'Space Mono', 'Courier New', Consolas, monospace;\n    \u002F* Dark mode tokens -- midnight blue, NOT gray-black *\u002F\n    --bg-page: #010120;\n    --bg-card: #010120;\n    --bg-nav: rgba(1,1,32,0.95);\n    --text-primary: #ffffff;\n    --text-secondary: rgba(255,255,255,0.6);\n    --text-muted: rgba(255,255,255,0.5);\n    --border-color: rgba(255,255,255,0.12);\n    --border-subtle: rgba(255,255,255,0.08);\n    --glass-bg: rgba(255,255,255,0.12);\n    --badge-bg: rgba(255,255,255,0.12);\n    --shadow-card: rgba(1, 1, 32, 0.4) 0px 4px 10px;\n    --section-label-color: rgba(255,255,255,0.5);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.30;\n    letter-spacing: -0.16px;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 500;\n    letter-spacing: -0.18px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-primary);\n  }\n  .nav-brand .logo-dot {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--color-brand-magenta), var(--color-brand-orange));\n  }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a {\n    color: var(--text-primary);\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    transition: opacity 0.2s;\n  }\n  .nav-links a:hover { opacity: 0.6; }\n  .nav-cta {\n    background: var(--glass-bg);\n    color: var(--color-white);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(180deg,\n      rgba(239,44,193,0.12) 0%,\n      rgba(189,187,255,0.10) 35%,\n      rgba(130,170,255,0.06) 65%,\n      rgba(1,1,32,0) 100%\n    );\n    pointer-events: none;\n  }\n  .hero-gradient-orb {\n    position: absolute;\n    top: -60px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 800px;\n    height: 500px;\n    background: radial-gradient(ellipse at center,\n      rgba(239,44,193,0.15) 0%,\n      rgba(189,187,255,0.12) 30%,\n      rgba(130,170,255,0.06) 60%,\n      transparent 80%\n    );\n    filter: blur(50px);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: -1.92px;\n    margin-bottom: 24px;\n    position: relative;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 1.30;\n    letter-spacing: -0.18px;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-glass {\n    background: var(--glass-bg);\n    color: var(--color-white);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n  .btn-outlined {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 400;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n\n  \u002F* MONO LABEL *\u002F\n  .mono-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-muted);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-display);\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 1.20;\n    letter-spacing: -0.8px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-family: var(--font-display);\n    font-size: 22px;\n    font-weight: 500;\n    line-height: 1.15;\n    letter-spacing: -0.22px;\n    margin-bottom: 20px;\n    color: var(--text-primary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: rgba(255,255,255,0.04);\n  }\n  .color-swatch-name {\n    font-family: var(--font-display);\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: -0.13px;\n    margin-bottom: 2px;\n    color: var(--text-primary);\n  }\n  .color-swatch-hex {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n  }\n  .color-swatch-role {\n    font-family: var(--font-display);\n    font-size: 12px;\n    color: var(--text-muted);\n    line-height: 1.4;\n    letter-spacing: -0.12px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n  }\n  .btn-dark-solid {\n    background: var(--color-white);\n    color: var(--color-dark-blue);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 4px;\n    font-size: 16px;\n    font-family: var(--font-display);\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    cursor: pointer;\n  }\n\n  \u002F* BADGE *\u002F\n  .badge {\n    display: inline-block;\n    font-family: var(--font-mono);\n    font-size: 16px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: var(--badge-bg);\n    border: 1px solid var(--border-color);\n    color: var(--text-primary);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-bordered {\n    border: 1px solid var(--border-color);\n  }\n  .card-elevated {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--shadow-card);\n  }\n  .card-stat {\n    border: 1px solid var(--border-color);\n    text-align: center;\n    padding: 32px 24px;\n  }\n  .card h3 {\n    font-family: var(--font-display);\n    font-size: 22px;\n    font-weight: 500;\n    line-height: 1.15;\n    letter-spacing: -0.22px;\n    margin-bottom: 12px;\n    color: var(--text-primary);\n  }\n  .card p {\n    color: var(--text-secondary);\n    font-size: 16px;\n    line-height: 1.30;\n    letter-spacing: -0.16px;\n  }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    color: var(--text-muted);\n    margin-bottom: 16px;\n  }\n  .stat-number {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 500;\n    line-height: 1.10;\n    letter-spacing: -1.92px;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n  .stat-caption {\n    font-family: var(--font-display);\n    font-size: 14px;\n    font-weight: 400;\n    color: var(--text-secondary);\n    line-height: 1.40;\n  }\n\n  \u002F* LIGHT ZONE CARD PREVIEW *\u002F\n  .light-zone-preview {\n    background: #ffffff;\n    border-radius: 8px;\n    padding: 32px;\n    margin-top: 24px;\n  }\n  .light-zone-preview .card {\n    background: #ffffff;\n    border: 1px solid rgba(0,0,0,0.08);\n    color: #000000;\n  }\n  .light-zone-preview .card h3 { color: #000000; }\n  .light-zone-preview .card p { color: #00000066; }\n  .light-zone-preview .card-label { color: #00000066; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(189,187,255,0.15);\n    border: 1px solid rgba(189,187,255,0.35);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--border-color); }\n  .elevation-elevated { border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }\n  .elevation-light-zone {\n    background: #ffffff;\n    color: #000000;\n    border: none;\n  }\n  .elevation-light-zone .elevation-name { color: #000000; }\n  .elevation-light-zone .elevation-desc { color: #00000066; }\n  .elevation-light-zone .elevation-level { color: #00000066; }\n  .elevation-name {\n    font-family: var(--font-display);\n    font-size: 16px;\n    font-weight: 500;\n    letter-spacing: -0.16px;\n    margin-bottom: 8px;\n  }\n  .elevation-desc {\n    font-size: 13px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    letter-spacing: -0.13px;\n  }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.055px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 40px; letter-spacing: -1.2px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; letter-spacing: -0.42px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cdiv class=\"logo-dot\">\u003C\u002Fdiv> Together AI\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Cdiv class=\"hero-gradient-orb\">\u003C\u002Fdiv>\n  \u003Ch1>Design System Preview:\u003Cbr>Together AI\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-glass\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-outlined\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary Brand\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ef2cc1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Brand Magenta\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ef2cc1\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient illustrations only, never UI chrome\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fc4c02;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Brand Orange\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fc4c02\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Gradient endpoints, warm accent moments\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #010120; border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#010120\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Dark surface, research sections, footer\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #bdbbff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Soft Lavender\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#bdbbff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle accents, secondary indicators, highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00000066;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Black 40\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00000066\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">De-emphasized overlays, secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary light-section page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #010120; border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Dark Blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#010120\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Research, footer, technical sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Light\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Frosted glass button backgrounds on dark\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Glass Dark\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle tinted surfaces on light sections\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #000000;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffffff;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Black 8%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(0,0,0,0.08)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders on light surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">White 12%\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.12)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Gradient System\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\" style=\"grid-column: span 2;\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: linear-gradient(135deg, rgba(239,44,193,0.4), rgba(189,187,255,0.4), rgba(130,170,255,0.3)); height: 100px;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Pastel Cloud Gradient\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">pink -> lavender -> blue\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Hero illustrations, decorative backgrounds, abstract forms\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 64px; font-weight: 500; line-height: 1.10; letter-spacing: -1.92px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero -- 64px \u002F 500 \u002F 1.10 \u002F -1.92px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.20; letter-spacing: -0.8px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading -- 40px \u002F 500 \u002F 1.20 \u002F -0.8px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.42px;\">Sub-heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading -- 28px \u002F 500 \u002F 1.15 \u002F -0.42px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.22px;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title -- 22px \u002F 500 \u002F 1.15 \u002F -0.22px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.30; letter-spacing: -0.18px;\">Body large text for descriptions and section introductions. The Future provides geometric modernist aesthetic for all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body Large -- 18px \u002F 400 \u002F 1.30 \u002F -0.18px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.30; letter-spacing: -0.16px;\">Standard body text for paragraphs, navigation links, and button labels. Tight line-height creates dense, information-rich layouts.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button -- 16px \u002F 400 \u002F 1.30 \u002F -0.16px -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-display); font-size: 14px; font-weight: 400; line-height: 1.40; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption -- 14px \u002F 400 \u002F 1.40 \u002F normal -- \"The Future\" (system-ui)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 1.00; letter-spacing: 0.08px; text-transform: uppercase;\">MONO SECTION LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Label -- 16px \u002F 500 \u002F 1.00 \u002F 0.08px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.40; letter-spacing: 0.055px; text-transform: uppercase; color: var(--text-muted);\">MONO SMALL UPPERCASE TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Small -- 11px \u002F 500 \u002F 1.40 \u002F 0.055px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.40; letter-spacing: 0.05px; text-transform: uppercase; color: var(--text-muted);\">MONO MICRO LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Mono Micro -- 10px \u002F 400 \u002F 1.40 \u002F 0.05px \u002F uppercase -- \"PP Neue Montreal Mono\" (Space Mono)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-glass\">Explore\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Glass on Dark\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-dark-solid\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Inverted Solid\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-outlined\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Outlined\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cspan class=\"badge\">INFERENCE\u003C\u002Fspan>\n      \u003Cdiv class=\"button-demo-label\">Badge \u002F Tag\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Stats bar preview -->\n  \u003Cdiv style=\"margin-top: 48px;\">\n    \u003Cdiv class=\"section-title\">Stats Bar\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-grid\" style=\"grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px;\">\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">2x\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">Faster inference speed\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">60%\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">Cost reduction\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card card-stat\">\n        \u003Cdiv class=\"stat-number\">90%\u003C\u002Fdiv>\n        \u003Cdiv class=\"stat-caption\">GPU utilization\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-bordered\">\n      \u003Cdiv class=\"card-label\">CONTAINED\u003C\u002Fdiv>\n      \u003Ch3>Standard Card\u003C\u002Fh3>\n      \u003Cp>Content card with 1px solid rgba(255,255,255,0.12) border and 8px radius. The default container for research and technical content on dark surfaces.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-elevated\">\n      \u003Cdiv class=\"card-label\">ELEVATED\u003C\u002Fdiv>\n      \u003Ch3>Shadow Card\u003C\u002Fh3>\n      \u003Cp>Elevated card with dark-blue-tinted shadow. Subtle blue-ish cast ties elevated elements to the midnight-blue dark mode.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-bordered\" style=\"border-color: var(--color-soft-lavender);\">\n      \u003Cdiv class=\"card-label\" style=\"color: var(--color-soft-lavender);\">ACCENT\u003C\u002Fdiv>\n      \u003Ch3>Lavender Accent\u003C\u002Fh3>\n      \u003Cp>Card with soft lavender border accent. Used for highlighted or selected content where a gentle visual distinction is needed.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"light-zone-preview\">\n    \u003Cdiv class=\"section-title\" style=\"color: #00000066;\">LIGHT ZONE CARDS\u003C\u002Fdiv>\n    \u003Cdiv class=\"card-grid\" style=\"margin-top: 16px;\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-label\">BUSINESS\u003C\u002Fdiv>\n        \u003Ch3>Platform Feature\u003C\u002Fh3>\n        \u003Cp>Card on white surface with rgba(0,0,0,0.08) border. Used in bright business sections for approachable platform overview.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-label\">FEATURE\u003C\u002Fdiv>\n        \u003Ch3>Product Overview\u003C\u002Fh3>\n        \u003Cp>The light zone creates an open, inviting feel that makes enterprise AI infrastructure feel accessible and friendly.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;\">Base unit: 8px. Scale: 1px to 120px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 4px; height: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 176px; height: 176px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">44px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px; font-size: 18px; letter-spacing: -0.18px;\">Deliberately restrained: only 4px and 8px. No pills, no generous rounding.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons, badges, tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards, containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and text blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid rgba(255,255,255,0.12) on dark or rgba(0,0,0,0.08) on light. Cards, badges, containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-elevated\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Elevated\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Dark-blue-tinted shadow: rgba(1,1,32,0.1) 0px 4px 10px. Feature cards and hover states.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-light-zone\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Light Zone\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Pure White (#ffffff) full-width background. Business, platform, stats sections.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">LEVEL 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","# Together AI Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ftogether.ai\u002FDESIGN.md) extracted from the public [Together](https:\u002F\u002Ftogether.ai\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Ftogether.ai\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Together AI design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Together AI Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ftogether.ai\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Together AI Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Ftogether.ai\u002Fpreview-screenshot.png)\n",{"slug":362,"name":363,"category":7,"designMd":364,"previewHtml":365,"previewDarkHtml":366,"readme":367},"uber","Uber","# Design System Inspiration of Uber\n\n## 1. Visual Theme & Atmosphere\n\nUber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience is built on a stark duality: jet black (`#000000`) and pure white (`#ffffff`), with virtually no mid-tone grays diluting the message. This isn't the sterile minimalism of a startup that hasn't finished designing -- it's the deliberate restraint of a brand so established it can afford to whisper.\n\nThe signature typeface, UberMove, is a proprietary geometric sans-serif with a distinctly square, engineered quality. Headlines in UberMove Bold at 52px carry the weight of a billboard -- authoritative, direct, unapologetic. The companion face UberMoveText handles body copy and buttons with a slightly softer, more readable character at medium weight (500). Together, they create a typographic system that feels like a transit map: clear, efficient, built for scanning at speed.\n\nWhat makes Uber's design truly distinctive is its use of full-bleed photography and illustration paired with pill-shaped interactive elements (999px border-radius). Navigation chips, CTA buttons, and category selectors all share this capsule shape, creating a tactile, thumb-friendly interface language that's unmistakably Uber. The illustrations -- warm, slightly stylized scenes of drivers, riders, and cityscapes -- inject humanity into what could otherwise be a cold, monochrome system. The site alternates between white content sections and a full-black footer, with card-based layouts using the gentlest possible shadows (rgba(0,0,0,0.12-0.16)) to create subtle lift without breaking the flat aesthetic.\n\n**Key Characteristics:**\n- Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome\n- UberMove (headlines) + UberMoveText (body\u002FUI) -- proprietary geometric sans-serif family\n- Pill-shaped everything: buttons, chips, nav items all use 999px border-radius\n- Warm, human illustrations contrasting the stark monochrome interface\n- Card-based layout with whisper-soft shadows (0.12-0.16 opacity)\n- 8px spacing grid with compact, information-dense layouts\n- Bold photography integrated as full-bleed hero backgrounds\n- Black footer anchoring the page with a dark, high-contrast environment\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Uber Black** (`#000000`): The defining brand color -- used for primary buttons, headlines, navigation text, and the footer. Not \"near-black\" or \"off-black,\" but true, uncompromising black.\n- **Pure White** (`#ffffff`): The primary surface color and inverse text. Used for page backgrounds, card surfaces, and text on black elements.\n\n### Interactive & Button States\n- **Hover Gray** (`#e2e2e2`): White button hover state -- a clean, cool light gray that provides clear feedback without warmth.\n- **Hover Light** (`#f3f3f3`): Subtle hover for elevated white buttons -- barely-there gray for gentle interaction feedback.\n- **Chip Gray** (`#efefef`): Background for secondary\u002Ffilter buttons and navigation chips -- a neutral, ultra-light gray.\n\n### Text & Content\n- **Body Gray** (`#4b4b4b`): Secondary text and footer links -- a true mid-gray with no warm or cool bias.\n- **Muted Gray** (`#afafaf`): Tertiary text, de-emphasized footer links, and placeholder content.\n\n### Borders & Separation\n- **Border Black** (`#000000`): Thin 1px borders for structural containment -- used sparingly on dividers and form containers.\n\n### Shadows & Depth\n- **Shadow Light** (`rgba(0, 0, 0, 0.12)`): Standard card elevation -- a featherweight lift for content cards.\n- **Shadow Medium** (`rgba(0, 0, 0, 0.16)`): Slightly stronger elevation for floating action buttons and overlays.\n- **Button Press** (`rgba(0, 0, 0, 0.08)`): Inset shadow for active\u002Fpressed states on secondary buttons.\n\n### Link States\n- **Default Link Blue** (`#0000ee`): Standard browser blue for text links with underline -- used in body content.\n- **Link White** (`#ffffff`): Links on dark surfaces -- used in footer and dark sections.\n- **Link Black** (`#000000`): Links on light surfaces with underline decoration.\n\n### Gradient System\n- Uber's design is **entirely gradient-free**. The black\u002Fwhite duality and flat color blocks create all visual hierarchy. No gradients appear anywhere in the system -- every surface is a solid color, every transition is a hard edge or a shadow.\n\n## 3. Typography Rules\n\n### Font Family\n- **Headline \u002F Display**: `UberMove`, with fallbacks: `UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`\n- **Body \u002F UI**: `UberMoveText`, with fallbacks: `system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`\n\n*Note: UberMove and UberMoveText are proprietary typefaces. For external implementations, use `system-ui` or Inter as the closest available substitute. The geometric, square-proportioned character of UberMove can be approximated with Inter or DM Sans.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display \u002F Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (tight) | Maximum impact, billboard presence |\n| Section Heading | UberMove | 36px (2.25rem) | 700 | 1.22 (tight) | Major section anchors |\n| Card Title | UberMove | 32px (2rem) | 700 | 1.25 (tight) | Card and feature headings |\n| Sub-heading | UberMove | 24px (1.5rem) | 700 | 1.33 | Secondary section headers |\n| Small Heading | UberMove | 20px (1.25rem) | 700 | 1.40 | Compact headings, list titles |\n| Nav \u002F UI Large | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Navigation links, prominent UI text |\n| Body \u002F Button | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | Standard body text, button labels |\n| Caption | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | Metadata, descriptions, small links |\n| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxed) | Fine print, legal text |\n\n### Principles\n- **Bold headlines, medium body**: UberMove headings are exclusively weight 700 (bold) -- every headline hits with billboard force. UberMoveText body and UI text uses 400-500, creating a clear visual hierarchy through weight contrast.\n- **Tight heading line-heights**: All headlines use line-heights between 1.22-1.40 -- compact and punchy, designed for scanning rather than reading.\n- **Functional typography**: There is no decorative type treatment anywhere. No letter-spacing, no text-transform, no ornamental sizing. Every text element serves a direct communication purpose.\n- **Two fonts, strict roles**: UberMove is exclusively for headings. UberMoveText is exclusively for body, buttons, links, and UI. The boundary is never crossed.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Black (CTA)**\n- Background: Uber Black (`#000000`)\n- Text: Pure White (`#ffffff`)\n- Padding: 10px 12px\n- Radius: 999px (full pill)\n- Outline: none\n- Focus: inset ring `rgb(255,255,255) 0px 0px 0px 2px`\n- The primary action button -- bold, high-contrast, unmissable\n\n**Secondary White**\n- Background: Pure White (`#ffffff`)\n- Text: Uber Black (`#000000`)\n- Padding: 10px 12px\n- Radius: 999px (full pill)\n- Hover: background shifts to Hover Gray (`#e2e2e2`)\n- Focus: background shifts to Hover Gray, inset ring appears\n- Used on dark surfaces or as a secondary action alongside Primary Black\n\n**Chip \u002F Filter**\n- Background: Chip Gray (`#efefef`)\n- Text: Uber Black (`#000000`)\n- Padding: 14px 16px\n- Radius: 999px (full pill)\n- Active: inset shadow `rgba(0,0,0,0.08)`\n- Navigation chips, category selectors, filter toggles\n\n**Floating Action**\n- Background: Pure White (`#ffffff`)\n- Text: Uber Black (`#000000`)\n- Padding: 14px\n- Radius: 999px (full pill)\n- Shadow: `rgba(0,0,0,0.16) 0px 2px 8px 0px`\n- Transform: `translateY(2px)` slight offset\n- Hover: background shifts to `#f3f3f3`\n- Map controls, scroll-to-top, floating CTAs\n\n### Cards & Containers\n- Background: Pure White (`#ffffff`) on white pages; no distinct card background differentiation\n- Border: none by default -- cards are defined by shadow, not stroke\n- Radius: 8px for standard content cards; 12px for featured\u002Fpromoted cards\n- Shadow: `rgba(0,0,0,0.12) 0px 4px 16px 0px` for standard lift\n- Cards are content-dense with minimal internal padding\n- Image-led cards use full-bleed imagery with text overlay or below\n\n### Inputs & Forms\n- Text: Uber Black (`#000000`)\n- Background: Pure White (`#ffffff`)\n- Border: 1px solid Black (`#000000`) -- the only place visible borders appear prominently\n- Radius: 8px\n- Padding: standard comfortable spacing\n- Focus: no extracted custom focus state -- relies on standard browser focus ring\n\n### Navigation\n- Sticky top navigation with white background\n- Logo: Uber wordmark\u002Ficon at 24x24px in black\n- Links: UberMoveText at 14-18px, weight 500, in Uber Black\n- Pill-shaped nav chips with Chip Gray (`#efefef`) background for category navigation (\"Ride\", \"Drive\", \"Business\", \"Uber Eats\")\n- Menu toggle: circular button with 50% border-radius\n- Mobile: hamburger menu pattern\n\n### Image Treatment\n- Warm, hand-illustrated scenes (not photographs for feature sections)\n- Illustration style: slightly stylized people, warm color palette within illustrations, contemporary vibe\n- Hero sections use bold photography or illustration as full-width backgrounds\n- QR codes for app download CTAs\n- All imagery uses standard 8px or 12px border-radius when contained in cards\n\n### Distinctive Components\n\n**Category Pill Navigation**\n- Horizontal row of pill-shaped buttons for top-level navigation (\"Ride\", \"Drive\", \"Business\", \"Uber Eats\", \"About\")\n- Each pill: Chip Gray background, black text, 999px radius\n- Active state indicated by black background with white text (inversion)\n\n**Hero with Dual Action**\n- Split hero: text\u002FCTA on left, map\u002Fillustration on right\n- Two input fields side by side for pickup\u002Fdestination\n- \"See prices\" CTA button in black pill\n\n**Plan-Ahead Cards**\n- Cards promoting features like \"Uber Reserve\" and trip planning\n- Illustration-heavy with warm, human-centric imagery\n- Black CTA buttons with white text at bottom\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px\n- Button padding: 10px 12px (compact) or 14px 16px (comfortable)\n- Card internal padding: approximately 24-32px\n- Section vertical spacing: generous but efficient -- approximately 64-96px between major sections\n\n### Grid & Container\n- Max container width: approximately 1136px, centered\n- Hero: split layout with text left, visual right\n- Feature sections: 2-column card grids or full-width single-column\n- Footer: multi-column link grid on black background\n- Full-width sections extending to viewport edges\n\n### Whitespace Philosophy\n- **Efficient, not airy**: Uber's whitespace is functional -- enough to separate, never enough to feel empty. This is transit-system spacing: compact, clear, purpose-driven.\n- **Content-dense cards**: Cards pack information tightly with minimal internal spacing, relying on shadow and radius to define boundaries.\n- **Section breathing room**: Major sections get generous vertical spacing, but within sections, elements are closely grouped.\n\n### Border Radius Scale\n- Sharp (0px): No square corners used in interactive elements\n- Standard (8px): Content cards, input fields, listboxes\n- Comfortable (12px): Featured cards, larger containers, link cards\n- Full Pill (999px): All buttons, chips, navigation items, pills\n- Circle (50%): Avatar images, icon containers, circular controls\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, solid background | Page background, inline content, text sections |\n| Subtle (Level 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | Standard content cards, feature blocks |\n| Medium (Level 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | Elevated cards, overlay elements |\n| Floating (Level 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | Floating action buttons, map controls |\n| Pressed (Level 4) | `rgba(0,0,0,0.08) inset` (999px spread) | Active\u002Fpressed button states |\n| Focus Ring | `rgb(255,255,255) 0px 0px 0px 2px inset` | Keyboard focus indicators |\n\n**Shadow Philosophy**: Uber uses shadow purely as a structural tool, never decoratively. Shadows are always black at very low opacity (0.08-0.16), creating the bare minimum lift needed to separate content layers. The blur radii are moderate (8-16px) -- enough to feel natural but never dramatic. There are no colored shadows, no layered shadow stacks, and no ambient glow effects. Depth is communicated more through the black\u002Fwhite section contrast than through shadow elevation.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use true black (`#000000`) and pure white (`#ffffff`) as the primary palette -- the stark contrast IS Uber\n- Use 999px border-radius for all buttons, chips, and pill-shaped navigation elements\n- Keep all headings in UberMove Bold (700) for billboard-level impact\n- Use whisper-soft shadows (0.12-0.16 opacity) for card elevation -- barely visible\n- Maintain the compact, information-dense layout style -- Uber prioritizes efficiency over airiness\n- Use warm, human-centric illustrations to soften the monochrome interface\n- Apply 8px radius for content cards and 12px for featured containers\n- Use UberMoveText at weight 500 for navigation and prominent UI text\n- Pair black primary buttons with white secondary buttons for dual-action layouts\n\n### Don't\n- Don't introduce color into the UI chrome -- Uber's interface is strictly black, white, and gray\n- Don't use rounded corners less than 999px on buttons -- the full-pill shape is a core identity element\n- Don't apply heavy shadows or drop shadows with high opacity -- depth is whisper-subtle\n- Don't use serif fonts anywhere -- Uber's typography is exclusively geometric sans-serif\n- Don't create airy, spacious layouts with excessive whitespace -- Uber's density is intentional\n- Don't use gradients or color overlays -- every surface is a flat, solid color\n- Don't mix UberMove into body text or UberMoveText into headlines -- the hierarchy is strict\n- Don't use decorative borders -- borders are functional (inputs, dividers) or absent entirely\n- Don't soften the black\u002Fwhite contrast with off-whites or near-blacks -- the duality is deliberate\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | 320px | Minimum layout, single column, stacked inputs, compact typography |\n| Mobile | 600px | Standard mobile, stacked layout, hamburger nav |\n| Tablet Small | 768px | Two-column grids begin, expanded card layouts |\n| Tablet | 1119px | Full tablet layout, side-by-side hero content |\n| Desktop Small | 1120px | Desktop grid activates, horizontal nav pills |\n| Desktop | 1136px | Full desktop layout, maximum container width, split hero |\n\n### Touch Targets\n- All pill buttons: minimum 44px height (10-14px vertical padding + line-height)\n- Navigation chips: generous 14px 16px padding for comfortable thumb tapping\n- Circular controls (menu, close): 50% radius ensures large, easy-to-hit targets\n- Card surfaces serve as full-area touch targets on mobile\n\n### Collapsing Strategy\n- **Navigation**: Horizontal pill nav collapses to hamburger menu with circular toggle\n- **Hero**: Split layout (text + map\u002Fvisual) stacks to single column -- text above, visual below\n- **Input fields**: Side-by-side pickup\u002Fdestination inputs stack vertically\n- **Feature cards**: 2-column grid collapses to full-width stacked cards\n- **Headings**: 52px display scales down through 36px, 32px, 24px, 20px\n- **Footer**: Multi-column link grid collapses to accordion or stacked single column\n- **Category pills**: Horizontal scroll with overflow on smaller screens\n\n### Image Behavior\n- Illustrations scale proportionally within their containers\n- Hero imagery maintains aspect ratio, may crop on smaller screens\n- QR code sections hide on mobile (app download shifts to direct store links)\n- Card imagery maintains 8-12px border radius at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Button: \"Uber Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Button Text (on black): \"Pure White (#ffffff)\"\n- Button Text (on white): \"Uber Black (#000000)\"\n- Secondary Text: \"Body Gray (#4b4b4b)\"\n- Tertiary Text: \"Muted Gray (#afafaf)\"\n- Chip Background: \"Chip Gray (#efefef)\"\n- Hover State: \"Hover Gray (#e2e2e2)\"\n- Card Shadow: \"rgba(0,0,0,0.12) 0px 4px 16px\"\n- Footer Background: \"Uber Black (#000000)\"\n\n### Example Component Prompts\n- \"Create a hero section on Pure White (#ffffff) with a headline at 52px UberMove Bold (700), line-height 1.23. Use Uber Black (#000000) text. Add a subtitle in Body Gray (#4b4b4b) at 16px UberMoveText weight 400 with 1.50 line-height. Place an Uber Black (#000000) pill CTA button with Pure White text, 999px radius, padding 10px 12px.\"\n- \"Design a category navigation bar with horizontal pill buttons. Each pill: Chip Gray (#efefef) background, Uber Black (#000000) text, 14px 16px padding, 999px border-radius. Active pill inverts to Uber Black background with Pure White text. Use UberMoveText at 14px weight 500.\"\n- \"Build a feature card on Pure White (#ffffff) with 8px border-radius and shadow rgba(0,0,0,0.12) 0px 4px 16px. Title in UberMove at 24px weight 700, description in Body Gray (#4b4b4b) at 16px UberMoveText. Add a black pill CTA button at the bottom.\"\n- \"Create a dark footer on Uber Black (#000000) with Pure White (#ffffff) heading text in UberMove at 20px weight 700. Footer links in Muted Gray (#afafaf) at 14px UberMoveText. Links hover to Pure White. Multi-column grid layout.\"\n- \"Design a floating action button with Pure White (#ffffff) background, 999px radius, 14px padding, and shadow rgba(0,0,0,0.16) 0px 2px 8px. Hover shifts background to #f3f3f3. Use for scroll-to-top or map controls.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference the strict black\u002Fwhite palette -- \"use Uber Black (#000000)\" not \"make it dark\"\n3. Always specify 999px radius for buttons and pills -- this is non-negotiable for the Uber identity\n4. Describe the font family explicitly -- \"UberMove Bold for the heading, UberMoveText Medium for the label\"\n5. For shadows, use \"whisper shadow (rgba(0,0,0,0.12) 0px 4px 16px)\" -- never heavy drop shadows\n6. Keep layouts compact and information-dense -- Uber is efficient, not airy\n7. Illustrations should be warm and human -- describe \"stylized people in warm tones\" not abstract shapes\n8. Pair black CTAs with white secondaries for balanced dual-action layouts\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Uber (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-black: #000000;\n    --color-white: #ffffff;\n    \u002F* Interactive *\u002F\n    --color-hover-gray: #e2e2e2;\n    --color-hover-light: #f3f3f3;\n    --color-chip-gray: #efefef;\n    \u002F* Text *\u002F\n    --color-body-gray: #4b4b4b;\n    --color-muted-gray: #afafaf;\n    \u002F* Shadows *\u002F\n    --shadow-card: rgba(0, 0, 0, 0.12) 0px 4px 16px 0px;\n    --shadow-medium: rgba(0, 0, 0, 0.16) 0px 4px 16px 0px;\n    --shadow-float: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;\n    --shadow-press: rgba(0, 0, 0, 0.08) 0px 0px 0px 999px inset;\n    \u002F* Fonts *\u002F\n    --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #ffffff;\n    --bg-nav: rgba(255,255,255,0.92);\n    --text-primary: #000000;\n    --text-secondary: #4b4b4b;\n    --text-tertiary: #afafaf;\n    --border-color: #efefef;\n    --section-label-color: #000000;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-black);\n    border-radius: 8px;\n    color: var(--color-white);\n    font-family: var(--font-display);\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .nav-links { display: flex; gap: 24px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font-body);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .nav-cta:hover { background: #333333; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: var(--bg-page);\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 700;\n    line-height: 1.10;\n    letter-spacing: -0.02em;\n    margin-bottom: 20px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 20px;\n    line-height: 1.50;\n    max-width: 560px;\n    margin: 0 auto 36px;\n    font-family: var(--font-body);\n    font-weight: 400;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n  }\n  .btn-primary {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 14px 28px;\n    border: none;\n    border-radius: 999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-primary:hover { background: #222222; }\n  .btn-secondary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 14px 28px;\n    border: 1px solid var(--color-black);\n    border-radius: 999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n  .btn-secondary:hover { background: var(--color-hover-gray); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1136px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--text-tertiary);\n    margin-bottom: 8px;\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.22;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-color);\n    margin: 0 40px;\n    max-width: 1136px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-card {\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow-card);\n  }\n  .color-swatch {\n    height: 100px;\n    width: 100%;\n  }\n  .color-info {\n    padding: 16px;\n    background: var(--bg-card);\n  }\n  .color-name {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n  }\n  .color-hex {\n    font-family: var(--font-body);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n  .color-role {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    margin-top: 4px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  .type-table th {\n    text-align: left;\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--text-tertiary);\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--border-color);\n  }\n  .type-table td {\n    padding: 20px 16px;\n    border-bottom: 1px solid var(--border-color);\n    vertical-align: middle;\n  }\n  .type-sample {\n    font-family: var(--font-display);\n    color: var(--text-primary);\n  }\n  .type-meta {\n    font-family: var(--font-body);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-showcase {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: flex-start;\n  }\n  .button-showcase-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--text-tertiary);\n    margin-bottom: 4px;\n  }\n  .btn-chip {\n    background: var(--color-chip-gray);\n    color: var(--color-black);\n    padding: 14px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-chip:hover { background: var(--color-hover-gray); }\n  .btn-chip.active {\n    background: var(--color-black);\n    color: var(--color-white);\n  }\n  .btn-float {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 14px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-float);\n    transition: background 0.2s;\n  }\n  .btn-float:hover { background: var(--color-hover-light); }\n\n  \u002F* DARK BUTTON ROW *\u002F\n  .dark-button-row {\n    background: var(--color-black);\n    border-radius: 16px;\n    padding: 32px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-top: 24px;\n  }\n  .dark-button-row .button-showcase-label {\n    color: var(--color-muted-gray);\n    width: 100%;\n  }\n  .btn-white {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-white:hover { background: var(--color-hover-gray); }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow-card);\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-medium);\n  }\n  .card-image {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n  }\n  .card-image-placeholder {\n    width: 100%;\n    height: 200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--font-body);\n    font-size: 14px;\n    color: var(--text-tertiary);\n  }\n  .card-image-placeholder.warm-1 {\n    background: linear-gradient(135deg, #f7c59f, #f0a66e);\n  }\n  .card-image-placeholder.warm-2 {\n    background: linear-gradient(135deg, #a8d8ea, #7ec8c8);\n  }\n  .card-image-placeholder.warm-3 {\n    background: linear-gradient(135deg, #c4b5fd, #a78bfa);\n  }\n  .card-body {\n    padding: 24px;\n  }\n  .card-title {\n    font-family: var(--font-display);\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.33;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n  .card-desc {\n    font-family: var(--font-body);\n    font-size: 16px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    margin-bottom: 16px;\n  }\n  .card-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  \u002F* FORM ELEMENTS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .form-label {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n  }\n  .form-input {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    transition: border-color 0.2s;\n    outline: none;\n  }\n  .form-input:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-input::placeholder {\n    color: var(--text-tertiary);\n  }\n  .form-select {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'\u002F%3E%3C\u002Fsvg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n    cursor: pointer;\n  }\n  .form-select:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-textarea {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    outline: none;\n    resize: vertical;\n    min-height: 100px;\n  }\n  .form-textarea:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-checkbox-group {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .form-checkbox {\n    width: 20px;\n    height: 20px;\n    accent-color: var(--color-black);\n    cursor: pointer;\n  }\n\n  \u002F* CHIP ROW *\u002F\n  .chip-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 24px;\n  }\n\n  \u002F* SPACING SCALE *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 10px;\n  }\n  .spacing-label {\n    font-family: var(--font-body);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    width: 60px;\n    text-align: right;\n    flex-shrink: 0;\n  }\n  .spacing-bar {\n    height: 24px;\n    background: var(--color-black);\n    border-radius: 4px;\n    transition: width 0.3s;\n  }\n  .spacing-value {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    flex-shrink: 0;\n    width: 50px;\n  }\n\n  \u002F* RADIUS SCALE *\u002F\n  .radius-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--color-chip-gray);\n    border: 2px solid var(--color-black);\n  }\n  .radius-label {\n    font-family: var(--font-body);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n  }\n  .radius-value {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    height: 140px;\n    border-radius: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    background: var(--bg-card);\n  }\n  .elevation-card.flat {\n    border: 1px solid var(--border-color);\n  }\n  .elevation-card.subtle {\n    box-shadow: rgba(0,0,0,0.12) 0px 4px 16px 0px;\n  }\n  .elevation-card.medium {\n    box-shadow: rgba(0,0,0,0.16) 0px 4px 16px 0px;\n  }\n  .elevation-card.floating {\n    box-shadow: rgba(0,0,0,0.16) 0px 2px 8px 0px;\n    transform: translateY(-2px);\n  }\n  .elevation-card.pressed {\n    box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 999px inset;\n  }\n  .elevation-name {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary);\n  }\n  .elevation-desc {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    text-align: center;\n    padding: 0 12px;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 64px 40px 40px;\n  }\n  .footer-inner {\n    max-width: 1136px;\n    margin: 0 auto;\n  }\n  .footer-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 40px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .footer-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-white);\n    border-radius: 8px;\n    color: var(--color-black);\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .footer-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n    margin-bottom: 48px;\n  }\n  .footer-col-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--color-white);\n    margin-bottom: 16px;\n  }\n  .footer-col a {\n    display: block;\n    font-family: var(--font-body);\n    font-size: 14px;\n    color: var(--color-muted-gray);\n    text-decoration: none;\n    line-height: 2.0;\n    transition: color 0.2s;\n  }\n  .footer-col a:hover { color: var(--color-white); }\n  .footer-divider {\n    border: none;\n    border-top: 1px solid #333333;\n    margin-bottom: 24px;\n  }\n  .footer-bottom {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--color-muted-gray);\n  }\n\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .hero p { font-size: 16px; }\n    .section { padding: 60px 20px; }\n    .section-title { font-size: 28px; margin-bottom: 32px; }\n    .footer-grid { grid-template-columns: repeat(2, 1fr); }\n    .hero-actions { flex-direction: column; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    awesome-design-md\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#\">Components\u003C\u002Fa>\n    \u003Ca href=\"#\">Tokens\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Uber\u003C\u002Fh1>\n  \u003Cp>A bold, black-and-white design language built for clarity, efficiency, and confident minimalism. Every element serves a purpose.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-actions\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Stark Duality\u003C\u002Fh2>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#000000;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Uber Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#000000\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary CTA, headings, nav, footer\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ffffff; border-bottom:1px solid #efefef;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Page background, card surface, inverse text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#efefef;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Chip Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#efefef\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Chip buttons, filter toggles, borders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#e2e2e2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Hover Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#e2e2e2\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Button hover state\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#f3f3f3;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Hover Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#f3f3f3\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Subtle hover for floating buttons\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#4b4b4b;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Body Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#4b4b4b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Secondary text, descriptions\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#afafaf;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Muted Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#afafaf\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Tertiary text, footer links, placeholders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0000ee;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Default Link Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0000ee\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Underlined text links in body content\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">UberMove Type System\u003C\u002Fh2>\n  \u003Ctable class=\"type-table\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth>Sample\u003C\u002Fth>\n        \u003Cth>Role\u003C\u002Fth>\n        \u003Cth>Specs\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:52px; font-weight:700; line-height:1.23;\">Display Hero\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Display \u002F Hero\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">52px \u002F Bold 700 \u002F 1.23\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:36px; font-weight:700; line-height:1.22;\">Section Heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Section Heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">36px \u002F Bold 700 \u002F 1.22\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:32px; font-weight:700; line-height:1.25;\">Card Title\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Card Title\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">32px \u002F Bold 700 \u002F 1.25\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:24px; font-weight:700; line-height:1.33;\">Sub-heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Sub-heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">24px \u002F Bold 700 \u002F 1.33\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:20px; font-weight:700; line-height:1.40;\">Small Heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Small Heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">20px \u002F Bold 700 \u002F 1.40\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:18px; font-weight:500; line-height:1.33;\">Navigation \u002F UI Large\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Nav \u002F UI Large\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">18px \u002F Medium 500 \u002F 1.33\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body text and button labels\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Body \u002F Button\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">16px \u002F Regular 400 \u002F 1.50\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption and metadata\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Caption\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">14px \u002F Medium 500 \u002F 1.43\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:12px; font-weight:400; line-height:1.67;\">Micro text and fine print\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Micro\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">12px \u002F Regular 400 \u002F 1.67\u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Pill-Shaped Actions\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Primary Black\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Secondary Outline\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-secondary\">Learn More\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Chip \u002F Filter\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-chip\">Ride\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Chip Active\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-chip active\">Drive\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Floating\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-float\">Scroll Top\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"dark-button-row\">\n    \u003Cdiv class=\"button-showcase-label\">On Dark Surface\u003C\u002Fdiv>\n    \u003Cbutton class=\"btn-white\">Sign Up\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-white\">Request a Ride\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-chip\" style=\"background: rgba(255,255,255,0.12); color: #fff;\">Uber Eats\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:32px;\">\n    \u003Cdiv class=\"button-showcase-label\" style=\"margin-bottom:12px;\">Chip Navigation Row\u003C\u002Fdiv>\n    \u003Cdiv class=\"chip-row\">\n      \u003Cbutton class=\"btn-chip active\">Ride\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Drive\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Business\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Uber Eats\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">About\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Content Cards\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-1\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Plan for later\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Reserve your ride in advance so you can relax on the day of your trip.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Reserve now\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-2\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Drive when you want\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Make what you need in the time you have. Set your own hours and earn on your schedule.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Start driving\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-3\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Business accounts\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Simplify travel and meal management for your company with centralized billing.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Get started\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- FORM ELEMENTS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Input Components\u003C\u002Fh2>\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Pickup location\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter pickup location\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Destination\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Where to?\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Ride type\u003C\u002Flabel>\n      \u003Cselect class=\"form-select\">\n        \u003Coption>UberX\u003C\u002Foption>\n        \u003Coption>Uber Comfort\u003C\u002Foption>\n        \u003Coption>Uber Black\u003C\u002Foption>\n        \u003Coption>Uber XL\u003C\u002Foption>\n      \u003C\u002Fselect>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Special instructions\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note for your driver...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Cdiv class=\"form-checkbox-group\">\n        \u003Cinput type=\"checkbox\" class=\"form-checkbox\" id=\"ck1\" checked \u002F>\n        \u003Clabel class=\"form-label\" for=\"ck1\">Split fare with riders\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-checkbox-group\">\n        \u003Cinput type=\"checkbox\" class=\"form-checkbox\" id=\"ck2\" \u002F>\n        \u003Clabel class=\"form-label\" for=\"ck2\">Request quiet ride\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\" style=\"align-self: end;\">\n      \u003Cbutton class=\"btn-primary\" style=\"width:100%; padding:14px 28px;\">See prices\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING SCALE -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">8px Grid System\u003C\u002Fh2>\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.25rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.50rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:48px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.75rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:64px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:80px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.25rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:96px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.50rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:128px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">2.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:192px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">3.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">64px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:256px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">4.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Corner Shapes\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-grid\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">None\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">0px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Standard\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Comfortable\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:999px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Full Pill\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">999px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:50%;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Circle\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">50%\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">Elevation \u002F Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Shadow Hierarchy\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card flat\">\n      \u003Cspan class=\"elevation-name\">Flat\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">No shadow, border only\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card subtle\">\n      \u003Cspan class=\"elevation-name\">Subtle\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.12) 0 4px 16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card medium\">\n      \u003Cspan class=\"elevation-name\">Medium\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.16) 0 4px 16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card floating\">\n      \u003Cspan class=\"elevation-name\">Floating\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.16) 0 2px 8px + lift\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card pressed\">\n      \u003Cspan class=\"elevation-name\">Pressed\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.08) inset\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cdiv class=\"footer-inner\">\n    \u003Cdiv class=\"footer-brand\">\n      \u003Cspan class=\"logo-mark\">A\u003C\u002Fspan>\n      awesome-design-md\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer-grid\">\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Products\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Ride\u003C\u002Fa>\n        \u003Ca href=\"#\">Drive\u003C\u002Fa>\n        \u003Ca href=\"#\">Deliver\u003C\u002Fa>\n        \u003Ca href=\"#\">Uber Eats\u003C\u002Fa>\n        \u003Ca href=\"#\">Business\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Company\u003C\u002Fdiv>\n        \u003Ca href=\"#\">About\u003C\u002Fa>\n        \u003Ca href=\"#\">Newsroom\u003C\u002Fa>\n        \u003Ca href=\"#\">Investors\u003C\u002Fa>\n        \u003Ca href=\"#\">Blog\u003C\u002Fa>\n        \u003Ca href=\"#\">Careers\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Support\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Help Center\u003C\u002Fa>\n        \u003Ca href=\"#\">Safety\u003C\u002Fa>\n        \u003Ca href=\"#\">Contact\u003C\u002Fa>\n        \u003Ca href=\"#\">Accessibility\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Legal\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Privacy\u003C\u002Fa>\n        \u003Ca href=\"#\">Terms\u003C\u002Fa>\n        \u003Ca href=\"#\">Cookies\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Chr class=\"footer-divider\">\n    \u003Cdiv class=\"footer-bottom\">\n      Design system preview for awesome-design-md. Inspired by Uber. Not affiliated.\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Uber (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    \u002F* Primary *\u002F\n    --color-black: #000000;\n    --color-white: #ffffff;\n    \u002F* Interactive *\u002F\n    --color-hover-gray: #e2e2e2;\n    --color-hover-light: #f3f3f3;\n    --color-chip-gray: #efefef;\n    \u002F* Text *\u002F\n    --color-body-gray: #4b4b4b;\n    --color-muted-gray: #afafaf;\n    \u002F* Shadows *\u002F\n    --shadow-card: rgba(0, 0, 0, 0.12) 0px 4px 16px 0px;\n    --shadow-medium: rgba(0, 0, 0, 0.16) 0px 4px 16px 0px;\n    --shadow-float: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px;\n    --shadow-press: rgba(0, 0, 0, 0.08) 0px 0px 0px 999px inset;\n    \u002F* Fonts *\u002F\n    --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --font-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    \u002F* Light mode tokens *\u002F\n    --bg-page: #000000;\n    --bg-card: #111111;\n    --bg-nav: rgba(0,0,0,0.92);\n    --text-primary: #ffffff;\n    --text-secondary: #afafaf;\n    --text-tertiary: #6b6b6b;\n    --border-color: #2a2a2a;\n    --section-label-color: #afafaf;\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--text-primary);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .nav-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-black);\n    border-radius: 8px;\n    color: var(--color-white);\n    font-family: var(--font-display);\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .nav-links { display: flex; gap: 24px; align-items: center; }\n  .nav-links a {\n    color: var(--text-secondary);\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 500;\n    font-family: var(--font-body);\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--text-primary); }\n  .nav-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .nav-cta:hover { background: #333333; }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n    background: var(--bg-page);\n  }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 64px;\n    font-weight: 700;\n    line-height: 1.10;\n    letter-spacing: -0.02em;\n    margin-bottom: 20px;\n    color: var(--text-primary);\n  }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 20px;\n    line-height: 1.50;\n    max-width: 560px;\n    margin: 0 auto 36px;\n    font-family: var(--font-body);\n    font-weight: 400;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n  }\n  .btn-primary {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 14px 28px;\n    border: none;\n    border-radius: 999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-primary:hover { background: #222222; }\n  .btn-secondary {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 14px 28px;\n    border: 1px solid var(--color-black);\n    border-radius: 999px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n  .btn-secondary:hover { background: var(--color-hover-gray); }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    padding: 80px 40px;\n    max-width: 1136px;\n    margin: 0 auto;\n  }\n  .section-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--text-tertiary);\n    margin-bottom: 8px;\n  }\n  .section-title {\n    font-family: var(--font-display);\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.22;\n    margin-bottom: 48px;\n    color: var(--text-primary);\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-color);\n    margin: 0 40px;\n    max-width: 1136px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 16px;\n  }\n  .color-card {\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow-card);\n  }\n  .color-swatch {\n    height: 100px;\n    width: 100%;\n  }\n  .color-info {\n    padding: 16px;\n    background: var(--bg-card);\n  }\n  .color-name {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n  }\n  .color-hex {\n    font-family: var(--font-body);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n  .color-role {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    margin-top: 4px;\n  }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  .type-table th {\n    text-align: left;\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--text-tertiary);\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--border-color);\n  }\n  .type-table td {\n    padding: 20px 16px;\n    border-bottom: 1px solid var(--border-color);\n    vertical-align: middle;\n  }\n  .type-sample {\n    font-family: var(--font-display);\n    color: var(--text-primary);\n  }\n  .type-meta {\n    font-family: var(--font-body);\n    font-size: 13px;\n    color: var(--text-secondary);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-start;\n  }\n  .button-showcase {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: flex-start;\n  }\n  .button-showcase-label {\n    font-family: var(--font-body);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--text-tertiary);\n    margin-bottom: 4px;\n  }\n  .btn-chip {\n    background: var(--color-chip-gray);\n    color: var(--color-black);\n    padding: 14px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-chip:hover { background: var(--color-hover-gray); }\n  .btn-chip.active {\n    background: var(--color-black);\n    color: var(--color-white);\n  }\n  .btn-float {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 14px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    box-shadow: var(--shadow-float);\n    transition: background 0.2s;\n  }\n  .btn-float:hover { background: var(--color-hover-light); }\n\n  \u002F* DARK BUTTON ROW *\u002F\n  .dark-button-row {\n    background: var(--color-black);\n    border-radius: 16px;\n    padding: 32px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    align-items: center;\n    margin-top: 24px;\n  }\n  .dark-button-row .button-showcase-label {\n    color: var(--color-muted-gray);\n    width: 100%;\n  }\n  .btn-white {\n    background: var(--color-white);\n    color: var(--color-black);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  .btn-white:hover { background: var(--color-hover-gray); }\n\n  \u002F* CARDS *\u002F\n  .card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 24px;\n  }\n  .card {\n    background: var(--bg-card);\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: var(--shadow-card);\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .card:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-medium);\n  }\n  .card-image {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n  }\n  .card-image-placeholder {\n    width: 100%;\n    height: 200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--font-body);\n    font-size: 14px;\n    color: var(--text-tertiary);\n  }\n  .card-image-placeholder.warm-1 {\n    background: linear-gradient(135deg, #f7c59f, #f0a66e);\n  }\n  .card-image-placeholder.warm-2 {\n    background: linear-gradient(135deg, #a8d8ea, #7ec8c8);\n  }\n  .card-image-placeholder.warm-3 {\n    background: linear-gradient(135deg, #c4b5fd, #a78bfa);\n  }\n  .card-body {\n    padding: 24px;\n  }\n  .card-title {\n    font-family: var(--font-display);\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.33;\n    margin-bottom: 8px;\n    color: var(--text-primary);\n  }\n  .card-desc {\n    font-family: var(--font-body);\n    font-size: 16px;\n    color: var(--text-secondary);\n    line-height: 1.50;\n    margin-bottom: 16px;\n  }\n  .card-cta {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 10px 20px;\n    border: none;\n    border-radius: 999px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  \u002F* FORM ELEMENTS *\u002F\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 24px;\n  }\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .form-label {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n  }\n  .form-input {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    transition: border-color 0.2s;\n    outline: none;\n  }\n  .form-input:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-input::placeholder {\n    color: var(--text-tertiary);\n  }\n  .form-select {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    outline: none;\n    appearance: none;\n    background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'\u002F%3E%3C\u002Fsvg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n    cursor: pointer;\n  }\n  .form-select:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-textarea {\n    font-family: var(--font-body);\n    font-size: 16px;\n    padding: 14px 16px;\n    border: 1px solid #c0c0c0;\n    border-radius: 8px;\n    background: var(--color-white);\n    color: var(--text-primary);\n    outline: none;\n    resize: vertical;\n    min-height: 100px;\n  }\n  .form-textarea:focus {\n    border-color: var(--color-black);\n    box-shadow: 0 0 0 1px var(--color-black);\n  }\n  .form-checkbox-group {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .form-checkbox {\n    width: 20px;\n    height: 20px;\n    accent-color: var(--color-black);\n    cursor: pointer;\n  }\n\n  \u002F* CHIP ROW *\u002F\n  .chip-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-bottom: 24px;\n  }\n\n  \u002F* SPACING SCALE *\u002F\n  .spacing-row {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 10px;\n  }\n  .spacing-label {\n    font-family: var(--font-body);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    width: 60px;\n    text-align: right;\n    flex-shrink: 0;\n  }\n  .spacing-bar {\n    height: 24px;\n    background: var(--color-black);\n    border-radius: 4px;\n    transition: width 0.3s;\n  }\n  .spacing-value {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    flex-shrink: 0;\n    width: 50px;\n  }\n\n  \u002F* RADIUS SCALE *\u002F\n  .radius-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    align-items: flex-end;\n  }\n  .radius-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n  }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--color-chip-gray);\n    border: 2px solid var(--color-black);\n  }\n  .radius-label {\n    font-family: var(--font-body);\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-secondary);\n  }\n  .radius-value {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 24px;\n  }\n  .elevation-card {\n    height: 140px;\n    border-radius: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    background: var(--bg-card);\n  }\n  .elevation-card.flat {\n    border: 1px solid var(--border-color);\n  }\n  .elevation-card.subtle {\n    box-shadow: rgba(0,0,0,0.12) 0px 4px 16px 0px;\n  }\n  .elevation-card.medium {\n    box-shadow: rgba(0,0,0,0.16) 0px 4px 16px 0px;\n  }\n  .elevation-card.floating {\n    box-shadow: rgba(0,0,0,0.16) 0px 2px 8px 0px;\n    transform: translateY(-2px);\n  }\n  .elevation-card.pressed {\n    box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 999px inset;\n  }\n  .elevation-name {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary);\n  }\n  .elevation-desc {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--text-tertiary);\n    text-align: center;\n    padding: 0 12px;\n  }\n\n  \u002F* FOOTER *\u002F\n  .footer {\n    background: var(--color-black);\n    color: var(--color-white);\n    padding: 64px 40px 40px;\n  }\n  .footer-inner {\n    max-width: 1136px;\n    margin: 0 auto;\n  }\n  .footer-brand {\n    font-family: var(--font-display);\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 40px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .footer-brand .logo-mark {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--color-white);\n    border-radius: 8px;\n    color: var(--color-black);\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .footer-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n    margin-bottom: 48px;\n  }\n  .footer-col-title {\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--color-white);\n    margin-bottom: 16px;\n  }\n  .footer-col a {\n    display: block;\n    font-family: var(--font-body);\n    font-size: 14px;\n    color: var(--color-muted-gray);\n    text-decoration: none;\n    line-height: 2.0;\n    transition: color 0.2s;\n  }\n  .footer-col a:hover { color: var(--color-white); }\n  .footer-divider {\n    border: none;\n    border-top: 1px solid #333333;\n    margin-bottom: 24px;\n  }\n  .footer-bottom {\n    font-family: var(--font-body);\n    font-size: 12px;\n    color: var(--color-muted-gray);\n  }\n\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .hero p { font-size: 16px; }\n    .section { padding: 60px 20px; }\n    .section-title { font-size: 28px; margin-bottom: 32px; }\n    .footer-grid { grid-template-columns: repeat(2, 1fr); }\n    .hero-actions { flex-direction: column; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\n    awesome-design-md\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#\">Components\u003C\u002Fa>\n    \u003Ca href=\"#\">Tokens\u003C\u002Fa>\n  \u003C\u002Fdiv>\n  \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#ffffff;color:#000000;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Uber\u003C\u002Fh1>\n  \u003Cp>A bold, black-and-white design language built for clarity, efficiency, and confident minimalism. Every element serves a purpose.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-actions\">\n    \u003Cbutton class=\"btn-primary\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-secondary\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLOR PALETTE -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Stark Duality\u003C\u002Fh2>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#000000;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Uber Black\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#000000\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Primary CTA, headings, nav, footer\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#ffffff; border-bottom:1px solid #efefef;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Pure White\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#ffffff\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Page background, card surface, inverse text\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#efefef;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Chip Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#efefef\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Chip buttons, filter toggles, borders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#e2e2e2;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Hover Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#e2e2e2\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Button hover state\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#f3f3f3;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Hover Light\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#f3f3f3\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Subtle hover for floating buttons\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#4b4b4b;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Body Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#4b4b4b\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Secondary text, descriptions\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#afafaf;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Muted Gray\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#afafaf\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Tertiary text, footer links, placeholders\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-card\">\n      \u003Cdiv class=\"color-swatch\" style=\"background:#0000ee;\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-info\">\n        \u003Cdiv class=\"color-name\">Default Link Blue\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-hex\">#0000ee\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-role\">Underlined text links in body content\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">UberMove Type System\u003C\u002Fh2>\n  \u003Ctable class=\"type-table\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth>Sample\u003C\u002Fth>\n        \u003Cth>Role\u003C\u002Fth>\n        \u003Cth>Specs\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:52px; font-weight:700; line-height:1.23;\">Display Hero\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Display \u002F Hero\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">52px \u002F Bold 700 \u002F 1.23\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:36px; font-weight:700; line-height:1.22;\">Section Heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Section Heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">36px \u002F Bold 700 \u002F 1.22\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:32px; font-weight:700; line-height:1.25;\">Card Title\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Card Title\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">32px \u002F Bold 700 \u002F 1.25\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:24px; font-weight:700; line-height:1.33;\">Sub-heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Sub-heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">24px \u002F Bold 700 \u002F 1.33\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:20px; font-weight:700; line-height:1.40;\">Small Heading\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Small Heading\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">20px \u002F Bold 700 \u002F 1.40\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:18px; font-weight:500; line-height:1.33;\">Navigation \u002F UI Large\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Nav \u002F UI Large\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">18px \u002F Medium 500 \u002F 1.33\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:16px; font-weight:400; line-height:1.50;\">Body text and button labels\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Body \u002F Button\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">16px \u002F Regular 400 \u002F 1.50\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption and metadata\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Caption\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">14px \u002F Medium 500 \u002F 1.43\u003C\u002Ftd>\n      \u003C\u002Ftr>\n      \u003Ctr>\n        \u003Ctd>\u003Cspan class=\"type-sample\" style=\"font-size:12px; font-weight:400; line-height:1.67;\">Micro text and fine print\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">Micro\u003C\u002Ftd>\n        \u003Ctd class=\"type-meta\">12px \u002F Regular 400 \u002F 1.67\u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Pill-Shaped Actions\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-grid\">\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Primary Black\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-primary\">Get Started\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Secondary Outline\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-secondary\">Learn More\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Chip \u002F Filter\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-chip\">Ride\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Chip Active\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-chip active\">Drive\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-showcase\">\n      \u003Cdiv class=\"button-showcase-label\">Floating\u003C\u002Fdiv>\n      \u003Cbutton class=\"btn-float\">Scroll Top\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"dark-button-row\">\n    \u003Cdiv class=\"button-showcase-label\">On Dark Surface\u003C\u002Fdiv>\n    \u003Cbutton class=\"btn-white\">Sign Up\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-white\">Request a Ride\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-chip\" style=\"background: rgba(255,255,255,0.12); color: #fff;\">Uber Eats\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv style=\"margin-top:32px;\">\n    \u003Cdiv class=\"button-showcase-label\" style=\"margin-bottom:12px;\">Chip Navigation Row\u003C\u002Fdiv>\n    \u003Cdiv class=\"chip-row\">\n      \u003Cbutton class=\"btn-chip active\">Ride\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Drive\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Business\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">Uber Eats\u003C\u002Fbutton>\n      \u003Cbutton class=\"btn-chip\">About\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Content Cards\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-1\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Plan for later\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Reserve your ride in advance so you can relax on the day of your trip.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Reserve now\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-2\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Drive when you want\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Make what you need in the time you have. Set your own hours and earn on your schedule.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Start driving\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-image-placeholder warm-3\">\n        \u003Cspan>Illustration\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"card-body\">\n        \u003Cdiv class=\"card-title\">Business accounts\u003C\u002Fdiv>\n        \u003Cdiv class=\"card-desc\">Simplify travel and meal management for your company with centralized billing.\u003C\u002Fdiv>\n        \u003Cbutton class=\"card-cta\">Get started\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- FORM ELEMENTS -->\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">Form Elements\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Input Components\u003C\u002Fh2>\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Pickup location\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter pickup location\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Destination\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Where to?\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Ride type\u003C\u002Flabel>\n      \u003Cselect class=\"form-select\">\n        \u003Coption>UberX\u003C\u002Foption>\n        \u003Coption>Uber Comfort\u003C\u002Foption>\n        \u003Coption>Uber Black\u003C\u002Foption>\n        \u003Coption>Uber XL\u003C\u002Foption>\n      \u003C\u002Fselect>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Special instructions\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-textarea\" placeholder=\"Add a note for your driver...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Cdiv class=\"form-checkbox-group\">\n        \u003Cinput type=\"checkbox\" class=\"form-checkbox\" id=\"ck1\" checked \u002F>\n        \u003Clabel class=\"form-label\" for=\"ck1\">Split fare with riders\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"form-checkbox-group\">\n        \u003Cinput type=\"checkbox\" class=\"form-checkbox\" id=\"ck2\" \u002F>\n        \u003Clabel class=\"form-label\" for=\"ck2\">Request quiet ride\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\" style=\"align-self: end;\">\n      \u003Cbutton class=\"btn-primary\" style=\"width:100%; padding:14px 28px;\">See prices\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING SCALE -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">8px Grid System\u003C\u002Fh2>\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:16px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.25rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:32px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.50rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:48px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">0.75rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:64px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">20px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:80px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.25rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:96px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">1.50rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:128px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">2.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">48px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:192px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">3.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\n      \u003Cspan class=\"spacing-label\">64px\u003C\u002Fspan>\n      \u003Cdiv class=\"spacing-bar\" style=\"width:256px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"spacing-value\">4.00rem\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Corner Shapes\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-grid\">\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:0px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">None\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">0px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:8px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Standard\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">8px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:12px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Comfortable\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">12px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:999px;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Full Pill\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">999px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\n      \u003Cdiv class=\"radius-box\" style=\"border-radius:50%;\">\u003C\u002Fdiv>\n      \u003Cspan class=\"radius-label\">Circle\u003C\u002Fspan>\n      \u003Cspan class=\"radius-value\">50%\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION \u002F DEPTH -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">Elevation \u002F Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Shadow Hierarchy\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card flat\">\n      \u003Cspan class=\"elevation-name\">Flat\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">No shadow, border only\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card subtle\">\n      \u003Cspan class=\"elevation-name\">Subtle\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.12) 0 4px 16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card medium\">\n      \u003Cspan class=\"elevation-name\">Medium\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.16) 0 4px 16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card floating\">\n      \u003Cspan class=\"elevation-name\">Floating\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.16) 0 2px 8px + lift\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card pressed\">\n      \u003Cspan class=\"elevation-name\">Pressed\u003C\u002Fspan>\n      \u003Cspan class=\"elevation-desc\">rgba(0,0,0,0.08) inset\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FOOTER -->\n\u003Cfooter class=\"footer\">\n  \u003Cdiv class=\"footer-inner\">\n    \u003Cdiv class=\"footer-brand\">\n      \u003Cspan class=\"logo-mark\">A\u003C\u002Fspan>\n      awesome-design-md\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer-grid\">\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Products\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Ride\u003C\u002Fa>\n        \u003Ca href=\"#\">Drive\u003C\u002Fa>\n        \u003Ca href=\"#\">Deliver\u003C\u002Fa>\n        \u003Ca href=\"#\">Uber Eats\u003C\u002Fa>\n        \u003Ca href=\"#\">Business\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Company\u003C\u002Fdiv>\n        \u003Ca href=\"#\">About\u003C\u002Fa>\n        \u003Ca href=\"#\">Newsroom\u003C\u002Fa>\n        \u003Ca href=\"#\">Investors\u003C\u002Fa>\n        \u003Ca href=\"#\">Blog\u003C\u002Fa>\n        \u003Ca href=\"#\">Careers\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Support\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Help Center\u003C\u002Fa>\n        \u003Ca href=\"#\">Safety\u003C\u002Fa>\n        \u003Ca href=\"#\">Contact\u003C\u002Fa>\n        \u003Ca href=\"#\">Accessibility\u003C\u002Fa>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"footer-col\">\n        \u003Cdiv class=\"footer-col-title\">Legal\u003C\u002Fdiv>\n        \u003Ca href=\"#\">Privacy\u003C\u002Fa>\n        \u003Ca href=\"#\">Terms\u003C\u002Fa>\n        \u003Ca href=\"#\">Cookies\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Chr class=\"footer-divider\">\n    \u003Cdiv class=\"footer-bottom\">\n      Design system preview for awesome-design-md. Inspired by Uber. Not affiliated.\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Uber Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fuber\u002FDESIGN.md) extracted from the public [Uber](https:\u002F\u002Fuber.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fuber\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Uber design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Uber Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fuber\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Uber Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fuber\u002Fpreview-screenshot.png)\n",{"slug":369,"name":370,"category":90,"designMd":371,"previewHtml":372,"previewDarkHtml":373,"readme":374},"vercel","Vercel","# Design System Inspiration of Vercel\n\n## 1. Visual Theme & Atmosphere\n\nVercel's website is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (`#ffffff`) with near-black (`#171717`) text, creating a gallery-like emptiness where every element earns its pixel. This isn't minimalism as decoration; it's minimalism as engineering principle. The Geist design system treats the interface like a compiler treats code — every unnecessary token is stripped away until only structure remains.\n\nThe custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.4px to -2.88px at display sizes), creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production. At body sizes, the tracking relaxes but the geometric precision persists. Geist Mono completes the system as the monospace companion for code, terminal output, and technical labels. Both fonts enable OpenType `\"liga\"` (ligatures) globally, adding a layer of typographic sophistication that rewards close reading.\n\nWhat distinguishes Vercel from other monochrome design systems is its shadow-as-border philosophy. Instead of traditional CSS borders, Vercel uses `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` — a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without the box model implications. This technique allows borders to exist in the shadow layer, enabling smoother transitions, rounded corners without clipping, and a subtler visual weight than traditional borders. The entire depth system is built on layered, multi-value shadow stacks where each layer serves a specific purpose: one for the border, one for soft elevation, one for ambient depth.\n\n**Key Characteristics:**\n- Geist Sans with extreme negative letter-spacing (-2.4px to -2.88px at display) — text as compressed infrastructure\n- Geist Mono for code and technical labels with OpenType `\"liga\"` globally\n- Shadow-as-border technique: `box-shadow 0px 0px 0px 1px` replaces traditional borders throughout\n- Multi-layer shadow stacks for nuanced depth (border + elevation + ambient in single declarations)\n- Near-pure white canvas with `#171717` text — not quite black, creating micro-contrast softness\n- Workflow-specific accent colors: Ship Red (`#ff5b4f`), Preview Pink (`#de1d8d`), Develop Blue (`#0a72ef`)\n- Focus ring system using `hsla(212, 100%, 48%, 1)` — a saturated blue for accessibility\n- Pill badges (9999px) with tinted backgrounds for status indicators\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Vercel Black** (`#171717`): Primary text, headings, dark surface backgrounds. Not pure black — the slight warmth prevents harshness.\n- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark.\n- **True Black** (`#000000`): Secondary use, `--geist-console-text-color-default`, used in specific console\u002Fcode contexts.\n\n### Workflow Accent Colors\n- **Ship Red** (`#ff5b4f`): `--ship-text`, the \"ship to production\" workflow step — warm, urgent coral-red.\n- **Preview Pink** (`#de1d8d`): `--preview-text`, the preview deployment workflow — vivid magenta-pink.\n- **Develop Blue** (`#0a72ef`): `--develop-text`, the development workflow — bright, focused blue.\n\n### Console \u002F Code Colors\n- **Console Blue** (`#0070f3`): `--geist-console-text-color-blue`, syntax highlighting blue.\n- **Console Purple** (`#7928ca`): `--geist-console-text-color-purple`, syntax highlighting purple.\n- **Console Pink** (`#eb367f`): `--geist-console-text-color-pink`, syntax highlighting pink.\n\n### Interactive\n- **Link Blue** (`#0072f5`): Primary link color with underline decoration.\n- **Focus Blue** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`, focus ring on interactive elements.\n- **Ring Blue** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`, Tailwind ring utility.\n\n### Neutral Scale\n- **Gray 900** (`#171717`): Primary text, headings, nav text.\n- **Gray 600** (`#4d4d4d`): Secondary text, description copy.\n- **Gray 500** (`#666666`): Tertiary text, muted links.\n- **Gray 400** (`#808080`): Placeholder text, disabled states.\n- **Gray 100** (`#ebebeb`): Borders, card outlines, dividers.\n- **Gray 50** (`#fafafa`): Subtle surface tint, inner shadow highlight.\n\n### Surface & Overlay\n- **Overlay Backdrop** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`, modal\u002Fdialog backdrop.\n- **Selection Text** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`, text selection highlight.\n- **Badge Blue Bg** (`#ebf5ff`): Pill badge background, tinted blue surface.\n- **Badge Blue Text** (`#0068d6`): Pill badge text, darker blue for readability.\n\n### Shadows & Depth\n- **Border Shadow** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): The signature — replaces traditional borders.\n- **Subtle Elevation** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): Minimal lift for cards.\n- **Card Stack** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): Full multi-layer card shadow.\n- **Ring Border** (`rgb(235, 235, 235) 0px 0px 0px 1px`): Light gray ring-border for tabs and images.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Geist`, with fallbacks: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`\n- **Monospace**: `Geist Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`\n- **OpenType Features**: `\"liga\"` enabled globally on all Geist text; `\"tnum\"` for tabular numbers on specific captions.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (tight) | -2.4px to -2.88px | Maximum compression, billboard impact |\n| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (tight) | -2.4px | Feature section titles |\n| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (tight) | -1.28px | Card headings, sub-sections |\n| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | Lighter sub-headings |\n| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | Feature cards |\n| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | Secondary card headings |\n| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (relaxed) | normal | Introductions, feature descriptions |\n| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | Standard reading text |\n| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | Standard UI text |\n| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |\n| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | Strong labels, active states |\n| Button \u002F Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | Buttons, links, captions |\n| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Compact buttons |\n| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | Metadata, tags |\n| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | Code labels |\n| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (tight) | normal | `text-transform: uppercase`, technical labels |\n| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (tight) | normal | `text-transform: uppercase`, tiny badges |\n\n### Principles\n- **Compression as identity**: Geist Sans at display sizes uses -2.4px to -2.88px letter-spacing — the most aggressive negative tracking of any major design system. This creates text that feels _minified_, like code optimized for production. The tracking progressively relaxes as size decreases: -1.28px at 32px, -0.96px at 24px, -0.32px at 16px, and normal at 14px.\n- **Ligatures everywhere**: Every Geist text element enables OpenType `\"liga\"`. Ligatures aren't decorative — they're structural, creating tighter, more efficient glyph combinations.\n- **Three weights, strict roles**: 400 (body\u002Freading), 500 (UI\u002Finteractive), 600 (headings\u002Femphasis). No bold (700) except for tiny micro-badges. This narrow weight range creates hierarchy through size and tracking, not weight.\n- **Mono for identity**: Geist Mono in uppercase with `\"tnum\"` or `\"liga\"` serves as the \"developer console\" voice — compact technical labels that connect the marketing site to the product.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary White (Shadow-bordered)**\n- Background: `#ffffff`\n- Text: `#171717`\n- Padding: 0px 6px (minimal — content-driven width)\n- Radius: 6px (subtly rounded)\n- Shadow: `rgb(235, 235, 235) 0px 0px 0px 1px` (ring-border)\n- Hover: background shifts to `var(--ds-gray-1000)` (dark)\n- Focus: `2px solid var(--ds-focus-color)` outline + `var(--ds-focus-ring)` shadow\n- Use: Standard secondary button\n\n**Primary Dark (Inferred from Geist system)**\n- Background: `#171717`\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 6px\n- Use: Primary CTA (\"Start Deploying\", \"Get Started\")\n\n**Pill Button \u002F Badge**\n- Background: `#ebf5ff` (tinted blue)\n- Text: `#0068d6`\n- Padding: 0px 10px\n- Radius: 9999px (full pill)\n- Font: 12px weight 500\n- Use: Status badges, tags, feature labels\n\n**Large Pill (Navigation)**\n- Background: transparent or `#171717`\n- Radius: 64px–100px\n- Use: Tab navigation, section selectors\n\n### Cards & Containers\n- Background: `#ffffff`\n- Border: via shadow — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`\n- Radius: 8px (standard), 12px (featured\u002Fimage cards)\n- Shadow stack: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`\n- Image cards: `1px solid #ebebeb` with 12px top radius\n- Hover: subtle shadow intensification\n\n### Inputs & Forms\n- Radio: standard styling with focus `var(--ds-gray-200)` background\n- Focus shadow: `1px 0 0 0 var(--ds-gray-alpha-600)`\n- Focus outline: `2px solid var(--ds-focus-color)` — consistent blue focus ring\n- Border: via shadow technique, not traditional border\n\n### Navigation\n- Clean horizontal nav on white, sticky\n- Vercel logotype left-aligned, 262x52px\n- Links: Geist 14px weight 500, `#171717` text\n- Active: weight 600 or underline\n- CTA: dark pill buttons (\"Start Deploying\", \"Contact Sales\")\n- Mobile: hamburger menu collapse\n- Product dropdowns with multi-level menus\n\n### Image Treatment\n- Product screenshots with `1px solid #ebebeb` border\n- Top-rounded images: `12px 12px 0px 0px` radius\n- Dashboard\u002Fcode preview screenshots dominate feature sections\n- Soft gradient backgrounds behind hero images (pastel multi-color)\n\n### Distinctive Components\n\n**Workflow Pipeline**\n- Three-step horizontal pipeline: Develop → Preview → Ship\n- Each step has its own accent color: Blue → Pink → Red\n- Connected with lines\u002Farrows\n- The visual metaphor for Vercel's core value proposition\n\n**Trust Bar \u002F Logo Grid**\n- Company logos (Perplexity, ChatGPT, Cursor, etc.) in grayscale\n- Horizontal scroll or grid layout\n- Subtle `#ebebeb` border separation\n\n**Metric Cards**\n- Large number display (e.g., \"10x faster\")\n- Geist 48px weight 600 for the metric\n- Description below in gray body text\n- Shadow-bordered card container\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px\n- Notable gap: jumps from 16px to 32px — no 20px or 24px in primary scale\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding\n- Feature sections: 2–3 column grids for cards\n- Full-width dividers using `border-bottom: 1px solid #171717`\n- Code\u002Fdashboard screenshots as full-width or contained with border\n\n### Whitespace Philosophy\n- **Gallery emptiness**: Massive vertical padding between sections (80px–120px+). The white space IS the design — it communicates that Vercel has nothing to prove and nothing to hide.\n- **Compressed text, expanded space**: The aggressive negative letter-spacing on headlines is counterbalanced by generous surrounding whitespace. The text is dense; the space around it is vast.\n- **Section rhythm**: White sections alternate with white sections — there's no color variation between sections. Separation comes from borders (shadow-borders) and spacing alone.\n\n### Border Radius Scale\n- Micro (2px): Inline code snippets, small spans\n- Subtle (4px): Small containers\n- Standard (6px): Buttons, links, functional elements\n- Comfortable (8px): Cards, list items\n- Image (12px): Featured cards, image containers (top-rounded)\n- Large (64px): Tab navigation pills\n- XL (100px): Large navigation links\n- Full Pill (9999px): Badges, status pills, tags\n- Circle (50%): Menu toggle, avatar containers\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Ring (Level 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | Shadow-as-border for most elements |\n| Light Ring (Level 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | Lighter ring for tabs, images |\n| Subtle Card (Level 2) | Ring + `rgba(0,0,0,0.04) 0px 2px 2px` | Standard cards with minimal lift |\n| Full Card (Level 3) | Ring + Subtle + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + inner `#fafafa` ring | Featured cards, highlighted panels |\n| Focus (Accessibility) | `2px solid hsla(212, 100%, 48%, 1)` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Vercel has arguably the most sophisticated shadow system in modern web design. Rather than using shadows for elevation in the traditional Material Design sense, Vercel uses multi-value shadow stacks where each layer has a distinct architectural purpose: one creates the \"border\" (0px spread, 1px), another adds ambient softness (2px blur), another handles depth at distance (8px blur with negative spread), and an inner ring (`#fafafa`) creates the subtle highlight that makes the card \"glow\" from within. This layered approach means cards feel built, not floating.\n\n### Decorative Depth\n- Hero gradient: soft, pastel multi-color gradient wash behind hero content (barely visible, atmospheric)\n- Section borders: `1px solid #171717` (full dark line) between major sections\n- No background color variation — depth comes entirely from shadow layering and border contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Geist Sans with aggressive negative letter-spacing at display sizes (-2.4px to -2.88px at 48px)\n- Use shadow-as-border (`0px 0px 0px 1px rgba(0,0,0,0.08)`) instead of traditional CSS borders\n- Enable `\"liga\"` on all Geist text — ligatures are structural, not optional\n- Use the three-weight system: 400 (body), 500 (UI), 600 (headings)\n- Apply workflow accent colors (Red\u002FPink\u002FBlue) only in their workflow context\n- Use multi-layer shadow stacks for cards (border + elevation + ambient + inner highlight)\n- Keep the color palette achromatic — grays from `#171717` to `#ffffff` are the system\n- Use `#171717` instead of `#000000` for primary text — the micro-warmth matters\n\n### Don't\n- Don't use positive letter-spacing on Geist Sans — it's always negative or zero\n- Don't use weight 700 (bold) on body text — 600 is the maximum, used only for headings\n- Don't use traditional CSS `border` on cards — use the shadow-border technique\n- Don't introduce warm colors (oranges, yellows, greens) into the UI chrome\n- Don't apply the workflow accent colors (Ship Red, Preview Pink, Develop Blue) decoratively\n- Don't use heavy shadows (> 0.1 opacity) — the shadow system is whisper-level\n- Don't increase body text letter-spacing — Geist is designed to run tight\n- Don't use pill radius (9999px) on primary action buttons — pills are for badges\u002Ftags only\n- Don't skip the inner `#fafafa` ring in card shadows — it's the glow that makes the system work\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C400px | Tight single column, minimal padding |\n| Mobile | 400–600px | Standard mobile, stacked layout |\n| Tablet Small | 600–768px | 2-column grids begin |\n| Tablet | 768–1024px | Full card grids, expanded padding |\n| Desktop Small | 1024–1200px | Standard desktop layout |\n| Desktop | 1200–1400px | Full layout, maximum content width |\n| Large Desktop | >1400px | Centered, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding (8px–16px vertical)\n- Navigation links at 14px with adequate spacing\n- Pill badges have 10px horizontal padding for tap targets\n- Mobile menu toggle uses 50% radius circular button\n\n### Collapsing Strategy\n- Hero: display 48px → scales down, maintains negative tracking proportionally\n- Navigation: horizontal links + CTAs → hamburger menu\n- Feature cards: 3-column → 2-column → single column stacked\n- Code screenshots: maintain aspect ratio, may horizontally scroll\n- Trust bar logos: grid → horizontal scroll\n- Footer: multi-column → stacked single column\n- Section spacing: 80px+ → 48px on mobile\n\n### Image Behavior\n- Dashboard screenshots maintain border treatment at all sizes\n- Hero gradient softens\u002Fsimplifies on mobile\n- Product screenshots use responsive images with consistent border radius\n- Full-width sections maintain edge-to-edge treatment\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Vercel Black (`#171717`)\n- Background: Pure White (`#ffffff`)\n- Heading text: Vercel Black (`#171717`)\n- Body text: Gray 600 (`#4d4d4d`)\n- Border (shadow): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`\n- Link: Link Blue (`#0072f5`)\n- Focus ring: Focus Blue (`hsla(212, 100%, 48%, 1)`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 48px Geist weight 600, line-height 1.00, letter-spacing -2.4px, color #171717. Subtitle at 20px Geist weight 400, line-height 1.80, color #4d4d4d. Dark CTA button (#171717, 6px radius, 8px 16px padding) and ghost button (white, shadow-border rgba(0,0,0,0.08) 0px 0px 0px 1px, 6px radius).\"\n- \"Design a card: white background, no CSS border. Use shadow stack: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Radius 8px. Title at 24px Geist weight 600, letter-spacing -0.96px. Body at 16px weight 400, #4d4d4d.\"\n- \"Build a pill badge: #ebf5ff background, #0068d6 text, 9999px radius, 0px 10px padding, 12px Geist weight 500.\"\n- \"Create navigation: white sticky header. Geist 14px weight 500 for links, #171717 text. Dark pill CTA 'Start Deploying' right-aligned. Shadow-border on bottom: rgba(0,0,0,0.08) 0px 0px 0px 1px.\"\n- \"Design a workflow section showing three steps: Develop (text color #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Each step: 14px Geist Mono uppercase label + 24px Geist weight 600 title + 16px weight 400 description in #4d4d4d.\"\n\n### Iteration Guide\n1. Always use shadow-as-border instead of CSS border — `0px 0px 0px 1px rgba(0,0,0,0.08)` is the foundation\n2. Letter-spacing scales with font size: -2.4px at 48px, -1.28px at 32px, -0.96px at 24px, normal at 14px\n3. Three weights only: 400 (read), 500 (interact), 600 (announce)\n4. Color is functional, never decorative — workflow colors (Red\u002FPink\u002FBlue) mark pipeline stages only\n5. The inner `#fafafa` ring in card shadows is what gives Vercel cards their subtle inner glow\n6. Geist Mono uppercase for technical labels, Geist Sans for everything else\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Vercel (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #171717;\n    --white: #ffffff;\n    --gray-50: #fafafa;\n    --gray-100: #ebebeb;\n    --gray-400: #808080;\n    --gray-500: #666666;\n    --gray-600: #4d4d4d;\n    --link-blue: #0072f5;\n    --focus-blue: hsl(212,100%,48%);\n    --ship-red: #ff5b4f;\n    --preview-pink: #de1d8d;\n    --develop-blue: #0a72ef;\n    --console-blue: #0070f3;\n    --console-purple: #7928ca;\n    --console-pink: #eb367f;\n    --badge-bg: #ebf5ff;\n    --badge-text: #0068d6;\n    --shadow-ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;\n    --shadow-ring-light: rgb(235,235,235) 0px 0px 0px 1px;\n    --shadow-subtle: rgba(0,0,0,0.04) 0px 2px 2px 0px;\n    --shadow-card: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgb(250,250,250) 0px 0px 0px 1px;\n    --shadow-card-full: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgba(0,0,0,0.04) 0px 8px 8px -8px, rgb(250,250,250) 0px 0px 0px 1px;\n    --font-sans: 'Geist', system-ui, -apple-system, Arial, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    font-feature-settings: \"liga\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(255,255,255,0.85);\n    backdrop-filter: blur(12px);\n    box-shadow: var(--shadow-ring);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); }\n  .nav-cta {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 600; line-height: 1.00;\n    letter-spacing: -2.4px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.80; color: var(--gray-600); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--black); color: var(--white);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: var(--white); color: var(--black);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer;\n    box-shadow: var(--shadow-ring-light); transition: box-shadow 0.15s;\n  }\n  .btn-ghost:hover { box-shadow: var(--shadow-ring); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -1.28px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--gray-100); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-ring); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-600); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-100); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n  .btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; text-decoration: none; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-card-full); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.8px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-600); line-height: 1.50; }\n  .card-badge { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: none; padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    box-shadow: var(--shadow-ring); transition: box-shadow 0.15s;\n  }\n  .form-input:focus { box-shadow: 0 0 0 2px var(--focus-blue); }\n  .form-input--focus { box-shadow: 0 0 0 2px var(--focus-blue); }\n  .form-input--error { box-shadow: 0 0 0 2px var(--ship-red); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: none; padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n    box-shadow: var(--shadow-ring);\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--black); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--link-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -1.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Deploying\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Vercel\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Start Deploying\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#171717\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Vercel Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid #ebebeb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">True Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Console text default\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Workflow Accents\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0a72ef\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Develop Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0a72ef\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Development workflow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#de1d8d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Preview Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#de1d8d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Preview deployments\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff5b4f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ship Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff5b4f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Ship to production\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Console Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0070f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0070f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7928ca\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7928ca\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax purple\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eb367f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eb367f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4d4d4d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4d4d4d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#666666\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#666666\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#808080\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#808080\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebebeb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebebeb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fafafa; border-bottom:1px solid #ebebeb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle surface tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0072f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0072f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:hsl(212,100%,48%)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">hsl(212,100%,48%)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebf5ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Badge Bg\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebf5ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pill badge surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 48px \u002F 600 \u002F 1.00 \u002F -2.4px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:600; line-height:1.20; letter-spacing:-2.4px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 40px \u002F 600 \u002F 1.20 \u002F -2.4px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:600; line-height:1.25; letter-spacing:-1.28px;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 32px \u002F 600 \u002F 1.25 \u002F -1.28px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:600; line-height:1.33; letter-spacing:-0.96px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 600 \u002F 1.33 \u002F -0.96px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.33; letter-spacing:-0.96px;\">Card Title Light\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Light — 24px \u002F 500 \u002F 1.33 \u002F -0.96px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.80;\">Body Large — Build and deploy on the AI Cloud. Vercel provides tools for developers to ship fast.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.80 \u002F normal \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.50 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.50; letter-spacing:-0.32px;\">Body Semibold — Active states\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Semibold — 16px \u002F 600 \u002F 1.50 \u002F -0.32px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Button \u002F Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button \u002F Link — 14px \u002F 500 \u002F 1.43 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:500; line-height:1.33;\">Caption — Metadata and small labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 12px \u002F 500 \u002F 1.33 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50;\">const app = await deploy('next-app');\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body — 16px \u002F 400 \u002F 1.50 \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.00; text-transform:uppercase;\">DEPLOYMENT STATUS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Label — 12px \u002F 500 \u002F uppercase \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:7px; font-weight:700; line-height:1.00; text-transform:uppercase; background:var(--badge-bg); color:var(--badge-text); display:inline-block; padding:2px 6px; border-radius:9999px;\">NEW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro Badge — 7px \u002F 700 \u002F uppercase \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Start Deploying\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">AI Optimized\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--develop-blue); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Develop\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--preview-pink); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Preview\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--ship-red); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Ship\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">Framework\u003C\u002Fdiv>\n      \u003Ch3>Next.js Integration\u003C\u002Fh3>\n      \u003Cp>Zero-config deployments for Next.js applications. Automatic optimizations, edge rendering, and instant rollbacks.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card-full);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,91,79,0.1); color:var(--ship-red);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Edge Functions\u003C\u002Fh3>\n      \u003Cp>Run serverless functions at the edge with sub-millisecond cold starts. Card shown with full shadow stack.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(10,114,239,0.1); color:var(--develop-blue);\">AI\u003C\u002Fdiv>\n      \u003Ch3>v0 by Vercel\u003C\u002Fh3>\n      \u003Cp>Generate UI with AI. Describe what you want and v0 creates the code using shadcn\u002Fui and Tailwind CSS.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-next-app\">\u003Cdiv class=\"form-state-label\">Default (shadow-border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"vercel\u002Fnext.js\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Environment Variables\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"KEY=value\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Code spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">64px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tabs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--gray-100);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Shadow-as-border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(235,235,235) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1b: Light Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Lighter ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 2: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + subtle lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card-full);\">\u003Cdiv class=\"elevation-label\">Level 3: Full Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + lift + ambient + glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px hsl(212,100%,48%);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accessibility ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fvercel.com\u002F\">vercel.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Vercel (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --black: #ededed;\n    --white: #0a0a0a;\n    --gray-50: #111111;\n    --gray-100: #2a2a2a;\n    --gray-400: #666666;\n    --gray-500: #808080;\n    --gray-600: #a0a0a0;\n    --link-blue: #0072f5;\n    --focus-blue: hsl(212,100%,48%);\n    --ship-red: #ff5b4f;\n    --preview-pink: #de1d8d;\n    --develop-blue: #0a72ef;\n    --console-blue: #0070f3;\n    --console-purple: #7928ca;\n    --console-pink: #eb367f;\n    --badge-bg: #ebf5ff;\n    --badge-text: #0068d6;\n    --shadow-ring: rgba(255,255,255,0.1) 0px 0px 0px 1px;\n    --shadow-ring-light: rgba(255,255,255,0.08) 0px 0px 0px 1px;\n    --shadow-subtle: rgba(0,0,0,0.04) 0px 2px 2px 0px;\n    --shadow-card: rgba(255,255,255,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 2px 2px 0px, rgba(255,255,255,0.03) 0px 0px 0px 1px;\n    --shadow-card-full: rgba(255,255,255,0.12) 0px 0px 0px 1px, rgba(0,0,0,0.3) 0px 2px 2px 0px, rgba(0,0,0,0.2) 0px 8px 8px -8px, rgba(255,255,255,0.04) 0px 0px 0px 1px;\n    --font-sans: 'Geist', system-ui, -apple-system, Arial, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--white);\n    color: var(--black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    font-feature-settings: \"liga\" 1;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(10,10,10,0.88);\n    backdrop-filter: blur(12px);\n    box-shadow: var(--shadow-ring);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: none; letter-spacing: -0.28px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--black); }\n  .nav-cta {\n    display: inline-block; background: var(--white); color: var(--black);\n    padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500;\n    text-decoration: none; transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-size: 48px; font-weight: 600; line-height: 1.00;\n    letter-spacing: -2.4px; color: var(--black); margin-bottom: 16px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.80; color: var(--gray-600); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-dark {\n    display: inline-block; background: var(--white); color: var(--black);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-dark:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: var(--white); color: var(--black);\n    padding: 10px 20px; border-radius: 6px; border: none;\n    font-family: var(--font-sans); font-size: 14px; font-weight: 500;\n    text-decoration: none; cursor: pointer;\n    box-shadow: var(--shadow-ring-light); transition: box-shadow 0.15s;\n  }\n  .btn-ghost:hover { box-shadow: var(--shadow-ring); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -1.28px; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid #2a2a2a; margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-ring); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.26px; }\n  .color-swatch-hex { font-size: 12px; color: var(--gray-500); font-family: var(--font-mono); }\n  .color-swatch-role { font-size: 11px; color: var(--gray-400); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--gray-600); letter-spacing: -0.28px; margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-100); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--gray-400); margin-top: 8px; }\n  .btn-pill { display: inline-block; background: var(--badge-bg); color: var(--badge-text); padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; text-decoration: none; }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--white); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s; }\n  .card:hover { box-shadow: var(--shadow-card-full); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.8px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--gray-600); line-height: 1.50; }\n  .card-badge { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px; margin-bottom: 12px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--white); color: var(--black);\n    border: none; padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    box-shadow: var(--shadow-ring); transition: box-shadow 0.15s;\n  }\n  .form-input:focus { box-shadow: 0 0 0 2px var(--focus-blue); }\n  .form-input--focus { box-shadow: 0 0 0 2px var(--focus-blue); }\n  .form-input--error { box-shadow: 0 0 0 2px var(--ship-red); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--white); color: var(--black);\n    border: none; padding: 10px 12px; border-radius: 6px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n    box-shadow: var(--shadow-ring);\n  }\n  .form-state-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--black); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--black); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }\n  .radius-context { font-size: 10px; color: var(--gray-400); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--white); border-radius: 8px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; margin-bottom: 4px; }\n  .elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid #2a2a2a; font-size: 13px; color: var(--gray-500); }\n  .footer a { color: var(--link-blue); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; letter-spacing: -1.8px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Deploying\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#ededed;color:#0a0a0a;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Vercel\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Start Deploying\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#171717\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Vercel Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#171717\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0a0a0a; border-bottom:1px solid #2a2a2a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#000000\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">True Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#000000\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Console text default\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Workflow Accents\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0a72ef\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Develop Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0a72ef\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Development workflow\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#de1d8d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Preview Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#de1d8d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Preview deployments\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff5b4f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Ship Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff5b4f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Ship to production\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Console Colors\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0070f3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0070f3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax blue\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7928ca\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7928ca\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax purple\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eb367f\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Console Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eb367f\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Syntax pink\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#4d4d4d\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 600\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4d4d4d\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#666666\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 500\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#666666\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#808080\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#808080\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebebeb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 100\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebebeb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fafafa; border-bottom:1px solid #ebebeb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 50\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fafafa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Subtle surface tint\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Interactive\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0072f5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Link Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0072f5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Links\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:hsl(212,100%,48%)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">hsl(212,100%,48%)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ebf5ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Badge Bg\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ebf5ff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Pill badge surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:600; line-height:1.00; letter-spacing:-2.4px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 48px \u002F 600 \u002F 1.00 \u002F -2.4px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:600; line-height:1.20; letter-spacing:-2.4px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 40px \u002F 600 \u002F 1.20 \u002F -2.4px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:600; line-height:1.25; letter-spacing:-1.28px;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading — 32px \u002F 600 \u002F 1.25 \u002F -1.28px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:600; line-height:1.33; letter-spacing:-0.96px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 600 \u002F 1.33 \u002F -0.96px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:500; line-height:1.33; letter-spacing:-0.96px;\">Card Title Light\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title Light — 24px \u002F 500 \u002F 1.33 \u002F -0.96px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.80;\">Body Large — Build and deploy on the AI Cloud. Vercel provides tools for developers to ship fast.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.80 \u002F normal \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.50;\">Body Medium — Navigation and emphasized text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.50 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.50; letter-spacing:-0.32px;\">Body Semibold — Active states\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Semibold — 16px \u002F 600 \u002F 1.50 \u002F -0.32px \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Button \u002F Link\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button \u002F Link — 14px \u002F 500 \u002F 1.43 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:500; line-height:1.33;\">Caption — Metadata and small labels\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 12px \u002F 500 \u002F 1.33 \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:16px; font-weight:400; line-height:1.50;\">const app = await deploy('next-app');\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Body — 16px \u002F 400 \u002F 1.50 \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.00; text-transform:uppercase;\">DEPLOYMENT STATUS\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Mono Label — 12px \u002F 500 \u002F uppercase \u002F Geist Mono\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:7px; font-weight:700; line-height:1.00; text-transform:uppercase; background:var(--badge-bg); color:var(--badge-text); display:inline-block; padding:2px 6px; border-radius:9999px;\">NEW\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro Badge — 7px \u002F 700 \u002F uppercase \u002F Geist\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Start Deploying\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Dark\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Documentation\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">AI Optimized\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--develop-blue); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Develop\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--preview-pink); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Preview\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:var(--ship-red); color:#fff; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:500;\">Ship\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Workflow Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--badge-bg); color:var(--badge-text);\">Framework\u003C\u002Fdiv>\n      \u003Ch3>Next.js Integration\u003C\u002Fh3>\n      \u003Cp>Zero-config deployments for Next.js applications. Automatic optimizations, edge rendering, and instant rollbacks.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"box-shadow: var(--shadow-card-full);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,91,79,0.1); color:var(--ship-red);\">Elevated\u003C\u002Fdiv>\n      \u003Ch3>Edge Functions\u003C\u002Fh3>\n      \u003Cp>Run serverless functions at the edge with sub-millisecond cold starts. Card shown with full shadow stack.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(10,114,239,0.1); color:var(--develop-blue);\">AI\u003C\u002Fdiv>\n      \u003Ch3>v0 by Vercel\u003C\u002Fh3>\n      \u003Cp>Generate UI with AI. Describe what you want and v0 creates the code using shadcn\u002Fui and Tailwind CSS.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-next-app\">\u003Cdiv class=\"form-state-label\">Default (shadow-border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Repository\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"vercel\u002Fnext.js\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid domain\">\u003Cdiv class=\"form-state-label\">Error (red ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Environment Variables\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"KEY=value\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">6\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Code spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Small\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:6px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">64px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tabs\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Badges\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--gray-100);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1: Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Shadow-as-border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgb(235,235,235) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Level 1b: Light Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Lighter ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card);\">\u003Cdiv class=\"elevation-label\">Level 2: Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + subtle lift\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: var(--shadow-card-full);\">\u003Cdiv class=\"elevation-label\">Level 3: Full Card\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Ring + lift + ambient + glow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px hsl(212,100%,48%);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Accessibility ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fvercel.com\u002F\">vercel.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Vercel Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fvercel\u002FDESIGN.md) extracted from the public [Vercel](https:\u002F\u002Fvercel.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fvercel\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Vercel design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Vercel Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fvercel\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Vercel Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fvercel\u002Fpreview-screenshot.png)\n",{"slug":376,"name":377,"category":45,"designMd":378,"previewHtml":379,"previewDarkHtml":380,"readme":381},"voltagent","Voltagent","# Design System Inspiration of VoltAgent\n\n## 1. Visual Theme & Atmosphere\n\nVoltAgent's interface is a deep-space command terminal for the AI age — a developer-facing darkness built on near-pure-black surfaces (`#050507`) where the only interruption is the electric pulse of emerald green energy. The entire experience evokes the feeling of staring into a high-powered IDE at 2am: dark, focused, and alive with purpose. This is not a friendly SaaS landing page — it's an engineering platform that announces itself through code snippets, architectural diagrams, and raw technical confidence.\n\nThe green accent (`#00d992`) is used with surgical precision — it glows from headlines, borders, and interactive elements like a circuit board carrying a signal. Against the carbon-black canvas, this green reads as \"power on\" — a deliberate visual metaphor for an AI agent engineering platform. The supporting palette is built entirely from warm-neutral grays (`#3d3a39`, `#8b949e`, `#b8b3b0`) that soften the darkness without introducing color noise, creating a cockpit-like warmth that pure blue-grays would lack.\n\nTypography leans on the system font stack for headings — achieving maximum rendering speed and native-feeling authority — while Inter carries the body and UI text with geometric precision. Code blocks use SFMono-Regular, the same font developers see in their terminals, reinforcing the tool's credibility at every scroll.\n\n**Key Characteristics:**\n- Carbon-black canvas (`#050507`) with warm-gray border containment (`#3d3a39`) — not cold or sterile\n- Single-accent identity: Emerald Signal Green (`#00d992`) as the sole chromatic energy source\n- Dual-typography system: system-ui for authoritative headings, Inter for precise UI\u002Fbody text, SFMono for code credibility\n- Ultra-tight heading line-heights (1.0–1.11) creating dense, compressed power blocks\n- Warm neutral palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) that prevents the dark theme from feeling clinical\n- Developer-terminal aesthetic where code snippets ARE the hero content\n- Green glow effects (`drop-shadow`, border accents) that make UI elements feel electrically alive\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Emerald Signal Green** (`#00d992`): The core brand energy — used for accent borders, glow effects, and the highest-signal interactive moments. This is the \"power-on\" indicator of the entire interface.\n- **VoltAgent Mint** (`#2fd6a1`): The button-text variant of the brand green — slightly warmer and more readable than pure Signal Green, used specifically for CTA text on dark surfaces.\n- **Tailwind Emerald** (`#10b981`): The ecosystem-standard green used at low opacity (30%) for subtle background tints and link defaults. Bridges VoltAgent's custom palette with Tailwind's utility classes.\n\n### Secondary & Accent\n- **Soft Purple** (`#818cf8`): A cool indigo-violet used sparingly for secondary categorization, code syntax highlights, and visual variety without competing with green.\n- **Cobalt Primary** (`#306cce`): Docusaurus primary dark — used in documentation contexts for links and interactive focus states.\n- **Deep Cobalt** (`#2554a0`): The darkest primary shade, reserved for pressed\u002Factive states in documentation UI.\n- **Ring Blue** (`#3b82f6`): Tailwind's ring color at 50% opacity — visible only during keyboard focus for accessibility compliance.\n\n### Surface & Background\n- **Abyss Black** (`#050507`): The landing page canvas — a near-pure black with the faintest warm undertone, darker than most \"dark themes\" for maximum contrast with green accents.\n- **Carbon Surface** (`#101010`): The primary card and button background — one shade lighter than Abyss, creating a barely perceptible elevation layer. Used across all contained surfaces.\n- **Warm Charcoal Border** (`#3d3a39`): The signature containment color — not a cold gray but a warm, almost brownish dark tone that prevents borders from feeling harsh against the black canvas.\n\n### Neutrals & Text\n- **Snow White** (`#f2f2f2`): The primary text color on dark surfaces — not pure white (`#ffffff`) but a softened, eye-friendly off-white. The most-used color on the site (1008 instances).\n- **Pure White** (`#ffffff`): Reserved for the highest-emphasis moments — ghost button text and maximum-contrast headings. Used at low opacity (5%) for subtle overlay effects.\n- **Warm Parchment** (`#b8b3b0`): Secondary body text — a warm light gray with a slight pinkish undertone that reads as \"paper\" against the dark canvas.\n- **Steel Slate** (`#8b949e`): Tertiary text, metadata, timestamps, and de-emphasized content. A cool blue-gray that provides clear hierarchy below Warm Parchment.\n- **Fog Gray** (`#bdbdbd`): Footer links and supporting navigation text — brightens on hover to Pure White.\n- **Mist Gray** (`#dcdcdc`): Slightly brighter than Fog, used for secondary link text that transitions to bright green on hover.\n- **Near White** (`#eeeeee`): Highest-contrast secondary text, one step below Snow White.\n\n### Semantic & Accent\n- **Success Emerald** (`#008b00`): Deep green for success states and positive confirmations in documentation contexts.\n- **Success Light** (`#80d280`): Soft pastel green for success backgrounds and subtle positive indicators.\n- **Warning Amber** (`#ffba00`): Bright amber for warning alerts and caution states.\n- **Warning Pale** (`#ffdd80`): Softened amber for warning background fills.\n- **Danger Coral** (`#fb565b`): Vivid red for error states and destructive action warnings.\n- **Danger Rose** (`#fd9c9f`): Softened coral-pink for error backgrounds.\n- **Info Teal** (`#4cb3d4`): Cool teal-blue for informational callouts and tip admonitions.\n- **Dashed Border Slate** (`#4f5d75` at 40%): A muted blue-gray used exclusively for decorative dashed borders in workflow diagrams.\n\n### Gradient System\n- **Green Signal Glow**: `drop-shadow(0 0 2px #00d992)` animating to `drop-shadow(0 0 8px #00d992)` — creates a pulsing \"electric charge\" effect on the VoltAgent bolt logo and interactive elements. The glow expands and contracts like a heartbeat.\n- **Warm Ambient Haze**: `rgba(92, 88, 85, 0.2) 0px 0px 15px` — a warm-toned diffused shadow that creates a soft atmospheric glow around elevated cards, visible at the edges without sharp boundaries.\n- **Deep Dramatic Elevation**: `rgba(0, 0, 0, 0.7) 0px 20px 60px` with `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset` — a heavy, dramatic downward shadow paired with a faint inset slate ring for the most prominent floating elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary (Headings)**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`\n- **Secondary (Body\u002FUI)**: `Inter`, with fallbacks inheriting from system-ui stack. OpenType features: `\"calt\", \"rlig\"` (contextual alternates and required ligatures)\n- **Monospace (Code)**: `SFMono-Regular`, with fallbacks: `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display \u002F Hero | system-ui | 60px (3.75rem) | 400 | 1.00 (tight) | -0.65px | Maximum impact, compressed blocks |\n| Section Heading | system-ui | 36px (2.25rem) | 400 | 1.11 (tight) | -0.9px | Tightest letter-spacing in the system |\n| Sub-heading | system-ui | 24px (1.50rem) | 700 | 1.33 | -0.6px | Bold weight for emphasis at this size |\n| Sub-heading Light | system-ui \u002F Inter | 24px (1.50rem) | 300–400 | 1.33 | -0.6px | Light weight variant for softer hierarchy |\n| Overline | system-ui | 20px (1.25rem) | 600 | 1.40 | 0.5px | Uppercase transform, positive letter-spacing |\n| Feature Title | Inter | 20px (1.25rem) | 500–600 | 1.40 | normal | Card headings, feature names |\n| Overline Small | Inter | 18px (1.13rem) | 600 | 1.56 | 0.45px | Uppercase section labels |\n| Body \u002F Button | Inter | 16px (1.00rem) | 400–600 | 1.50–1.65 | normal | Standard text, nav links, buttons |\n| Nav Link | Inter | 14.45px (0.90rem) | 500 | 1.65 | normal | Navigation-specific sizing |\n| Caption \u002F Label | Inter | 14px (0.88rem) | 400–600 | 1.43–1.65 | normal | Descriptions, metadata, badge text |\n| Tag \u002F Overline Tiny | system-ui | 14px (0.88rem) | 600 | 1.43 | 2.52px | Widest letter-spacing — reserved for uppercase tags |\n| Micro | Inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Smallest sans-serif text |\n| Code Body | SFMono-Regular | 13–14px | 400–686 | 1.23–1.43 | normal | Inline code, terminal output, variable weight for syntax |\n| Code Small | SFMono-Regular | 11–12px | 400 | 1.33–1.45 | normal | Tiny code references, line numbers |\n| Code Button | monospace | 13px (0.81rem) | 700 | 1.65 | normal | Copy-to-clipboard button labels |\n\n### Principles\n- **System-native authority**: Display headings use system-ui rather than a custom web font — this means the largest text renders instantly (no FOIT\u002FFOUT) and inherits the operating system's native personality. On macOS it's SF Pro, on Windows it's Segoe UI. The design accepts this variability as a feature, not a bug.\n- **Tight compression creates density**: Hero line-heights are extremely compressed (1.0) with negative letter-spacing (-0.65px to -0.9px), creating text blocks that feel like dense technical specifications rather than airy marketing copy.\n- **Weight gradient, not weight contrast**: The system uses a gentle 300→400→500→600→700 weight progression. Bold (700) is reserved for sub-headings and code-button emphasis. Most body text lives at 400–500, creating subtle rather than dramatic hierarchy.\n- **Uppercase is earned and wide**: When uppercase appears, it's always paired with generous letter-spacing (0.45px–2.52px), transforming dense words into spaced-out overline labels. This treatment is never applied to headings.\n- **OpenType by default**: Both system-ui and Inter enable `\"calt\"` and `\"rlig\"` features, ensuring contextual character adjustments and ligature rendering throughout.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost \u002F Outline (Standard)**\n- Background: transparent\n- Text: Pure White (`#ffffff`)\n- Padding: comfortable (12px 16px)\n- Border: thin solid Warm Charcoal (`1px solid #3d3a39`)\n- Radius: comfortably rounded (6px)\n- Hover: background darkens to `rgba(0, 0, 0, 0.2)`, opacity drops to 0.4\n- Outline: subtle green tint (`rgba(33, 196, 93, 0.5)`)\n- The default interactive element — unassuming but clearly clickable\n\n**Primary Green CTA**\n- Background: Carbon Surface (`#101010`)\n- Text: VoltAgent Mint (`#2fd6a1`)\n- Padding: comfortable (12px 16px)\n- Border: none visible (outline-based focus indicator)\n- Outline: VoltAgent Mint (`rgb(47, 214, 161)`)\n- Hover: same darkening behavior as Ghost\n- The \"powered on\" button — green text on dark surface reads as an active terminal command\n\n**Tertiary \u002F Emphasized Container Button**\n- Background: Carbon Surface (`#101010`)\n- Text: Snow White (`#f2f2f2`)\n- Padding: generous (20px all sides)\n- Border: thick solid Warm Charcoal (`3px solid #3d3a39`)\n- Radius: comfortably rounded (8px)\n- A card-like button treatment for larger interactive surfaces (code copy blocks, feature CTAs)\n\n### Cards & Containers\n- Background: Carbon Surface (`#101010`) — one shade lighter than the page canvas\n- Border: `1px solid #3d3a39` (Warm Charcoal) for standard containment; `2px solid #00d992` for highlighted\u002Factive cards\n- Radius: comfortably rounded (8px) for content cards; subtly rounded (4–6px) for smaller inline containers\n- Shadow Level 1: Warm Ambient Haze (`rgba(92, 88, 85, 0.2) 0px 0px 15px`) for standard elevation\n- Shadow Level 2: Deep Dramatic (`rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`) for hero\u002Ffeature showcase cards\n- Hover behavior: likely border color shift toward green accent or subtle opacity increase\n- Dashed variant: `1px dashed rgba(79, 93, 117, 0.4)` for workflow\u002Fdiagram containers — visually distinct from solid-border content cards\n\n### Inputs & Forms\n- No explicit input token data extracted — the site is landing-page focused with minimal form UI\n- The npm install command (`npm create voltagent-app@latest`) is presented as a code block rather than an input field\n- Inferred style: Carbon Surface background, Warm Charcoal border, VoltAgent Mint focus ring, Snow White text\n\n### Navigation\n- Sticky top nav bar on Abyss Black canvas\n- Logo: VoltAgent bolt icon with animated green glow (`drop-shadow` cycling 2px–8px)\n- Nav structure: Logo → Product dropdown → Use Cases dropdown → Resources dropdown → GitHub stars badge → Docs CTA\n- Link text: Snow White (`#f2f2f2`) at 14–16px Inter, weight 500\n- Hover: links transition to green variants (`#00c182` or `#00ffaa`)\n- GitHub badge: social proof element integrated directly into nav\n- Mobile: collapses to hamburger menu, single-column vertical layout\n\n### Image Treatment\n- Dark-themed product screenshots and architectural diagrams dominate\n- Code blocks are treated as primary visual content — syntax-highlighted with SFMono-Regular\n- Agent workflow visualizations appear as interactive node graphs with green connection lines\n- Decorative dot-pattern backgrounds appear behind hero sections\n- Full-bleed within card containers, respecting 8px radius rounding\n\n### Distinctive Components\n\n**npm Install Command Block**\n- A prominent code snippet (`npm create voltagent-app@latest`) styled as a copyable command\n- SFMono-Regular on Carbon Surface with a copy-to-clipboard button\n- Functions as the primary CTA — \"install first, read later\" developer psychology\n\n**Company Logo Marquee**\n- Horizontal scrolling strip of developer\u002Fcompany logos\n- Infinite animation (`scrollLeft`\u002F`scrollRight`, 25–80s durations)\n- Pauses on hover and for users with reduced-motion preferences\n- Demonstrates ecosystem adoption without cluttering the layout\n\n**Feature Section Cards**\n- Large cards combining code examples with descriptive text\n- Left: code snippet with syntax highlighting; Right: feature description\n- Green accent border (`2px solid #00d992`) on highlighted\u002Factive features\n- Internal padding: generous (24–32px estimated)\n\n**Agent Flow Diagrams**\n- Interactive node-graph visualizations showing agent coordination\n- Connection lines use VoltAgent green variants\n- Nodes styled as mini-cards within the Warm Charcoal border system\n\n**Community \u002F GitHub Section**\n- Large GitHub icon as the visual anchor\n- Star count and contributor metrics prominently displayed\n- Warm social proof: Discord, X, Reddit, LinkedIn, YouTube links in footer\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px\n- Button padding: 12px 16px (standard), 20px (container-button)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (estimated 64–96px between major sections)\n- Component gap: 16–24px between sibling cards\u002Felements\n\n### Grid & Container\n- Max container width: approximately 1280–1440px, centered\n- Hero: centered single-column with maximum breathing room\n- Feature sections: alternating asymmetric layouts (code left \u002F text right, then reversed)\n- Logo marquee: full-width horizontal scroll, breaking the container constraint\n- Card grids: 2–3 column for feature showcases\n- Integration grid: responsive multi-column for partner\u002Fintegration icons\n\n### Whitespace Philosophy\n- **Cinematic breathing room between sections**: Massive vertical gaps create a \"scroll-through-chapters\" experience — each section feels like a new scene.\n- **Dense within components**: Cards and code blocks are internally compact, with tight line-heights and controlled padding. Information is concentrated, not spread thin.\n- **Border-defined separation**: Rather than relying solely on whitespace, VoltAgent uses the Warm Charcoal border system (`#3d3a39`) to delineate content zones. The border IS the whitespace signal.\n- **Hero-first hierarchy**: The top of the page commands the most space — the \"AI Agent Engineering Platform\" headline and npm command get maximum vertical runway before the first content section appears.\n\n### Border Radius Scale\n- Nearly squared (4px): Small inline elements, SVG containers, code spans — the sharpest treatment, conveying technical precision\n- Subtly rounded (6px): Buttons, links, clipboard actions — the workhorse radius for interactive elements\n- Code-specific (6.4px): Code blocks, `pre` elements, clipboard copy targets — a deliberate micro-distinction from standard 6px\n- Comfortably rounded (8px): Content cards, feature containers, emphasized buttons — the standard containment radius\n- Pill-shaped (9999px): Tags, badges, status indicators, pill-shaped navigation elements — the roundest treatment for small categorical labels\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background (`#050507`), inline text |\n| Contained (Level 1) | `1px solid #3d3a39`, no shadow | Standard cards, nav bar, code blocks |\n| Emphasized (Level 2) | `3px solid #3d3a39`, no shadow | Large interactive buttons, emphasized containers |\n| Accent (Level 3) | `2px solid #00d992`, no shadow | Active\u002Fhighlighted feature cards, selected states |\n| Ambient Glow (Level 4) | `rgba(92, 88, 85, 0.2) 0px 0px 15px` | Elevated cards, hover states, soft atmospheric lift |\n| Dramatic Float (Level 5) | `rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 1px inset` | Hero feature showcase, modals, maximum-elevation content |\n\n**Shadow Philosophy**: VoltAgent communicates depth primarily through **border weight and color**, not shadows. The standard `1px solid #3d3a39` border IS the elevation — adding a `3px` border weight or switching to green (`#00d992`) communicates importance more than adding shadow does. When shadows do appear, they're either warm and diffused (Level 4) or cinematic and dramatic (Level 5) — never medium or generic.\n\n### Decorative Depth\n- **Green Signal Glow**: The VoltAgent bolt logo pulses with a `drop-shadow` animation cycling between 2px and 8px blur radius in Emerald Signal Green. This is the most distinctive decorative element — it makes the logo feel \"powered on.\"\n- **Warm Charcoal Containment Lines**: The warm tone of `#3d3a39` borders creates a subtle visual warmth against the cool black, as if the cards are faintly heated from within.\n- **Dashed Workflow Lines**: `1px dashed rgba(79, 93, 117, 0.4)` creates a blueprint-like aesthetic for architecture diagrams, visually distinct from solid content borders.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Abyss Black (`#050507`) as the landing page background and Carbon Surface (`#101010`) for all contained elements — the two-shade dark system is essential\n- Reserve Emerald Signal Green (`#00d992`) exclusively for high-signal moments: active borders, glow effects, and the most important interactive accents\n- Use VoltAgent Mint (`#2fd6a1`) for button text on dark surfaces — it's more readable than pure Signal Green\n- Keep heading line-heights compressed (1.0–1.11) with negative letter-spacing for dense, authoritative text blocks\n- Use the warm gray palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) for borders and secondary text — warmth prevents the dark theme from feeling sterile\n- Present code snippets as primary content — they're hero elements, not supporting illustrations\n- Use border weight (1px → 2px → 3px) and color shifts (`#3d3a39` → `#00d992`) to communicate depth and importance, rather than relying on shadows\n- Pair system-ui for headings with Inter for body text — the speed\u002Fauthority of native fonts combined with the precision of a geometric sans\n- Use SFMono-Regular for all code content — it's the developer credibility signal\n- Apply `\"calt\"` and `\"rlig\"` OpenType features across all text\n\n### Don't\n- Don't use bright or light backgrounds as primary surfaces — the entire identity lives on near-black\n- Don't introduce warm colors (orange, red, yellow) as decorative accents — the palette is strictly green + warm neutrals on black. Warm colors are reserved for semantic states (warning, error) only\n- Don't use Emerald Signal Green (`#00d992`) on large surfaces or as background fills — it's an accent, never a surface\n- Don't increase heading line-heights beyond 1.33 — the compressed density is core to the engineering-platform identity\n- Don't use heavy shadows generously — depth comes from border treatment, not box-shadow. Shadows are reserved for Level 4–5 elevation only\n- Don't use pure white (`#ffffff`) as default body text — Snow White (`#f2f2f2`) is the standard. Pure white is reserved for maximum-emphasis headings and button text\n- Don't mix in serif or decorative fonts — the entire system is geometric sans + monospace\n- Don't use border-radius larger than 8px on content cards — 9999px (pill) is only for small tags and badges\n- Don't skip the warm-gray border system — cards without `#3d3a39` borders lose their containment and float ambiguously on the dark canvas\n- Don't animate aggressively — animations are slow and subtle (25–100s durations for marquee, gentle glow pulses). Fast motion contradicts the \"engineering precision\" atmosphere\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | \u003C420px | Minimum layout, stacked everything, reduced hero text to ~24px |\n| Mobile | 420–767px | Single column, hamburger nav, full-width cards, hero text ~36px |\n| Tablet | 768–1024px | 2-column grids begin, condensed nav, medium hero text |\n| Desktop | 1025–1440px | Full multi-column layout, expanded nav with dropdowns, large hero (60px) |\n| Large Desktop | >1440px | Max-width container centered (est. 1280–1440px), generous horizontal margins |\n\n*23 breakpoints detected in total, ranging from 360px to 1992px — indicating a fluid, heavily responsive grid system rather than fixed breakpoint snapping.*\n\n### Touch Targets\n- Buttons use comfortable padding (12px 16px minimum) ensuring adequate touch area\n- Navigation links spaced with sufficient gap for thumb navigation\n- Interactive card surfaces are large enough to serve as full touch targets\n- Minimum recommended touch target: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav with dropdowns collapses to hamburger menu on mobile\n- **Feature grids**: 3-column → 2-column → single-column vertical stacking\n- **Hero text**: 60px → 36px → 24px progressive scaling with maintained compression ratios\n- **Logo marquee**: Adjusts scroll speed and item sizing; maintains infinite loop\n- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping — preserving code readability\n- **Section padding**: Reduces proportionally but maintains generous vertical rhythm between chapters\n- **Cards**: Stack vertically on mobile with full-width treatment and maintained internal padding\n\n### Image Behavior\n- Dark-themed screenshots and diagrams scale proportionally within containers\n- Agent flow diagrams simplify or scroll horizontally on narrow viewports\n- Dot-pattern decorative backgrounds scale with viewport\n- No visible art direction changes between breakpoints — same crops, proportional scaling\n- Lazy loading for below-fold images (Docusaurus default behavior)\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Accent: \"Emerald Signal Green (#00d992)\"\n- Button Text: \"VoltAgent Mint (#2fd6a1)\"\n- Page Background: \"Abyss Black (#050507)\"\n- Card Surface: \"Carbon Surface (#101010)\"\n- Border \u002F Containment: \"Warm Charcoal (#3d3a39)\"\n- Primary Text: \"Snow White (#f2f2f2)\"\n- Secondary Text: \"Warm Parchment (#b8b3b0)\"\n- Tertiary Text: \"Steel Slate (#8b949e)\"\n\n### Example Component Prompts\n- \"Create a feature card on Carbon Surface (#101010) with a 1px solid Warm Charcoal (#3d3a39) border, comfortably rounded corners (8px). Use Snow White (#f2f2f2) for the title in system-ui at 24px weight 700, and Warm Parchment (#b8b3b0) for the description in Inter at 16px. Add a subtle Warm Ambient shadow (rgba(92, 88, 85, 0.2) 0px 0px 15px).\"\n- \"Design a ghost button with transparent background, Snow White (#f2f2f2) text in Inter at 16px, a 1px solid Warm Charcoal (#3d3a39) border, and subtly rounded corners (6px). Padding: 12px vertical, 16px horizontal. On hover, background shifts to rgba(0, 0, 0, 0.2).\"\n- \"Build a hero section on Abyss Black (#050507) with a massive heading at 60px system-ui, line-height 1.0, letter-spacing -0.65px. The word 'Platform' should be colored in Emerald Signal Green (#00d992). Below the heading, place a code block showing 'npm create voltagent-app@latest' in SFMono-Regular at 14px on Carbon Surface (#101010) with a copy button.\"\n- \"Create a highlighted feature card using a 2px solid Emerald Signal Green (#00d992) border instead of the standard Warm Charcoal. Keep Carbon Surface background, comfortably rounded corners (8px), and include a code snippet on the left with feature description text on the right.\"\n- \"Design a navigation bar on Abyss Black (#050507) with the VoltAgent logo (bolt icon with animated green glow) on the left, nav links in Inter at 14px weight 500 in Snow White, and a green CTA button (Carbon Surface bg, VoltAgent Mint text) on the right. Add a 1px solid Warm Charcoal bottom border.\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes — \"use Warm Parchment (#b8b3b0)\" not \"make it lighter\"\n3. Use border treatment to communicate elevation: \"change the border to 2px solid Emerald Signal Green (#00d992)\" for emphasis\n4. Describe the desired \"feel\" alongside measurements — \"compressed and authoritative heading at 36px with line-height 1.11 and -0.9px letter-spacing\"\n5. For glow effects, specify \"Emerald Signal Green (#00d992) as a drop-shadow with 2–8px blur radius\"\n6. Always specify which font — system-ui for headings, Inter for body\u002FUI, SFMono-Regular for code\n7. Keep animations slow and subtle — marquee scrolls at 25–80s, glow pulses gently\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: VoltAgent (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-abyss: #050507;\n    --color-carbon: #101010;\n    --color-signal-green: #00d992;\n    --color-mint: #2fd6a1;\n    --color-emerald: #10b981;\n    --color-purple: #818cf8;\n    --color-warm-charcoal: #3d3a39;\n    --color-steel: #8b949e;\n    --color-parchment: #b8b3b0;\n    --color-snow: #f2f2f2;\n    --color-white: #ffffff;\n    --color-fog: #bdbdbd;\n    --color-mist: #dcdcdc;\n    --color-warning: #ffba00;\n    --color-danger: #fb565b;\n    --color-info: #4cb3d4;\n    --color-success: #008b00;\n    --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Light mode overrides *\u002F\n    --bg-page: #ffffff;\n    --bg-card: #f8f8f8;\n    --bg-nav: rgba(255,255,255,0.92);\n    --text-primary: #101010;\n    --text-secondary: #3d3a39;\n    --text-muted: #8b949e;\n    --border-color: #e0e0e0;\n    --border-subtle: #f0f0f0;\n    --section-label-color: var(--color-signal-green);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand { font-family: var(--font-system); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }\n  .nav-brand .bolt { color: var(--color-signal-green); font-size: 20px; }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-signal-green); }\n  .nav-cta {\n    background: var(--color-carbon);\n    color: var(--color-mint);\n    padding: 8px 20px;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 600px;\n    height: 600px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(0,217,146,0.08) 0%, rgba(16,185,129,0.04) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-system);\n    font-size: 60px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -0.65px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span { color: var(--color-signal-green); }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary-green {\n    background: var(--color-carbon);\n    color: var(--color-mint);\n    padding: 12px 24px;\n    border: none;\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 24px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-system);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-system);\n    font-size: 36px;\n    font-weight: 400;\n    line-height: 1.11;\n    letter-spacing: -0.9px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 1.2;\n    margin-bottom: 20px;\n    color: var(--text-secondary);\n  }\n  .color-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n    gap: 16px;\n  }\n  .color-swatch {\n    border: 1px solid var(--border-color);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .color-swatch-block {\n    height: 80px;\n    position: relative;\n  }\n  .color-swatch-info {\n    padding: 12px;\n    background: var(--bg-card);\n  }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label {\n    font-family: var(--font-mono);\n    font-size: 12px;\n    color: var(--text-muted);\n  }\n\n  \u002F* BUTTONS *\u002F\n  .button-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .button-demo { text-align: center; }\n  .button-demo-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n  }\n  .btn-ghost-charcoal {\n    background: transparent;\n    color: var(--text-primary);\n    padding: 12px 16px;\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n  .btn-tertiary {\n    background: var(--bg-card);\n    color: var(--text-primary);\n    padding: 20px;\n    border: 3px solid var(--border-color);\n    border-radius: 8px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n  .btn-accent-border {\n    background: transparent;\n    color: var(--color-signal-green);\n    padding: 12px 16px;\n    border: 2px solid var(--color-signal-green);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 28px;\n  }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-accent {\n    border: 2px solid var(--color-signal-green);\n  }\n  .card-dramatic {\n    border: 1px solid var(--border-color);\n    box-shadow: 0px 20px 60px rgba(0,0,0,0.07);\n  }\n  .card h3 { font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px; margin-bottom: 12px; }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    color: var(--color-signal-green);\n    margin-bottom: 16px;\n  }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-carbon);\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 8px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--color-snow);\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-purple); }\n  .code-block .string { color: var(--color-mint); }\n  .code-block .comment { color: var(--color-steel); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box {\n    background: rgba(0,217,146,0.12);\n    border: 1px solid rgba(0,217,146,0.3);\n    border-radius: 2px;\n    margin-bottom: 8px;\n  }\n  .spacing-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 80px;\n    height: 80px;\n    background: var(--bg-card);\n    border: 1px solid var(--border-color);\n    margin-bottom: 8px;\n  }\n  .radius-label {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--text-muted);\n  }\n  .radius-context {\n    font-size: 11px;\n    color: var(--text-muted);\n    margin-top: 2px;\n  }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card {\n    background: var(--bg-card);\n    border-radius: 8px;\n    padding: 24px;\n    min-height: 140px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--border-subtle); }\n  .elevation-emphasized { border: 3px solid var(--border-color); }\n  .elevation-accent { border: 2px solid var(--color-signal-green); }\n  .elevation-ambient { border: 1px solid var(--border-color); box-shadow: 0px 0px 15px rgba(92,88,85,0.1); }\n  .elevation-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.07); }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level {\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--color-signal-green);\n    text-transform: uppercase;\n    letter-spacing: 0.55px;\n    margin-top: 12px;\n  }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"bolt\">⚡\u003C\u002Fspan> VoltAgent\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>VoltAgent\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-green\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #00d992;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Emerald Signal Green\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#00d992\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Core brand accent, glow effects, active borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #2fd6a1;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">VoltAgent Mint\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#2fd6a1\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">CTA button text on dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #10b981;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Tailwind Emerald\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#10b981\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Ecosystem green, link defaults, background tints at 30%\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #818cf8;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Soft Purple\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#818cf8\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary categorization, code syntax highlights\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #306cce;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Cobalt Primary\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#306cce\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Docs links, interactive focus states\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #4cb3d4;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Info Teal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#4cb3d4\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Informational callouts and tip admonitions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #050507; border-bottom: 1px solid #3d3a39;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Abyss Black\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#050507\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Landing page canvas\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #101010; border-bottom: 1px solid #3d3a39;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Carbon Surface\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#101010\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card backgrounds, button surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #3d3a39;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Charcoal\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#3d3a39\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Borders, containment lines\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #f2f2f2; border-bottom: 1px solid #e0e0e0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Snow White\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text on dark surfaces (1008 instances)\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #b8b3b0;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Parchment\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#b8b3b0\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary body text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #8b949e;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Steel Slate\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#8b949e\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tertiary text, metadata\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #ffba00;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warning Amber\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#ffba00\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Warning states and caution alerts\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #fb565b;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Danger Coral\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#fb565b\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Error states and destructive actions\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-block\" style=\"background: #008b00;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Success Emerald\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#008b00\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Success confirmations\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -0.65px;\">Display Hero\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 60px \u002F 400 \u002F 1.00 \u002F -0.65px — system-ui\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 36px; font-weight: 400; line-height: 1.11; letter-spacing: -0.9px;\">Section Heading\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F 400 \u002F 1.11 \u002F -0.9px — system-ui\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px;\">Sub-heading Bold\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Sub-heading Bold — 24px \u002F 700 \u002F 1.33 \u002F -0.6px — system-ui\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 20px; font-weight: 600; line-height: 1.40; text-transform: uppercase; letter-spacing: 0.5px;\">OVERLINE LABEL\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Overline — 20px \u002F 600 \u002F 1.40 \u002F 0.5px \u002F uppercase — system-ui\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;\">Feature Title\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Feature Title — 20px \u002F 600 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65;\">Body text for standard paragraphs, navigation links, and button labels. Inter provides geometric precision for all UI copy.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.65 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 500 \u002F 1.43 \u002F normal — Inter\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 2.52px; color: var(--text-muted);\">TINY OVERLINE TAG\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Tag \u002F Overline Tiny — 14px \u002F 600 \u002F 1.43 \u002F 2.52px \u002F uppercase — system-ui\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;\">const agent = new Agent({ name: \"voltagent\" })\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Body — 14px \u002F 400 \u002F 1.43 \u002F normal — SFMono-Regular\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33;\">import { Agent } from \"@voltagent\u002Fcore\"\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-sample-label\">Code Small — 12px \u002F 400 \u002F 1.33 \u002F normal — SFMono-Regular\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-primary-green\">Get Started\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Primary Green CTA\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Outline\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-ghost-charcoal\">Secondary\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Ghost \u002F Charcoal\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-accent-border\">Highlighted\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Accent Border\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\n      \u003Cbutton class=\"btn-tertiary\">Container Button\u003C\u002Fbutton>\n      \u003Cdiv class=\"button-demo-label\">Tertiary \u002F Container\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">\u002F\u002F npm install command — the primary CTA\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">$\u003C\u002Fspan> npm create voltagent-app@latest\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\n      \u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\n      \u003Ch3>Warm Charcoal Border\u003C\u002Fh3>\n      \u003Cp>Standard content card with 1px solid warm-charcoal border and 8px radius. The default container for features, code blocks, and content sections.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-accent\">\n      \u003Cdiv class=\"card-label\">Accent Highlighted\u003C\u002Fdiv>\n      \u003Ch3>Green Signal Border\u003C\u002Fh3>\n      \u003Cp>Active or highlighted card with 2px solid Emerald Signal Green border. Used for selected features, active states, and primary emphasis.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dramatic\">\n      \u003Cdiv class=\"card-label\">Dramatic Float\u003C\u002Fdiv>\n      \u003Ch3>Deep Shadow Elevation\u003C\u002Fh3>\n      \u003Cp>Maximum-elevation card with dramatic shadow (20px 60px) and inset slate ring. Reserved for hero feature showcases and floating content.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 2px to 64px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortably rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background and inline text.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid Warm Charcoal. Standard cards and code blocks.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-emphasized\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Emphasized\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">3px solid Warm Charcoal. Large interactive buttons and containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-accent\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Accent\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid Emerald Signal Green. Active\u002Fhighlighted feature cards.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-ambient\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Ambient Glow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm diffused shadow (15px blur). Soft atmospheric lift.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dramatic\">\n      \u003Cdiv>\u003Cdiv class=\"elevation-name\">Dramatic Float\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy shadow (20px 60px) + inset ring. Hero features, modals.\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-level\">Level 5\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: VoltAgent (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --color-abyss: #050507;\n    --color-carbon: #101010;\n    --color-signal-green: #00d992;\n    --color-mint: #2fd6a1;\n    --color-emerald: #10b981;\n    --color-purple: #818cf8;\n    --color-warm-charcoal: #3d3a39;\n    --color-steel: #8b949e;\n    --color-parchment: #b8b3b0;\n    --color-snow: #f2f2f2;\n    --color-white: #ffffff;\n    --color-fog: #bdbdbd;\n    --color-mist: #dcdcdc;\n    --color-warning: #ffba00;\n    --color-danger: #fb565b;\n    --color-info: #4cb3d4;\n    --color-success: #008b00;\n    --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, sans-serif;\n    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n    \u002F* Dark mode *\u002F\n    --bg-page: var(--color-abyss);\n    --bg-card: var(--color-carbon);\n    --bg-nav: rgba(5,5,7,0.92);\n    --text-primary: var(--color-snow);\n    --text-secondary: var(--color-parchment);\n    --text-muted: var(--color-steel);\n    --border-color: var(--color-warm-charcoal);\n    --border-subtle: rgba(61,58,57,0.5);\n    --section-label-color: var(--color-signal-green);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 40px;\n    background: var(--bg-nav);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-color);\n  }\n  .nav-brand { font-family: var(--font-system); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }\n  .nav-brand .bolt { color: var(--color-signal-green); font-size: 20px; filter: drop-shadow(0 0 4px #00d992); }\n  .nav-links { display: flex; gap: 32px; align-items: center; }\n  .nav-links a { color: var(--color-fog); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--color-signal-green); }\n  .nav-cta {\n    background: var(--color-carbon);\n    color: var(--color-mint);\n    padding: 8px 20px;\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* HERO *\u002F\n  .hero {\n    position: relative;\n    text-align: center;\n    padding: 120px 40px 100px;\n    overflow: hidden;\n  }\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 600px;\n    height: 600px;\n    transform: translate(-50%, -50%);\n    background: radial-gradient(circle, rgba(0,217,146,0.15) 0%, rgba(16,185,129,0.06) 40%, transparent 70%);\n    pointer-events: none;\n  }\n  .hero h1 {\n    font-family: var(--font-system);\n    font-size: 60px;\n    font-weight: 400;\n    line-height: 1.0;\n    letter-spacing: -0.65px;\n    margin-bottom: 24px;\n    position: relative;\n  }\n  .hero h1 span { color: var(--color-signal-green); text-shadow: 0 0 40px rgba(0,217,146,0.3); }\n  .hero p {\n    color: var(--text-secondary);\n    font-size: 18px;\n    line-height: 1.5;\n    margin-bottom: 40px;\n    position: relative;\n  }\n  .hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }\n  .btn-primary-green {\n    background: var(--color-carbon);\n    color: var(--color-mint);\n    padding: 12px 24px;\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n  .btn-ghost {\n    background: transparent;\n    color: var(--color-snow);\n    padding: 12px 24px;\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n\n  \u002F* SECTIONS *\u002F\n  .section {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 40px;\n  }\n  .section-title {\n    font-family: var(--font-system);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 2.52px;\n    color: var(--section-label-color);\n    margin-bottom: 12px;\n  }\n  .section-heading {\n    font-family: var(--font-system);\n    font-size: 36px;\n    font-weight: 400;\n    line-height: 1.11;\n    letter-spacing: -0.9px;\n    margin-bottom: 48px;\n  }\n  .section-divider {\n    border: none;\n    border-top: 1px solid var(--border-subtle);\n    margin: 0 40px;\n    max-width: 1200px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  \u002F* COLOR PALETTE *\u002F\n  .color-group { margin-bottom: 40px; }\n  .color-group-title { font-size: 20px; font-weight: 500; line-height: 1.2; margin-bottom: 20px; color: var(--text-secondary); }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }\n  .color-swatch { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }\n  .color-swatch-block { height: 80px; }\n  .color-swatch-info { padding: 12px; background: var(--bg-card); }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }\n  .color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-sample-text { margin-bottom: 8px; }\n  .type-sample-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }\n  .button-demo { text-align: center; }\n  .button-demo-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.55px; }\n  .btn-ghost-charcoal {\n    background: transparent;\n    color: var(--color-snow);\n    padding: 12px 16px;\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n  .btn-tertiary {\n    background: var(--color-carbon);\n    color: var(--color-snow);\n    padding: 20px;\n    border: 3px solid var(--color-warm-charcoal);\n    border-radius: 8px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    cursor: pointer;\n  }\n  .btn-accent-border {\n    background: transparent;\n    color: var(--color-signal-green);\n    padding: 12px 16px;\n    border: 2px solid var(--color-signal-green);\n    border-radius: 6px;\n    font-size: 16px;\n    font-family: var(--font-body);\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\n  .card { background: var(--bg-card); border-radius: 8px; padding: 28px; }\n  .card-standard { border: 1px solid var(--border-color); }\n  .card-accent { border: 2px solid var(--color-signal-green); }\n  .card-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.7); }\n  .card-dramatic::after { content: ''; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(148,163,184,0.1); pointer-events: none; }\n  .card h3 { font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px; margin-bottom: 12px; }\n  .card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }\n  .card-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.55px; color: var(--color-signal-green); margin-bottom: 16px; }\n\n  \u002F* CODE BLOCK *\u002F\n  .code-block {\n    background: var(--color-carbon);\n    border: 1px solid var(--color-warm-charcoal);\n    border-radius: 8px;\n    padding: 20px 24px;\n    margin-top: 24px;\n    font-family: var(--font-mono);\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--color-snow);\n    overflow-x: auto;\n  }\n  .code-block .keyword { color: var(--color-purple); }\n  .code-block .string { color: var(--color-mint); }\n  .code-block .comment { color: var(--color-steel); }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }\n  .spacing-item { text-align: center; }\n  .spacing-box { background: rgba(0,217,146,0.12); border: 1px solid rgba(0,217,146,0.3); border-radius: 2px; margin-bottom: 8px; }\n  .spacing-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 80px; height: 80px; background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; }\n  .radius-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }\n  .radius-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }\n  .elevation-card { background: var(--bg-card); border-radius: 8px; padding: 24px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }\n  .elevation-flat { border: none; background: var(--bg-page); }\n  .elevation-contained { border: 1px solid var(--border-color); }\n  .elevation-emphasized { border: 3px solid var(--border-color); }\n  .elevation-accent { border: 2px solid var(--color-signal-green); }\n  .elevation-ambient { border: 1px solid var(--border-color); box-shadow: 0px 0px 15px rgba(92,88,85,0.2); }\n  .elevation-dramatic { border: 1px solid var(--border-color); box-shadow: 0px 20px 60px rgba(0,0,0,0.7); }\n  .elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }\n  .elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }\n  .elevation-level { font-family: var(--font-mono); font-size: 11px; color: var(--color-signal-green); text-transform: uppercase; letter-spacing: 0.55px; margin-top: 12px; }\n\n  \u002F* RESPONSIVE *\u002F\n  @media (max-width: 768px) {\n    .nav { padding: 12px 20px; }\n    .nav-links a:not(.nav-cta-wrapper) { display: none; }\n    .hero { padding: 80px 20px 60px; }\n    .hero h1 { font-size: 36px; }\n    .section { padding: 60px 20px; }\n    .section-heading { font-size: 28px; }\n    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n    .card-grid { grid-template-columns: 1fr; }\n    .hero-buttons { flex-direction: column; align-items: center; }\n    .button-row { flex-direction: column; align-items: flex-start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- NAV -->\n\u003Cnav class=\"nav\">\n  \u003Cdiv class=\"nav-brand\">\u003Cspan class=\"bolt\">⚡\u003C\u002Fspan> VoltAgent\u003C\u002Fdiv>\n  \u003Cdiv class=\"nav-links\">\n    \u003Ca href=\"#colors\">Colors\u003C\u002Fa>\n    \u003Ca href=\"#typography\">Typography\u003C\u002Fa>\n    \u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\n    \u003Ca href=\"#cards\">Cards\u003C\u002Fa>\n    \u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\n    \u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\n    \u003Cbutton class=\"nav-cta\">Get Started\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>\n\n\u003C!-- HERO -->\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Preview:\u003Cbr>\u003Cspan>VoltAgent\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>Auto-generated design token catalog from DESIGN.md\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Cbutton class=\"btn-primary-green\">Explore Tokens\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn-ghost\">View Source\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- COLORS -->\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-title\">01 \u002F Color Palette\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Color Palette & Roles\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #00d992;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Emerald Signal Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00d992\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Core brand accent, glow effects, active borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #2fd6a1;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">VoltAgent Mint\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#2fd6a1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">CTA button text on dark surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #10b981;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Tailwind Emerald\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#10b981\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Ecosystem green, background tints at 30%\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Secondary & Accent\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #818cf8;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Soft Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#818cf8\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Code syntax, secondary categorization\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #306cce;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cobalt Primary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#306cce\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Docs links, focus states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #4cb3d4;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Info Teal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#4cb3d4\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Informational callouts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Background\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #050507; border-bottom: 1px solid #3d3a39;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Abyss Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#050507\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Landing page canvas\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #101010; border-bottom: 1px solid #3d3a39;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Carbon Surface\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#101010\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card backgrounds, button surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #3d3a39;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3d3a39\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, containment lines\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #f2f2f2;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Snow White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#f2f2f2\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text (1008 instances)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #b8b3b0;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Parchment\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b8b3b0\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary body text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #8b949e;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Steel Slate\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#8b949e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Tertiary text, metadata\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Semantic\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #ffba00;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning Amber\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffba00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning alerts\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #fb565b;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger Coral\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fb565b\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background: #008b00;\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Success Emerald\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#008b00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success confirmations\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- TYPOGRAPHY -->\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-title\">02 \u002F Typography Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Typography Rules\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 60px; font-weight: 400; line-height: 1.0; letter-spacing: -0.65px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Display \u002F Hero — 60px \u002F 400 \u002F 1.00 \u002F -0.65px — system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 36px; font-weight: 400; line-height: 1.11; letter-spacing: -0.9px;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Section Heading — 36px \u002F 400 \u002F 1.11 \u002F -0.9px — system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.6px;\">Sub-heading Bold\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Sub-heading Bold — 24px \u002F 700 \u002F 1.33 \u002F -0.6px — system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-system); font-size: 20px; font-weight: 600; line-height: 1.40; text-transform: uppercase; letter-spacing: 0.5px;\">OVERLINE LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Overline — 20px \u002F 600 \u002F 1.40 \u002F 0.5px \u002F uppercase — system-ui\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;\">Feature Title\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Feature Title — 20px \u002F 600 \u002F 1.40 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65;\">Body text for standard paragraphs, navigation links, and button labels. Inter provides geometric precision.\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Body \u002F Button — 16px \u002F 400 \u002F 1.65 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);\">Caption and metadata text for descriptions\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Caption — 14px \u002F 500 \u002F 1.43 \u002F normal — Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43;\">const agent = new Agent({ name: \"voltagent\" })\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Body — 14px \u002F 400 \u002F 1.43 \u002F normal — SFMono-Regular\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv class=\"type-sample-text\" style=\"font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.33;\">import { Agent } from \"@voltagent\u002Fcore\"\u003C\u002Fdiv>\u003Cdiv class=\"type-sample-label\">Code Small — 12px \u002F 400 \u002F 1.33 \u002F normal — SFMono-Regular\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BUTTONS -->\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-title\">03 \u002F Button Variants\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Buttons\u003C\u002Fh2>\n\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-primary-green\">Get Started\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Primary Green CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-ghost\">View Docs\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Ghost \u002F Outline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-ghost-charcoal\">Secondary\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Ghost \u002F Charcoal\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-accent-border\">Highlighted\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Accent Border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-demo\">\u003Cbutton class=\"btn-tertiary\">Container Button\u003C\u002Fbutton>\u003Cdiv class=\"button-demo-label\">Tertiary \u002F Container\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"code-block\" style=\"margin-top: 40px;\">\n    \u003Cspan class=\"comment\">\u002F\u002F npm install command — the primary CTA\u003C\u002Fspan>\u003Cbr>\n    \u003Cspan class=\"keyword\">$\u003C\u002Fspan> npm create voltagent-app@latest\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- CARDS -->\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-title\">04 \u002F Card Examples\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Cards & Containers\u003C\u002Fh2>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card card-standard\">\u003Cdiv class=\"card-label\">Standard Card\u003C\u002Fdiv>\u003Ch3>Warm Charcoal Border\u003C\u002Fh3>\u003Cp>Standard content card with 1px warm-charcoal border and 8px radius. The default container for features and code blocks.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-accent\">\u003Cdiv class=\"card-label\">Accent Highlighted\u003C\u002Fdiv>\u003Ch3>Green Signal Border\u003C\u002Fh3>\u003Cp>Active card with 2px solid Emerald Signal Green border. For selected features and primary emphasis.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card card-dramatic\" style=\"position: relative;\">\u003Cdiv class=\"card-label\">Dramatic Float\u003C\u002Fdiv>\u003Ch3>Deep Shadow Elevation\u003C\u002Fh3>\u003Cp>Maximum-elevation card with dramatic shadow and inset slate ring. For hero features and floating content.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- SPACING -->\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-title\">05 \u002F Spacing Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Spacing System\u003C\u002Fh2>\n  \u003Cp style=\"color: var(--text-secondary); margin-bottom: 32px;\">Base unit: 8px. Scale builds from 2px to 64px.\u003C\u002Fp>\n\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 8px; height: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 16px; height: 16px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 24px; height: 24px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">6px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 32px; height: 32px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 48px; height: 48px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">12px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 64px; height: 64px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 80px; height: 80px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">20px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 96px; height: 96px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">24px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 128px; height: 128px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">32px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 160px; height: 160px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-box\" style=\"width: 192px; height: 192px;\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-label\">48px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- BORDER RADIUS -->\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-title\">06 \u002F Border Radius Scale\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Border Radius\u003C\u002Fh2>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Nearly squared\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Subtly rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Comfortably rounded\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 9999px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">9999px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill-shaped\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- ELEVATION -->\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-title\">07 \u002F Elevation & Depth\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-heading\">Depth & Elevation\u003C\u002Fh2>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card elevation-flat\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow, no border. Page background.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 0\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-contained\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Contained\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid Warm Charcoal. Standard cards.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-emphasized\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Emphasized\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">3px solid Warm Charcoal. Large containers.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-accent\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Accent\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">2px solid Signal Green. Active features.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 3\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-ambient\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Ambient Glow\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Warm diffused shadow. Soft atmospheric lift.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card elevation-dramatic\">\u003Cdiv>\u003Cdiv class=\"elevation-name\">Dramatic Float\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Heavy shadow + inset ring. Hero features.\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-level\">Level 5\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cdiv style=\"height: 80px;\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# VoltAgent Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fvoltagent\u002FDESIGN.md) extracted from the public [VoltAgent](https:\u002F\u002Fvoltagent.dev\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fvoltagent\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the VoltAgent design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![VoltAgent Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fvoltagent\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![VoltAgent Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fvoltagent\u002Fpreview-screenshot.png)\n",{"slug":383,"name":384,"category":90,"designMd":385,"previewHtml":386,"previewDarkHtml":387,"readme":388},"warp","Warp","# Design System Inspiration of Warp\n\n## 1. Visual Theme & Atmosphere\n\nWarp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either — it's Warm Parchment (`#faf9f6`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.\n\nThe typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool — Matter has a softness and humanity that signals \"this terminal is for everyone, not just greybeards.\" Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.\n\nThe overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.\n\n**Key Characteristics:**\n- Warm dark background — not cold black, but earthy near-black with warm gray undertones\n- Warm Parchment (`#faf9f6`) text instead of pure white — subtle cream warmth\n- Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface\n- Nature photography interleaved with product screenshots — lifestyle meets developer tool\n- Almost monochromatic warm gray palette — no bold accent colors\n- Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling\n- Pill-shaped dark buttons (`#353534`, 50px radius) — restrained, muted CTAs\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Warm Parchment** (`#faf9f6`): Primary text color — a barely-cream off-white that softens every surface\n- **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces — warm, not cold\n- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background\n\n### Secondary & Accent\n- **Stone Gray** (`#868584`): Secondary text, muted descriptions — warm mid-gray\n- **Ash Gray** (`#afaeac`): Body text, button text — the workhorse reading color\n- **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone — underlined links in content\n\n### Surface & Background\n- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation\n- **Mist Border** (`rgba(226, 226, 226, 0.35)` \u002F `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment\n- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth\n\n### Neutrals & Text\n- **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text\n- **Ash Gray** (`#afaeac`): Body paragraphs, descriptions\n- **Stone Gray** (`#868584`): Secondary labels, subdued information\n- **Muted Purple** (`#666469`): Underlined links, tertiary content\n- **Dark Charcoal** (`#454545` \u002F `#353534`): Borders, button backgrounds\n\n### Semantic & Accent\n- Warp operates as an almost monochromatic system — no bold accent colors\n- Interactive states are communicated through opacity changes and underline decorations rather than color shifts\n- Any accent color would break the warm, restrained palette\n\n### Gradient System\n- No explicit gradients on the marketing site\n- Depth is created through layered semi-transparent surfaces and photography rather than color gradients\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: `Matter Regular` — geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif\n- **Medium**: `Matter Medium` — weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`\n- **Square**: `Matter SQ Regular` — squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`\n- **UI Supplement**: `Inter` — used for specific UI elements. Fallbacks: `Inter Placeholder`\n- **Monospace Display**: `Geist Mono` — for code\u002Fterminal display headings\n- **Monospace Body**: `Matter Mono Regular` — custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |\n| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |\n| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |\n| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |\n| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |\n| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |\n| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |\n| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |\n| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |\n| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |\n| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |\n| Nav\u002FUI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |\n| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |\n| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |\n| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |\n| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |\n| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal\u002Fcode display |\n| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |\n| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |\n\n### Principles\n- **Regular weight dominance**: Nearly all text uses weight 400 (Regular) — even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture\n- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px–2.4px), creating a magazine-editorial categorization system\n- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces\n- **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated\n- **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons\n- **Ghost**: No visible background, text-only with underline decoration on hover\n- **Hover**: Subtle opacity or brightness shift — no dramatic color changes\n\n### Cards & Containers\n- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius\n- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)\n- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius\n- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Dark background inputs with warm gray text\n- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)\n\n### Navigation\n- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links\n- **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active\u002Fhover\n- **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing\n- **Mobile**: Collapses to simplified navigation\n- **Sticky**: Nav stays fixed on scroll\n\n### Image Treatment\n- **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool\n- **Terminal screenshots**: Product UI shown in realistic terminal window frames\n- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative\n- **Full-bleed**: Images often span full container width with 8px radius\n- **Video**: Video elements present with 10px border-radius\n\n### Testimonial Section\n- Social proof area (\"Don't take our word for it\") with quotes\n- Muted styling consistent with overall restraint\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px\n- **Section padding**: 80px–120px vertical between major sections\n- **Card padding**: 16px–32px internal spacing\n- **Component gaps**: 8px–16px between related elements\n\n### Grid & Container\n- **Max width**: ~1500px container (breakpoint at 1500px), centered\n- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials\n- **Cinematic layout**: Wide containers that let photography breathe\n\n### Whitespace Philosophy\n- **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty\n- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information\n- **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment\n\n### Border Radius Scale\n- **4px**: Small interactive elements — buttons, tags\n- **5px–6px**: Standard components — links, small containers\n- **8px**: Images, video containers, standard cards\n- **10px**: Video elements, medium containers\n- **12px**: Feature cards, large images\n- **14px**: Large containers, prominent cards\n- **40px**: Large rounded sections\n- **50px**: Pill buttons — primary CTAs\n- **200px**: Progress bars — full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |\n| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |\n| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |\n| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |\n\n### Shadow Philosophy\nWarp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:\n- **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment\n- **Photography layering** — images create natural depth without artificial shadows\n- **Surface opacity shifts** — `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences\n- The effect is calm and grounded — nothing floats, everything rests\n\n### Decorative Depth\n- **Photography as depth**: Nature images create atmospheric depth that shadows cannot\n- **No glass or blur effects**: The design avoids trendy glassmorphism entirely\n- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm off-white (`#faf9f6`) for text instead of pure white — the cream undertone is essential\n- Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs\n- Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only\n- Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization\n- Interleave nature photography with product screenshots — this is core to the brand identity\n- Maintain the almost monochromatic warm gray palette — no bold accent colors\n- Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows\n- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment\n\n### Don't\n- Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)\n- Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays\n- Apply bold weight (700+) to any text — Warp never goes above Medium (500)\n- Use heavy drop shadows — depth comes from borders, photography, and opacity shifts\n- Create cold or blue-tinted dark backgrounds — the warmth is essential\n- Add decorative gradients or glow effects — the photography provides all visual interest\n- Use tight, compressed layouts — the editorial spacing is generous and contemplative\n- Mix in additional typefaces beyond the Matter family + Inter supplement\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |\n| Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |\n| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |\n\n### Touch Targets\n- Pill buttons: 50px radius with 10px padding — comfortable touch targets\n- Nav links: 16px text with surrounding padding for accessibility\n- Mobile CTAs: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → simplified mobile navigation\n- **Hero text**: 80px display → 56px → 48px across breakpoints\n- **Feature sections**: Side-by-side photography + text → stacked vertically\n- **Photography**: Scales within containers, maintains cinematic aspect ratios\n- **Section spacing**: Reduces proportionally — generous desktop → compact mobile\n\n### Image Behavior\n- Nature photography scales responsively, maintaining wide cinematic ratios\n- Terminal screenshots maintain aspect ratios within responsive containers\n- Video elements scale with 10px radius maintained\n- No art direction changes — same compositions across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Warm Parchment (`#faf9f6`)\n- Secondary Text: Ash Gray (`#afaeac`)\n- Tertiary Text: Stone Gray (`#868584`)\n- Button Background: Earth Gray (`#353534`)\n- Border: Mist Border (`rgba(226, 226, 226, 0.35)`)\n- Background: Deep warm near-black (page background)\n\n### Example Component Prompts\n- \"Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)\"\n- \"Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px\"\n- \"Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style\"\n- \"Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation\"\n- \"Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential\n2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs\n3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis\n4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here\n5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Warp\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #0e0e0d;\n    --bg-surface: #161615;\n    --parchment: #faf9f6;\n    --ash: #afaeac;\n    --stone: #868584;\n    --purple-gray: #666469;\n    --earth: #353534;\n    --charcoal: #454545;\n    --border: rgba(226, 226, 226, 0.35);\n    --border-subtle: rgba(226, 226, 226, 0.15);\n    --frosted: rgba(255, 255, 255, 0.04);\n    --frosted-btn: rgba(255, 255, 255, 0.16);\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font);\n    background: var(--bg);\n    color: var(--parchment);\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(14, 14, 13, 0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }\n  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }\n  .nav-links a {\n    color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400;\n    transition: color 0.2s;\n  }\n  .nav-links a:hover { color: var(--parchment); }\n  .nav-cta {\n    background: var(--earth); color: var(--ash) !important;\n    padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.8; }\n\n  .hero {\n    padding: 120px 32px 100px; text-align: center;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .hero h1 {\n    font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;\n    color: var(--parchment); margin-bottom: 20px;\n  }\n  .hero .subtitle {\n    font-size: 20px; color: var(--ash); letter-spacing: -0.2px;\n    line-height: 1.4; max-width: 560px; margin: 0 auto 40px;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-flex; align-items: center;\n    background: var(--earth); color: var(--ash);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 500; text-decoration: none;\n    border: none; cursor: pointer; transition: opacity 0.2s;\n    font-family: var(--font);\n  }\n  .btn-primary:hover { opacity: 0.8; }\n  .btn-secondary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--parchment);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 400; text-decoration: none;\n    border: 1px solid var(--border); cursor: pointer;\n    transition: opacity 0.2s; font-family: var(--font);\n  }\n  .btn-secondary:hover { opacity: 0.7; }\n\n  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }\n  .section-title {\n    font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px;\n  }\n  .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }\n  .section-divider {\n    border: none; border-top: 1px solid var(--border-subtle);\n    max-width: 1136px; margin: 0 auto;\n  }\n\n  .color-group { margin-bottom: 40px; }\n  .color-group-title {\n    font-size: 12px; font-weight: 400; color: var(--stone);\n    text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px;\n  }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }\n  .color-swatch {\n    border-radius: 12px; overflow: hidden;\n    background: var(--bg-surface); border: 1px solid var(--border-subtle);\n  }\n  .color-swatch-preview { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 12px; }\n  .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }\n  .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }\n\n  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label {\n    font-size: 12px; color: var(--stone); letter-spacing: 2.4px;\n    text-transform: uppercase; margin-bottom: 8px;\n  }\n  .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }\n\n  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .btn-tag {\n    background: var(--frosted-btn); color: var(--parchment);\n    padding: 4px 12px; border-radius: 6px;\n    font-size: 14px; font-weight: 400; border: none; cursor: pointer;\n    transition: opacity 0.2s; font-family: var(--font);\n  }\n  .btn-tag:hover { opacity: 0.7; }\n  .btn-ghost {\n    background: transparent; color: var(--ash);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 400; border: none; cursor: pointer;\n    text-decoration: underline; text-underline-offset: 3px;\n    text-decoration-color: var(--charcoal);\n    transition: color 0.2s; font-family: var(--font);\n  }\n  .btn-ghost:hover { color: var(--parchment); }\n  .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }\n  .btn-item { text-align: center; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }\n  .card {\n    background: var(--bg-surface); border-radius: 14px; padding: 28px;\n    border: 1px solid var(--border); transition: border-color 0.3s;\n  }\n  .card:hover { border-color: rgba(226, 226, 226, 0.5); }\n  .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }\n  .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }\n  .card-tag {\n    display: inline-block; padding: 2px 8px;\n    background: var(--frosted-btn); border-radius: 4px;\n    font-size: 12px; font-weight: 400; color: var(--parchment);\n    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;\n  }\n\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }\n  .form-input {\n    background: var(--bg); border: 1px solid var(--border-subtle);\n    border-radius: 8px; padding: 12px 14px; color: var(--parchment);\n    font-size: 16px; font-family: var(--font); outline: none;\n    transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--stone); }\n  .form-input:focus { border-color: var(--ash); }\n  .form-input-error { border-color: #c45050; }\n  .form-error-text { font-size: 12px; color: #c45050; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }\n  .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.3; }\n  .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }\n\n  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }\n  .radius-item { text-align: center; }\n  .radius-box {\n    width: 64px; height: 64px;\n    background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px;\n  }\n  .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }\n  .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }\n  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }\n  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }\n  .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }\n\n  .footer {\n    text-align: center; padding: 48px 32px;\n    border-top: 1px solid var(--border-subtle); margin-top: 40px;\n  }\n  .footer p { font-size: 13px; color: var(--stone); }\n  .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 48px; letter-spacing: -1.5px; }\n    .section-title { font-size: 36px; letter-spacing: -0.7px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Download\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Warp\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #faf9f6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Parchment\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faf9f6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text, barely-cream off-white\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #353534;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Earth Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#353534\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds, dark surfaces\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0e0e0d; border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Void\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0e0e0d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background, warm near-black\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #afaeac;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ash Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#afaeac\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Body text, button text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #868584;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#868584\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text, labels\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #666469;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Purple-Tint Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#666469\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Link text, subtle purple undertone\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Border\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted Veil\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.04)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Subtle surface overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(226,226,226,0.35);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mist Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(226,226,226,0.35)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders, containment\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.16);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted Button\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.16)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tag\u002Finline button background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 80px \u002F 400 \u002F 1.00 \u002F -2.4px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;\">The best terminal\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular (shown in Inter fallback) — maximum compression\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 56px \u002F 400 \u002F 1.20 \u002F -0.56px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;\">Development environment\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — feature section headings\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Feature Heading — 40px \u002F 400 \u002F 1.10 \u002F -0.4px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;\">Agents that actually work\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — feature block titles\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Card Title — 22px \u002F 500 \u002F 1.14\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 22px; font-weight: 500; line-height: 1.14;\">Everything you need to ship faster\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Medium — emphasized card headers\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F -0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);\">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — relaxed reading rhythm\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 18px \u002F 400 \u002F 1.30 \u002F -0.18px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);\">Built from the ground up in Rust for speed, with AI integrated at every level.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — standard body paragraphs\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Uppercase Label — 12px \u002F 400 \u002F 1.35 \u002F 2.4px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);\">Featured Integration\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — editorial categorization, wide tracking\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Code — 16px \u002F 400 \u002F 1.00\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);\">curl -fsSL https:\u002F\u002Fwarp.dev\u002Finstall | bash\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Geist Mono \u002F Matter Mono Regular — terminal display\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Download Warp\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Dark Pill \u002F Primary\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Border Pill \u002F Secondary\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-tag\">New Feature\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Frosted Tag \u002F 6px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">Read the blog\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost \u002F Underline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\" style=\"padding: 8px 20px; font-size: 14px;\">Sign Up\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Small \u002F Nav CTA\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Semi-transparent borders for containment, warm dark surfaces, editorial category tags.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Terminal\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Built in Rust\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">AI Agent\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Agent Mode\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Collaboration\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Shared Workflows\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@warp.dev\" style=\"border-color: var(--ash);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">API Key (Error)\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key\">\n      \u003Cspan class=\"form-error-text\">Invalid key format\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your workflow...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit with editorial-grade spacing for the magazine-like layout.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 36px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 56px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 80px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 128px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 180px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">36px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 210px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From small tags to full pill CTAs — radius grows with element prominence.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 14px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">40px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50px; width: 64px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">50px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 200px; width: 120px; height: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">200px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Progress bar\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Remarkably flat — depth through borders and photography, not shadows.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow. The warm dark canvas baseline. Most surfaces rest here.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Veil\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Border\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Ambient\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Subtle ambient shadow for floating elements. Used sparingly.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fwarp.dev\">warp.dev\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Inspired by Warp — Dark Mode\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #080807;\n    --bg-surface: #111110;\n    --parchment: #f5f4f1;\n    --ash: #a5a4a2;\n    --stone: #7a7978;\n    --purple-gray: #5c5a5f;\n    --earth: #2c2c2b;\n    --charcoal: #3a3a39;\n    --border: rgba(200, 200, 198, 0.25);\n    --border-subtle: rgba(200, 200, 198, 0.1);\n    --frosted: rgba(255, 255, 255, 0.03);\n    --frosted-btn: rgba(255, 255, 255, 0.12);\n    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    font-family: var(--font);\n    background: var(--bg);\n    color: var(--parchment);\n    line-height: 1.4;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  .dark-badge {\n    position: fixed; top: 14px; right: 14px; z-index: 200;\n    background: var(--parchment); color: var(--bg);\n    padding: 5px 12px; border-radius: 50px;\n    font-size: 11px; font-weight: 500;\n  }\n\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 32px;\n    background: rgba(8, 8, 7, 0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border-subtle);\n  }\n  .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }\n  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }\n  .nav-links a { color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400; transition: color 0.2s; }\n  .nav-links a:hover { color: var(--parchment); }\n  .nav-cta {\n    background: var(--earth); color: var(--ash) !important;\n    padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;\n    transition: opacity 0.2s;\n  }\n  .nav-cta:hover { opacity: 0.8; }\n\n  .hero {\n    padding: 120px 32px 100px; text-align: center;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .hero h1 {\n    font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;\n    color: var(--parchment); margin-bottom: 20px;\n  }\n  .hero .subtitle {\n    font-size: 20px; color: var(--ash); letter-spacing: -0.2px;\n    line-height: 1.4; max-width: 560px; margin: 0 auto 40px;\n  }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-flex; align-items: center;\n    background: var(--earth); color: var(--ash);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 500; text-decoration: none;\n    border: none; cursor: pointer; transition: opacity 0.2s; font-family: var(--font);\n  }\n  .btn-primary:hover { opacity: 0.8; }\n  .btn-secondary {\n    display: inline-flex; align-items: center;\n    background: transparent; color: var(--parchment);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 400; text-decoration: none;\n    border: 1px solid var(--border); cursor: pointer;\n    transition: opacity 0.2s; font-family: var(--font);\n  }\n  .btn-secondary:hover { opacity: 0.7; }\n\n  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }\n  .section-title { font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px; }\n  .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }\n  .section-divider { border: none; border-top: 1px solid var(--border-subtle); max-width: 1136px; margin: 0 auto; }\n\n  .color-group { margin-bottom: 40px; }\n  .color-group-title { font-size: 12px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px; }\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }\n  .color-swatch { border-radius: 12px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); }\n  .color-swatch-preview { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 12px; }\n  .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }\n  .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }\n  .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }\n\n  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-label { font-size: 12px; color: var(--stone); letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 8px; }\n  .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }\n\n  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }\n  .btn-tag {\n    background: var(--frosted-btn); color: var(--parchment);\n    padding: 4px 12px; border-radius: 6px;\n    font-size: 14px; font-weight: 400; border: none; cursor: pointer;\n    transition: opacity 0.2s; font-family: var(--font);\n  }\n  .btn-tag:hover { opacity: 0.7; }\n  .btn-ghost {\n    background: transparent; color: var(--ash);\n    padding: 12px 28px; border-radius: 50px;\n    font-size: 16px; font-weight: 400; border: none; cursor: pointer;\n    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--charcoal);\n    transition: color 0.2s; font-family: var(--font);\n  }\n  .btn-ghost:hover { color: var(--parchment); }\n  .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }\n  .btn-item { text-align: center; }\n\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }\n  .card {\n    background: var(--bg-surface); border-radius: 14px; padding: 28px;\n    border: 1px solid var(--border); transition: border-color 0.3s;\n  }\n  .card:hover { border-color: rgba(200, 200, 198, 0.4); }\n  .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }\n  .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }\n  .card-tag {\n    display: inline-block; padding: 2px 8px;\n    background: var(--frosted-btn); border-radius: 4px;\n    font-size: 12px; font-weight: 400; color: var(--parchment);\n    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;\n  }\n\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }\n  .form-input {\n    background: var(--bg); border: 1px solid var(--border-subtle);\n    border-radius: 8px; padding: 12px 14px; color: var(--parchment);\n    font-size: 16px; font-family: var(--font); outline: none; transition: border-color 0.2s;\n  }\n  .form-input::placeholder { color: var(--stone); }\n  .form-input:focus { border-color: var(--ash); }\n  .form-input-error { border-color: #b04040; }\n  .form-error-text { font-size: 12px; color: #b04040; }\n  textarea.form-input { min-height: 100px; resize: vertical; }\n\n  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }\n  .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.25; }\n  .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }\n\n  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px; }\n  .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }\n  .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }\n\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }\n  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }\n  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }\n  .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }\n\n  .footer { text-align: center; padding: 48px 32px; border-top: 1px solid var(--border-subtle); margin-top: 40px; }\n  .footer p { font-size: 13px; color: var(--stone); }\n  .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 48px; letter-spacing: -1.5px; }\n    .section-title { font-size: 36px; letter-spacing: -0.7px; }\n    .nav-links { display: none; }\n    .color-grid { grid-template-columns: repeat(2, 1fr); }\n    .card-grid { grid-template-columns: 1fr; }\n    .form-grid { grid-template-columns: 1fr; }\n    .elevation-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Cnav class=\"nav\">\n  \u003Cspan class=\"nav-brand\">awesome-design-md\u003C\u002Fspan>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#elevation\">Elevation\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\" class=\"nav-cta\">Download\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Warp\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca href=\"#colors\" class=\"btn-primary\">Explore Tokens\u003C\u002Fa>\n    \u003Ca href=\"#buttons\" class=\"btn-secondary\">View Components\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces.\u003C\u002Fp>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Primary\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #faf9f6;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Warm Parchment\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#faf9f6\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #353534;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Earth Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#353534\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Button backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #0e0e0d; border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Deep Void\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#0e0e0d\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Neutrals & Text\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #afaeac;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Ash Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#afaeac\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Body text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #868584;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Stone Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#868584\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: #666469;\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Purple-Tint Gray\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">#666469\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Link text\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group\">\n    \u003Ch3 class=\"color-group-title\">Surface & Border\u003C\u002Fh3>\n    \u003Cdiv class=\"color-grid\">\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted Veil\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.04)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Surface overlay\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(226,226,226,0.35);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Mist Border\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(226,226,226,0.35)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Card borders\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"color-swatch\">\n        \u003Cdiv class=\"color-swatch-preview\" style=\"background: rgba(255,255,255,0.16);\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"color-swatch-info\">\n          \u003Cdiv class=\"color-swatch-name\">Frosted Button\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.16)\u003C\u002Fdiv>\n          \u003Cdiv class=\"color-swatch-role\">Tag backgrounds\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Matter font family — geometric but approachable. Regular weight dominance.\u003C\u002Fp>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Display Hero — 80px \u002F 400 \u002F 1.00 \u002F -2.4px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;\">The best terminal\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular (Inter fallback)\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Section Display — 56px \u002F 400 \u002F 1.20 \u002F -0.56px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;\">Development environment\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F -0.2px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -0.2px; color: var(--ash);\">Warp is the terminal reimagined with AI and collaborative tools for modern development teams.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — relaxed reading\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Body — 18px \u002F 400 \u002F 1.30 \u002F -0.18px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.18px; color: var(--ash);\">Built from the ground up in Rust for speed, with AI integrated at every level.\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Uppercase Label — 12px \u002F 400 \u002F 1.35 \u002F 2.4px\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);\">Featured Integration\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Matter Regular — editorial wide tracking\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"type-sample\">\n    \u003Cdiv class=\"type-label\">Code — 16px \u002F 400 \u002F 1.00\u003C\u002Fdiv>\n    \u003Cdiv style=\"font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);\">curl -fsSL https:\u002F\u002Fwarp.dev\u002Finstall | bash\u003C\u002Fdiv>\n    \u003Cdiv class=\"type-spec\">Geist Mono\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Restrained and muted — dark pills, frosted tags, underline ghosts.\u003C\u002Fp>\n\n  \u003Cdiv class=\"button-showcase\">\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-primary\">Download Warp\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Dark Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Ca href=\"#\" class=\"btn-secondary\">Learn More\u003C\u002Fa>\n      \u003Cspan class=\"btn-label\">Border Pill\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-tag\">New Feature\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Frosted Tag\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"btn-item\">\n      \u003Cbutton class=\"btn-ghost\">Read the blog\u003C\u002Fbutton>\n      \u003Cspan class=\"btn-label\">Ghost Underline\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Semi-transparent borders, warm dark surfaces, editorial tags.\u003C\u002Fp>\n\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Terminal\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Built in Rust\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Blazingly fast terminal performance with native rendering and GPU acceleration.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">AI Agent\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Agent Mode\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Let AI agents handle complex terminal workflows while you focus on building.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">Collaboration\u003C\u002Fdiv>\n      \u003Ch3 class=\"card-title\">Shared Workflows\u003C\u002Fh3>\n      \u003Cp class=\"card-text\">Share terminal sessions, commands, and configurations with your team.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Warm dark inputs with subtle borders. No colored focus rings.\u003C\u002Fp>\n\n  \u003Cdiv class=\"form-grid\">\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Full Name\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input\" placeholder=\"Enter your name\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Email (Focus)\u003C\u002Flabel>\n      \u003Cinput type=\"email\" class=\"form-input\" placeholder=\"you@warp.dev\" style=\"border-color: var(--ash);\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">API Key (Error)\u003C\u002Flabel>\n      \u003Cinput type=\"text\" class=\"form-input form-input-error\" value=\"invalid-key\">\n      \u003Cspan class=\"form-error-text\">Invalid key format\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"form-group\">\n      \u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\n      \u003Ctextarea class=\"form-input\" placeholder=\"Describe your workflow...\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">8px base unit with editorial-grade spacing.\u003C\u002Fp>\n\n  \u003Cdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">4px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 16px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">8px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 36px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">12px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 56px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">16px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 80px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">24px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 128px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">32px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 180px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-row\">\u003Cspan class=\"spacing-label\">36px\u003C\u002Fspan>\u003Cdiv class=\"spacing-box\" style=\"width: 210px;\">\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">From small tags to full pill CTAs.\u003C\u002Fp>\n\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 4px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Tags\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 6px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">6px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 8px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Images\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">12px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 14px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">40px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Sections\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 50px; width: 64px; height: 40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">50px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius: 200px; width: 120px; height: 12px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-value\">200px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Progress\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cp class=\"section-desc\">Remarkably flat — depth through borders and photography.\u003C\u002Fp>\n\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: none; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 0 — Flat\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">No shadow. The warm dark canvas baseline.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 1 — Veil\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Ultra-subtle white overlay.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\n      \u003Cdiv class=\"elevation-label\">Level 2 — Border\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Semi-transparent border containment.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: rgba(0,0,0,0.25) 0px 5px 15px; border: 1px solid var(--border-subtle);\">\n      \u003Cdiv class=\"elevation-label\">Level 3 — Ambient\u003C\u002Fdiv>\n      \u003Cdiv class=\"elevation-desc\">Subtle shadow for floating elements.\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  \u003Cp>Design system extracted from \u003Ca href=\"https:\u002F\u002Fwarp.dev\">warp.dev\u003C\u002Fa> — Generated by awesome-design-md\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Warp Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwarp\u002FDESIGN.md) extracted from the public [Warp](https:\u002F\u002Fwarp.dev\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwarp\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Warp design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Warp Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwarp\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Warp Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwarp\u002Fpreview-screenshot.png)\n",{"slug":390,"name":391,"category":15,"designMd":392,"previewHtml":393,"previewDarkHtml":394,"readme":395},"webflow","Webflow","# Design System Inspiration of Webflow\n\n## 1. Visual Theme & Atmosphere\n\nWebflow's website is a visually rich, tool-forward platform that communicates \"design without code\" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.\n\n**Key Characteristics:**\n- White canvas with near-black (`#080808`) text\n- Webflow Blue (`#146ef5`) as primary brand + interactive color\n- WF Visual Sans Variable — custom variable font with weight 500–600\n- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`\n- Conservative 4px–8px border-radius — sharp, not rounded\n- Multi-layer shadow stacks (5-layer cascading shadows)\n- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)\n- translate(6px) hover animation on buttons\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#080808`): Primary text\n- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links\n- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue\n- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant\n- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`\n\n### Secondary Accents\n- **Purple** (`#7a3dff`): `--_color---secondary--purple`\n- **Pink** (`#ed52cb`): `--_color---secondary--pink`\n- **Green** (`#00d722`): `--_color---secondary--green`\n- **Orange** (`#ff6b00`): `--_color---secondary--orange`\n- **Yellow** (`#ffae13`): `--_color---secondary--yellow`\n- **Red** (`#ee1d36`): `--_color---secondary--red`\n\n### Neutral\n- **Gray 800** (`#222222`): Dark secondary text\n- **Gray 700** (`#363636`): Mid text\n- **Gray 300** (`#ababab`): Muted text, placeholder\n- **Mid Gray** (`#5a5a5a`): Link text\n- **Border Gray** (`#d8d8d8`): Borders, dividers\n- **Border Hover** (`#898989`): Hover border\n\n### Shadows\n- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`\n\n## 3. Typography Rules\n\n### Font: `WF Visual Sans Variable`, fallback: `Arial`\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 80px | 600 | 1.04 | -0.8px | |\n| Section Heading | 56px | 600 | 1.04 | normal | |\n| Sub-heading | 32px | 500 | 1.30 | normal | |\n| Feature Title | 24px | 500–600 | 1.30 | normal | |\n| Body | 20px | 400–500 | 1.40–1.50 | normal | |\n| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |\n| Button | 16px | 500 | 1.60 | -0.16px | |\n| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |\n| Caption | 14px | 400–500 | 1.40–1.60 | normal | |\n| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |\n| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |\n| Code: Inconsolata (companion monospace font)\n\n## 4. Component Stylings\n\n### Buttons\n- Transparent: text `#080808`, translate(6px) on hover\n- White circle: 50% radius, white bg\n- Blue badge: `#146ef5` bg, 4px radius, weight 550\n\n### Cards: `1px solid #d8d8d8`, 4px–8px radius\n### Badges: Blue-tinted bg at 10% opacity, 4px radius\n\n## 5. Layout\n- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)\n- Radius: 2px, 4px, 8px, 50% — conservative, sharp\n- Breakpoints: 479px, 768px, 992px\n\n## 6. Depth: 5-layer cascading shadow system\n\n## 7. Do's and Don'ts\n- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.\n- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.\n\n## 8. Responsive: 479px, 768px, 992px\n\n## 9. Agent Prompt Guide\n- Text: Near Black (`#080808`)\n- CTA: Webflow Blue (`#146ef5`)\n- Background: White (`#ffffff`)\n- Border: `#d8d8d8`\n- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Webflow (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#fff; --black:#080808; --blue:#146ef5; --blue-400:#3b89ff; --purple:#7a3dff; --pink:#ed52cb; --green:#00d722; --orange:#ff6b00; --yellow:#ffae13; --red:#ee1d36; --gray:#5a5a5a; --gray-300:#ababab; --border:#d8d8d8; --font:'Inter',Arial,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }\n  .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; }\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }\n  .btn-blue:hover { transform:translate(6px); }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--black); padding:12px 24px; border-radius:4px; border:1px solid var(--border); font-size:16px; font-weight:500; text-decoration:none; transition:transform 0.2s; }\n  .btn-outline:hover { transform:translate(6px); }\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }\n  .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }\n  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:48px; }\n  .color-swatch-info { padding:6px; }\n  .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }\n  .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }\n  .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }\n  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }\n  .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }\n  .card p { font-size:14px; color:var(--gray); }\n  .form-group { margin-bottom:10px; max-width:360px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:var(--red); }\n  .form-textarea { width:100%; min-height:60px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }\n  .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }\n  .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .radius-row { display:flex; gap:8px; flex-wrap:wrap; }\n  .radius-item { text-align:center; }\n  .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }\n  .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }\n  .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }\n  .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }\n  .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Get started\u003C\u002Fa>\u003C\u002Fnav>\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Webflow\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — smarter sites start here.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Get started — it's free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#080808\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#080808\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#146ef5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Webflow Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#146ef5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3b89ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3b89ff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Secondary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7a3dff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7a3dff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ed52cb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ed52cb\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00d722\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00d722\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff6b00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff6b00\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffae13\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffae13\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ee1d36\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ee1d36\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#363636\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#363636\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5a5a5a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5a5a5a\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ababab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ababab\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d8d8d8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d8d8d8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 80px \u002F 600 \u002F 1.04 \u002F -0.8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:500; line-height:1.30;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 32px \u002F 500 \u002F 1.30\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.50; color:var(--gray);\">Body — Smarter sites start here. Build your next project with the web platform.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 20px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 16px \u002F 500 \u002F 1.60 \u002F -0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;\">UPPERCASE LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 15px \u002F 500 \u002F uppercase \u002F +1.5px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 10px \u002F 600 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Get started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(20,110,245,0.1); color:var(--blue); padding:3.2px 6px; border-radius:4px; font-size:12.8px; font-weight:550;\">NEW\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp style=\"font-size:11px; color:var(--gray-300); margin-top:10px;\">Hover to see translate(6px).\u003C\u002Fp>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Design\u003C\u002Fh3>\u003Cp>Build visually with a flexible canvas and production-ready code output.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>CMS\u003C\u002Fh3>\u003Cp>Create dynamic content with a powerful content management system.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Interactions\u003C\u002Fh3>\u003Cp>Craft complex animations without writing a single line of code.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"My Website\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:40px; height:40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"border:1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Border only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.04) 0px 30px 18px;\">\u003Cdiv class=\"elevation-label\">5-Layer\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Cascading shadow stack\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwebflow.com\u002F\">webflow.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Webflow (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root { --white:#080808; --black:#f0f0f0; --blue:#146ef5; --blue-400:#3b89ff; --purple:#7a3dff; --pink:#ed52cb; --green:#00d722; --orange:#ff6b00; --yellow:#ffae13; --red:#ee1d36; --gray:#a0a0a0; --gray-300:#555555; --border:#2a2a2a; --font:'Inter',Arial,sans-serif; }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }\n  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--border); }\n  .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }\n  .nav-links a:hover { color:var(--blue); }\n  .nav-cta { display:inline-block; background:var(--blue); color:var(--white); padding:8px 16px; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; }\n  .hero { padding:80px 24px 64px; text-align:center; }\n  .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }\n  .hero h1 span { color:var(--blue); }\n  .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }\n  .hero-buttons { display:flex; gap:12px; justify-content:center; }\n  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }\n  .btn-blue:hover { transform:translate(6px); }\n  .btn-outline { display:inline-block; background:var(--white); color:var(--black); padding:12px 24px; border-radius:4px; border:1px solid var(--border); font-size:16px; font-weight:500; text-decoration:none; transition:transform 0.2s; }\n  .btn-outline:hover { transform:translate(6px); }\n  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }\n  .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }\n  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }\n  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }\n  .color-swatch-block { height:48px; }\n  .color-swatch-info { padding:6px; }\n  .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }\n  .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }\n  .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }\n  .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }\n  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }\n  .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }\n  .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }\n  .card p { font-size:14px; color:var(--gray); }\n  .form-group { margin-bottom:10px; max-width:360px; }\n  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }\n  .form-input--error { border-color:var(--red); }\n  .form-textarea { width:100%; min-height:60px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:10px 12px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }\n  .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }\n  .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .radius-row { display:flex; gap:8px; flex-wrap:wrap; }\n  .radius-item { text-align:center; }\n  .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }\n  .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }\n  .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }\n  .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }\n  .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }\n  .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }\n  .footer a { color:var(--white); text-decoration:underline; }\n  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Cnav class=\"nav\">\u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\u003Cul class=\"nav-links\">\u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ca class=\"nav-cta\" href=\"#\">Get started\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#146ef5;color:#fff;font-size:9px;font-weight:500;padding:3px 8px;border-radius:4px;\">Dark Mode\u003C\u002Fdiv>\n\u003Csection class=\"hero\">\u003Ch1>Design System\u003Cbr>Inspired by \u003Cspan>Webflow\u003C\u002Fspan>\u003C\u002Fh1>\u003Cp>Every color, font, and component — smarter sites start here.\u003C\u002Fp>\u003Cdiv class=\"hero-buttons\">\u003Ca class=\"btn-blue\" href=\"#\">Get started — it's free\u003C\u002Fa>\u003Ca class=\"btn-outline\" href=\"#\">Contact sales\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"colors\">\u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#080808\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#080808\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#146ef5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Webflow Blue\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#146ef5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#3b89ff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Blue 400\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#3b89ff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Secondary\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#7a3dff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Purple\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#7a3dff\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ed52cb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pink\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ed52cb\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#00d722\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#00d722\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff6b00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff6b00\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffae13\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Yellow\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffae13\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ee1d36\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Red\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ee1d36\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n\u003Cdiv class=\"color-grid\">\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#222222\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 800\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#222222\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#363636\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 700\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#363636\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#5a5a5a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#5a5a5a\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ababab\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray 300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ababab\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d8d8d8\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d8d8d8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"typography\">\u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography\u003C\u002Fh2>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 80px \u002F 600 \u002F 1.04 \u002F -0.8px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:32px; font-weight:500; line-height:1.30;\">Sub-heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 32px \u002F 500 \u002F 1.30\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.50; color:var(--gray);\">Body — Smarter sites start here. Build your next project with the web platform.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 20px \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 16px \u002F 500 \u002F 1.60 \u002F -0.16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;\">UPPERCASE LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 15px \u002F 500 \u002F uppercase \u002F +1.5px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">WF Visual Sans — 10px \u002F 600 \u002F uppercase \u002F +1px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"buttons\">\u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n\u003Cdiv class=\"button-row\">\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-blue\" href=\"#\">Get started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Ca class=\"btn-outline\" href=\"#\">Contact\u003C\u002Fa>\u003Cdiv class=\"button-label\">Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(20,110,245,0.1); color:var(--blue); padding:3.2px 6px; border-radius:4px; font-size:12.8px; font-weight:550;\">NEW\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Badge\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp style=\"font-size:11px; color:var(--gray-300); margin-top:10px;\">Hover to see translate(6px).\u003C\u002Fp>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"cards\">\u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n\u003Cdiv class=\"card-grid\">\n\u003Cdiv class=\"card\">\u003Ch3>Design\u003C\u002Fh3>\u003Cp>Build visually with a flexible canvas and production-ready code output.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>CMS\u003C\u002Fh3>\u003Cp>Create dynamic content with a powerful content management system.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class=\"card\">\u003Ch3>Interactions\u003C\u002Fh3>\u003Cp>Craft complex animations without writing a single line of code.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\" id=\"forms\">\u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Email\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"email\" placeholder=\"you@company.com\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Project\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"My Website\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Domain\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your project...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n\u003Cdiv class=\"spacing-row\">\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n\u003Cdiv class=\"radius-row\">\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:2px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">2px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:50%; width:40px; height:40px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">50%\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Chr class=\"section-divider\">\n\u003Csection class=\"section\">\u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n\u003Cdiv class=\"elevation-grid\">\u003Cdiv class=\"elevation-card\" style=\"border:1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Border only\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.04) 0px 30px 18px;\">\u003Cdiv class=\"elevation-label\">5-Layer\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Cascading shadow stack\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwebflow.com\u002F\">webflow.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Webflow Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwebflow\u002FDESIGN.md) extracted from the public [Webflow](https:\u002F\u002Fwebflow.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwebflow\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Webflow design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Webflow Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwebflow\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Webflow Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwebflow\u002Fpreview-screenshot.png)\n",{"slug":397,"name":398,"category":75,"designMd":399,"previewHtml":400,"previewDarkHtml":401,"readme":402},"wise","Wise","# Design System Inspiration of Wise\n\n## 1. Visual Theme & Atmosphere\n\nWise's website is a bold, confident fintech platform that communicates \"money without borders\" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.\n\nThe typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `\"calt\"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.\n\nWhat distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.\n\n**Key Characteristics:**\n- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines\n- Lime Green (`#9fe870`) accent with dark green text (`#163300`) — nature-inspired fintech\n- Inter body at weight 600 as default — confident, not light\n- Near-black (`#0e0f0c`) primary with warm green undertone\n- Scale(1.05) hover animations — buttons physically grow\n- OpenType `\"calt\"` on all text\n- Pill buttons (9999px) and large rounded cards (30px–40px)\n- Semantic color system with comprehensive state management\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Near Black** (`#0e0f0c`): Primary text, background for dark sections\n- **Wise Green** (`#9fe870`): Primary CTA button, brand accent\n- **Dark Green** (`#163300`): Button text on green, deep green accent\n- **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds\n- **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent\n\n### Semantic\n- **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success\n- **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error\u002Fdestructive\n- **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings\n- **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint\n- **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent\n\n### Neutral\n- **Warm Dark** (`#454745`): Secondary text, borders\n- **Gray** (`#868685`): Muted text, tertiary\n- **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Wise Sans`, fallback: `Inter` — OpenType `\"calt\"` on all text\n- **Body \u002F UI**: `Inter`, fallbacks: `Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `\"calt\"` |\n| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `\"calt\"` |\n| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `\"calt\"` |\n| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `\"calt\"` |\n| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `\"calt\"` |\n| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `\"calt\"` |\n| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `\"calt\"` |\n| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `\"calt\"` |\n| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `\"calt\"` |\n\n### Principles\n- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.\n- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.\n- **\"calt\" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.\n- **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Green Pill**\n- Background: `#9fe870` (Wise Green)\n- Text: `#163300` (Dark Green)\n- Padding: 5px 16px\n- Radius: 9999px\n- Hover: scale(1.05) — button physically grows\n- Active: scale(0.95) — button compresses\n- Focus: inset ring + outline\n\n**Secondary Subtle Pill**\n- Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)\n- Text: `#0e0f0c`\n- Padding: 8px 12px 8px 16px\n- Radius: 9999px\n- Same scale hover\u002Factive behavior\n\n### Cards & Containers\n- Radius: 16px (small), 30px (medium), 40px (large cards\u002Ftables)\n- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)\n- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)\n\n### Navigation\n- Green-tinted navigation hover: `rgba(211,242,192,0.4)`\n- Clean header with Wise wordmark\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px\n\n### Border Radius Scale\n- Minimal (2px): Links, inputs\n- Standard (10px): Comboboxes, inputs\n- Card (16px): Small cards, buttons, radio\n- Medium (20px): Links, medium cards\n- Large (30px): Feature cards\n- Section (40px): Tables, large cards\n- Mega (1000px): Presentation elements\n- Pill (9999px): All buttons, images\n- Circle (50%): Icons, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default |\n| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |\n| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |\n\n**Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Wise Sans weight 900 for display — the extreme boldness IS the brand\n- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional\n- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text\n- Apply scale(1.05) hover and scale(0.95) active on buttons\n- Enable \"calt\" on all text\n- Use Inter weight 600 as the body default\n\n### Don't\n- Don't use light font weights for Wise Sans — only 900\n- Don't relax the 0.85 line-height on display — the density is the identity\n- Don't use the Wise Green as background for large surfaces — it's for buttons and accents\n- Don't skip the scale animation on buttons\n- Don't use traditional shadows — ring shadows only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C576px | Single column |\n| Tablet | 576–992px | 2-column |\n| Desktop | 992–1440px | Full layout |\n| Large | >1440px | Expanded |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Near Black (`#0e0f0c`)\n- Background: White (`#ffffff` \u002F off-white)\n- Accent: Wise Green (`#9fe870`)\n- Button text: Dark Green (`#163300`)\n- Secondary: Gray (`#868685`)\n\n### Example Component Prompts\n- \"Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05).\"\n- \"Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400.\"\n\n### Iteration Guide\n1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand\n2. Lime Green for buttons only — dark green text on green background\n3. Scale animations (1.05 hover, 0.95 active) on all interactive elements\n4. \"calt\" on everything — contextual alternates are mandatory\n5. Inter 600 for body — confident reading weight\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Wise (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#ffffff; --black:#0e0f0c; --green:#9fe870; --dark-green:#163300;\n    --mint:#e2f6d5; --gray:#868685; --warm-dark:#454745; --light:#e8ebe6;\n    --danger:#d03238; --warning:#ffd11a;\n    --font:'Inter',Helvetica,Arial,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:\"calt\" 1; -webkit-font-smoothing:antialiased; }\n\n  .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 rgba(14,15,12,0.08); }\n  .nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.7; }\n  .nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }\n  .nav-cta:hover { transform:scale(1.05); }\n\n  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }\n  .hero h1 span { color:var(--dark-green); }\n  .hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }\n  .hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }\n  .btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }\n  .btn-green:hover { transform:scale(1.05); }\n  .btn-green:active { transform:scale(0.95); }\n  .btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }\n  .btn-subtle:hover { transform:scale(1.05); }\n\n  .section { padding:64px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }\n  .card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }\n  .card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }\n  .form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }\n  .form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by\u003Cbr>\u003Cspan>Wise\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Send Money\u003C\u002Fa>\n    \u003Ca class=\"btn-subtle\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0e0f0c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0e0f0c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fe870\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Wise Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fe870\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#163300\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#163300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button text on green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e2f6d5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mint\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e2f6d5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Soft green surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#054d28\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Positive\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#054d28\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d03238\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d03238\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd11a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd11a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc091\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc091\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#454745\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#454745\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#868685\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#868685\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e8ebe6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e8ebe6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:80px; font-weight:900; line-height:0.85;\">DISPLAY HERO\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 126px \u002F 900 \u002F 0.85 \u002F Wise Sans \u002F \"calt\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:900; line-height:0.85;\">Section Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 40px \u002F 900 \u002F 0.85 \u002F Wise Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 22px \u002F 600 \u002F 1.25 \u002F -0.396px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);\">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.44 \u002F +0.18px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;\">Body Semibold — Account balance\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Semibold — 18px \u002F 600 \u002F 1.44 \u002F -0.108px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);\">Caption — Updated 2 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 600 \u002F 1.55 \u002F -0.084px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Send Money\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Green\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-subtle\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Subtle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:13px; color:var(--gray); margin-top:16px;\">Hover to see scale(1.05) grow. Click for scale(0.95) compress.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>International Transfers\u003C\u002Fh3>\u003Cp>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--mint); border-color:var(--green);\">\u003Ch3>Multi-currency Account\u003C\u002Fh3>\u003Cp>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Business Account\u003C\u002Fh3>\u003Cp>Pay invoices, receive payments, and manage your international finances in one place.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"1,000.00 GBP\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Recipient\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"John Smith\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">IBAN\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Reference\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Payment reference...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:30px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">30px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px ring shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwise.com\u002F\">wise.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Wise (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;900&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --white:#0e0f0c; --black:#e8ebe6; --green:#9fe870; --dark-green:#163300;\n    --mint:#1a2e10; --gray:#6a6a69; --warm-dark:#a0a39e; --light:#1e201c;\n    --danger:#d03238; --warning:#ffd11a;\n    --font:'Inter',Helvetica,Arial,sans-serif;\n  }\n  * { margin:0; padding:0; box-sizing:border-box; }\n  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:18px; font-weight:400; line-height:1.44; font-feature-settings:\"calt\" 1; -webkit-font-smoothing:antialiased; }\n\n  .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 rgba(232,235,230,0.1); }\n  .nav-brand { font-size:18px; font-weight:600; color:var(--black); text-decoration:none; }\n  .nav-links { display:flex; gap:20px; list-style:none; }\n  .nav-links a { font-size:16px; font-weight:600; color:var(--black); text-decoration:none; transition:opacity 0.15s; }\n  .nav-links a:hover { opacity:0.7; }\n  .nav-cta { display:inline-block; background:var(--green); color:var(--dark-green); padding:8px 20px; border-radius:9999px; font-size:16px; font-weight:600; text-decoration:none; transition:transform 0.2s; }\n  .nav-cta:hover { transform:scale(1.05); }\n\n  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }\n  .hero h1 { font-size:80px; font-weight:900; line-height:0.85; margin-bottom:24px; }\n  .hero h1 span { color:var(--dark-green); }\n  .hero p { font-size:18px; font-weight:400; color:var(--warm-dark); max-width:500px; margin-bottom:32px; letter-spacing:0.18px; }\n  .hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }\n  .btn-green { display:inline-block; background:var(--green); color:var(--dark-green); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }\n  .btn-green:hover { transform:scale(1.05); }\n  .btn-green:active { transform:scale(0.95); }\n  .btn-subtle { display:inline-block; background:rgba(22,51,0,0.08); color:var(--black); padding:12px 28px; border-radius:9999px; font-family:var(--font); font-size:18px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s; }\n  .btn-subtle:hover { transform:scale(1.05); }\n\n  .section { padding:64px 24px; max-width:1100px; margin:0 auto; }\n  .section-label { font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }\n  .section-title { font-size:40px; font-weight:900; line-height:0.85; margin-bottom:32px; }\n  .section-divider { border:none; border-top:1px solid rgba(14,15,12,0.08); margin:0; }\n\n  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }\n  .color-swatch { border-radius:16px; overflow:hidden; border:1px solid rgba(14,15,12,0.12); }\n  .color-swatch-block { height:64px; width:100%; }\n  .color-swatch-info { padding:10px; }\n  .color-swatch-name { font-size:13px; font-weight:600; margin-bottom:2px; }\n  .color-swatch-hex { font-size:10px; color:var(--gray); font-family:monospace; }\n  .color-swatch-role { font-size:9px; color:var(--gray); margin-top:2px; }\n  .color-group-label { font-size:12px; font-weight:600; color:var(--warm-dark); margin:20px 0 8px; }\n\n  .type-sample { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--light); }\n  .type-sample:last-child { border-bottom:none; }\n  .type-meta { font-size:10px; color:var(--gray); margin-top:4px; font-family:monospace; }\n\n  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .button-item { text-align:center; }\n  .button-label { font-size:10px; color:var(--gray); margin-top:6px; }\n\n  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }\n  .card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:24px; }\n  .card h3 { font-size:22px; font-weight:600; margin-bottom:8px; letter-spacing:-0.396px; }\n  .card p { font-size:16px; color:var(--warm-dark); letter-spacing:0.08px; }\n\n  .form-group { margin-bottom:16px; max-width:400px; }\n  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }\n  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; outline:none; }\n  .form-input:focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }\n  .form-input--focus { box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px, 0 0 0 2px var(--green); }\n  .form-input--error { border-color:var(--danger); box-shadow:0 0 0 2px var(--danger); }\n  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid rgba(14,15,12,0.12); padding:12px 16px; border-radius:10px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }\n  .form-state-label { font-size:9px; color:var(--gray); margin-top:4px; }\n\n  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }\n  .spacing-item { text-align:center; }\n  .spacing-block { background:var(--green); border-radius:4px; margin-bottom:4px; height:24px; }\n  .spacing-value { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }\n  .radius-item { text-align:center; }\n  .radius-box { width:52px; height:52px; background:var(--mint); border:1px solid var(--green); margin-bottom:4px; }\n  .radius-label { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }\n  .elevation-card { background:var(--white); border:1px solid rgba(14,15,12,0.12); border-radius:30px; padding:16px; text-align:center; }\n  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }\n  .elevation-desc { font-size:9px; color:var(--gray); font-family:monospace; }\n\n  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray); font-size:13px; }\n  .footer a { color:var(--green); text-decoration:underline; }\n\n  @media (max-width:576px) { .hero h1 { font-size:48px; } .nav-links { display:none; } .section { padding:48px 16px; } .card-grid { grid-template-columns:1fr; } }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Get Started\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv style=\"position:fixed;top:16px;right:16px;z-index:200;background:#9fe870;color:#163300;font-size:10px;font-weight:600;padding:4px 12px;border-radius:9999px;\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by\u003Cbr>\u003Cspan>Wise\u003C\u002Fspan>\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-green\" href=\"#\">Send Money\u003C\u002Fa>\n    \u003Ca class=\"btn-subtle\" href=\"#\">Learn More\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n  \u003Cdiv class=\"color-group-label\">Brand\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#0e0f0c\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Near Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#0e0f0c\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#9fe870\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Wise Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#9fe870\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#163300\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Green\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#163300\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Button text on green\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e2f6d5\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mint\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e2f6d5\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Soft green surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Semantic\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#054d28\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Positive\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#054d28\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Success\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#d03238\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Danger\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#d03238\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffd11a\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warning\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffd11a\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warning\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffc091\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffc091\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Warm accent\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"color-group-label\">Neutral\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#454745\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Dark\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#454745\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#868685\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#868685\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#e8ebe6\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#e8ebe6\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Light surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:80px; font-weight:900; line-height:0.85;\">DISPLAY HERO\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display — 126px \u002F 900 \u002F 0.85 \u002F Wise Sans \u002F \"calt\"\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:40px; font-weight:900; line-height:0.85;\">Section Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section — 40px \u002F 900 \u002F 0.85 \u002F Wise Sans\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-0.396px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card — 22px \u002F 600 \u002F 1.25 \u002F -0.396px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:400; line-height:1.44; letter-spacing:0.18px; color:var(--warm-dark);\">Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body — 18px \u002F 400 \u002F 1.44 \u002F +0.18px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.44; letter-spacing:-0.108px;\">Body Semibold — Account balance\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Semibold — 18px \u002F 600 \u002F 1.44 \u002F -0.108px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:1.55; letter-spacing:-0.084px; color:var(--gray);\">Caption — Updated 2 minutes ago\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 600 \u002F 1.55 \u002F -0.084px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Buttons\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-green\" href=\"#\">Send Money\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Green\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-subtle\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Subtle\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:13px; color:var(--gray); margin-top:16px;\">Hover to see scale(1.05) grow. Click for scale(0.95) compress.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Cards\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\u003Ch3>International Transfers\u003C\u002Fh3>\u003Cp>Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"background:var(--mint); border-color:var(--green);\">\u003Ch3>Multi-currency Account\u003C\u002Fh3>\u003Cp>Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\u003Ch3>Business Account\u003C\u002Fh3>\u003Cp>Pay invoices, receive payments, and manage your international finances in one place.\u003C\u002Fp>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Forms\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Amount\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"1,000.00 GBP\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Recipient\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"John Smith\">\u003Cdiv class=\"form-state-label\">Focus (green ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">IBAN\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid\">\u003Cdiv class=\"form-state-label\">Error\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Reference\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Payment reference...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Spacing\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:10px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">10px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">16px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:30px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">30px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">40px\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:9999px; width:52px; height:52px;\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\u003Ch2 class=\"section-title\">Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\">\u003Cdiv class=\"elevation-label\">Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow:rgba(14,15,12,0.12) 0px 0px 0px 1px;\">\u003Cdiv class=\"elevation-label\">Ring\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px ring shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">Generated from \u003Ca href=\"https:\u002F\u002Fwise.com\u002F\">wise.com\u003C\u002Fa> DESIGN.md — awesome-design-md\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Wise Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwise\u002FDESIGN.md) extracted from the public [Wise](https:\u002F\u002Fwise.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fwise\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Wise design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Wise Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwise\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Wise Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fwise\u002Fpreview-screenshot.png)\n",{"slug":404,"name":405,"category":45,"designMd":406,"previewHtml":407,"previewDarkHtml":408,"readme":409},"x.ai","X AI","# Design System Inspiration of xAI\n\n## 1. Visual Theme & Atmosphere\n\nxAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of sophistication. The entire experience is anchored to an almost-black background (`#1f2228`) with pure white text (`#ffffff`), creating a high-contrast, terminal-inspired aesthetic that signals deep technical credibility. There are no gradients, no decorative illustrations, no color accents competing for attention. This is a site that communicates through absence.\n\nThe typographic system is split between two carefully chosen typefaces. `GeistMono` (Vercel's monospace font) handles display-level headlines at an extraordinary 320px with weight 300, and also serves as the button typeface in uppercase with tracked-out letter-spacing (1.4px). `universalSans` handles all body and secondary heading text with a clean, geometric sans-serif voice. The monospace-as-display-font choice is the defining aesthetic decision -- it positions xAI not as a consumer product but as infrastructure, as something built by people who live in terminals.\n\nThe spacing system operates on an 8px base grid with values concentrated at the small end (4px, 8px, 24px, 48px), reflecting a dense, information-focused layout philosophy. Border radius is minimal -- the site barely rounds anything, maintaining sharp, architectural edges. There are no decorative shadows, no gradients, no layered elevation. Depth is communicated purely through contrast and whitespace.\n\n**Key Characteristics:**\n- Pure dark theme: `#1f2228` background with `#ffffff` text -- no gray middle ground\n- GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury\n- Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding\n- universalSans for body text at 16px\u002F1.5 and headings at 30px\u002F1.2 -- clean contrast\n- Zero decorative elements: no shadows, no gradients, no colored accents\n- 8px spacing grid with a sparse, deliberate scale\n- Heroicons SVG icon system -- minimal, functional\n- Tailwind CSS with arbitrary values -- utility-first engineering approach\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure White** (`#ffffff`): The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.\n- **Dark Background** (`#1f2228`): The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of `#000000` while maintaining deep darkness.\n\n### Interactive\n- **White Default** (`#ffffff`): Link and interactive element color in default state.\n- **White Muted** (`rgba(255, 255, 255, 0.5)`): Hover state for links -- a deliberate dimming rather than brightening, which is unusual and distinctive.\n- **White Subtle** (`rgba(255, 255, 255, 0.2)`): Borders, dividers, and subtle surface treatments.\n- **Ring Blue** (`rgb(59, 130, 246) \u002F 0.5`): Tailwind's default focus ring color (`--tw-ring-color`), used for keyboard accessibility focus states.\n\n### Surface & Borders\n- **Surface Elevated** (`rgba(255, 255, 255, 0.05)`): Subtle card backgrounds and hover surfaces -- barely visible lift.\n- **Surface Hover** (`rgba(255, 255, 255, 0.08)`): Slightly more visible hover state for interactive containers.\n- **Border Default** (`rgba(255, 255, 255, 0.1)`): Standard border for cards, dividers, and containers.\n- **Border Strong** (`rgba(255, 255, 255, 0.2)`): Emphasized borders for active states and button outlines.\n\n### Functional\n- **Text Primary** (`#ffffff`): All headings, body text, labels.\n- **Text Secondary** (`rgba(255, 255, 255, 0.7)`): Descriptions, captions, supporting text.\n- **Text Tertiary** (`rgba(255, 255, 255, 0.5)`): Muted labels, placeholder text, timestamps.\n- **Text Quaternary** (`rgba(255, 255, 255, 0.3)`): Disabled text, very subtle annotations.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display \u002F Buttons**: `GeistMono`, with fallback: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`\n- **Body \u002F Headings**: `universalSans`, with fallback: `universalSans Fallback`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |\n|------|------|------|--------|-------------|----------------|-----------|-------|\n| Display Hero | GeistMono | 320px (20rem) | 300 | 1.50 | normal | none | Extreme scale, monospace luxury |\n| Section Heading | universalSans | 30px (1.88rem) | 400 | 1.20 (tight) | normal | none | Clean sans-serif contrast |\n| Body | universalSans | 16px (1rem) | 400 | 1.50 | normal | none | Standard reading text |\n| Button | GeistMono | 14px (0.88rem) | 400 | 1.43 | 1.4px | uppercase | Tracked monospace, commanding |\n| Label \u002F Caption | universalSans | 14px (0.88rem) | 400 | 1.50 | normal | none | Supporting text |\n| Small \u002F Meta | universalSans | 12px (0.75rem) | 400 | 1.50 | normal | none | Timestamps, footnotes |\n\n### Principles\n- **Monospace as display**: GeistMono at 320px is not a gimmick -- it is the brand statement. The fixed-width characters at extreme scale create a rhythmic, architectural quality that no proportional font can achieve.\n- **Light weight at scale**: Weight 300 for the 320px headline prevents the monospace from feeling heavy or brutish at extreme sizes. It reads as precise, not overwhelming.\n- **Uppercase buttons**: All button text is uppercase GeistMono with 1.4px letter-spacing. This creates a distinctly technical, almost command-line aesthetic for interactive elements.\n- **Sans-serif for reading**: universalSans at 16px\u002F1.5 provides excellent readability for body content, creating a clean contrast against the monospace display elements.\n- **Two-font clarity**: The system uses exactly two typefaces with clear roles -- monospace for impact and interaction, sans-serif for information and reading. No overlap, no ambiguity.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (White on Dark)**\n- Background: `#ffffff`\n- Text: `#1f2228`\n- Padding: 12px 24px\n- Radius: 0px (sharp corners)\n- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px\n- Hover: `rgba(255, 255, 255, 0.9)` background\n- Use: Primary CTA (\"TRY GROK\", \"GET STARTED\")\n\n**Ghost \u002F Outlined**\n- Background: transparent\n- Text: `#ffffff`\n- Padding: 12px 24px\n- Radius: 0px\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px\n- Hover: `rgba(255, 255, 255, 0.05)` background\n- Use: Secondary actions (\"LEARN MORE\", \"VIEW API\")\n\n**Text Link**\n- Background: none\n- Text: `#ffffff`\n- Font: universalSans 16px weight 400\n- Hover: `rgba(255, 255, 255, 0.5)` -- dims on hover\n- Use: Inline links, navigation items\n\n### Cards & Containers\n- Background: `rgba(255, 255, 255, 0.03)` or transparent\n- Border: `1px solid rgba(255, 255, 255, 0.1)`\n- Radius: 0px (sharp) or 4px (subtle)\n- Shadow: none -- xAI does not use box shadows\n- Hover: border shifts to `rgba(255, 255, 255, 0.2)`\n\n### Navigation\n- Dark background matching page (`#1f2228`)\n- Brand logotype: white text, left-aligned\n- Links: universalSans 14px weight 400, `#ffffff` text\n- Hover: `rgba(255, 255, 255, 0.5)` text color\n- CTA: white primary button, right-aligned\n- Mobile: hamburger toggle\n\n### Badges \u002F Tags\n**Monospace Tag**\n- Background: transparent\n- Text: `#ffffff`\n- Padding: 4px 8px\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Radius: 0px\n- Font: GeistMono 12px uppercase, letter-spacing 1px\n\n### Inputs & Forms\n- Background: transparent or `rgba(255, 255, 255, 0.05)`\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Radius: 0px\n- Focus: ring with `rgb(59, 130, 246) \u002F 0.5`\n- Text: `#ffffff`\n- Placeholder: `rgba(255, 255, 255, 0.3)`\n- Label: `rgba(255, 255, 255, 0.7)`, universalSans 14px\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 8px, 24px, 48px\n- The scale is deliberately sparse -- xAI avoids granular spacing distinctions, preferring large jumps that create clear visual hierarchy through whitespace alone\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: full-viewport height with massive centered monospace headline\n- Feature sections: simple vertical stacking with generous section padding (48px-96px)\n- Two-column layouts for feature descriptions at desktop\n- Full-width dark sections maintain the single dark background throughout\n\n### Whitespace Philosophy\n- **Extreme generosity**: xAI uses vast amounts of whitespace. The 320px headline with 48px+ surrounding padding creates a sense of emptiness that is itself a design statement -- the content is so important it needs room to breathe.\n- **Vertical rhythm over horizontal density**: Content stacks vertically with large gaps between sections rather than packing horizontally. This creates a scroll-driven experience that feels deliberate and cinematic.\n- **No visual noise**: The absence of decorative elements, borders between sections, and color variety means whitespace is the primary structural tool.\n\n### Breakpoints\n- 2000px, 1536px, 1280px, 1024px, 1000px, 768px, 640px\n- Tailwind responsive modifiers drive breakpoint behavior\n\n### Border Radius Scale\n- Sharp (0px): Primary treatment for buttons, cards, inputs -- the default\n- Subtle (4px): Occasional softening on secondary containers\n- The near-zero radius philosophy is core to the brand's brutalist identity\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, body content |\n| Surface (Level 1) | `rgba(255,255,255,0.03)` background | Subtle card surfaces |\n| Bordered (Level 2) | `1px solid rgba(255,255,255,0.1)` border | Cards, containers, dividers |\n| Active (Level 3) | `1px solid rgba(255,255,255,0.2)` border | Hover states, active elements |\n| Focus (Accessibility) | `ring` with `rgb(59,130,246)\u002F0.5` | Keyboard focus indicator |\n\n**Elevation Philosophy**: xAI rejects the conventional shadow-based elevation system entirely. There are no box-shadows anywhere on the site. Instead, depth is communicated through three mechanisms: (1) opacity-based borders that brighten on interaction, creating a sense of elements \"activating\" rather than lifting; (2) extremely subtle background opacity shifts (`0.03` to `0.08`) that create barely-perceptible surface differentiation; and (3) the massive scale contrast between the 320px display type and 16px body text, which creates typographic depth. This is elevation through contrast and opacity, not through simulated light and shadow.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#1f2228` as the universal background -- never pure black `#000000`\n- Use GeistMono for all display headlines and button text -- monospace IS the brand\n- Apply uppercase + 1.4px letter-spacing to all button labels\n- Use weight 300 for the massive display headline (320px)\n- Keep borders at `rgba(255, 255, 255, 0.1)` -- barely visible, not absent\n- Dim interactive elements on hover to `rgba(255, 255, 255, 0.5)` -- the reverse of convention\n- Maintain sharp corners (0px radius) as the default -- brutalist precision\n- Use universalSans for all body and reading text at 16px\u002F1.5\n\n### Don't\n- Don't use box-shadows -- xAI has zero shadow elevation\n- Don't introduce color accents beyond white and the dark background -- the monochromatic palette is sacred\n- Don't use large border-radius (8px+, pill shapes) -- the sharp edge is intentional\n- Don't use bold weights (600-700) for headlines -- weight 300-400 only\n- Don't brighten elements on hover -- xAI dims to `0.5` opacity instead\n- Don't add decorative gradients, illustrations, or color blocks\n- Don't use proportional fonts for buttons -- GeistMono uppercase is mandatory\n- Don't use colored status indicators unless absolutely necessary -- keep everything in the white\u002Fdark spectrum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u003C640px | Single column, hero headline scales dramatically down |\n| Small Tablet | 640-768px | Slight increase in padding |\n| Tablet | 768-1024px | Two-column layouts begin, heading sizes increase |\n| Desktop | 1024-1280px | Full layout, generous whitespace |\n| Large | 1280-1536px | Wider containers, more breathing room |\n| Extra Large | 1536-2000px | Maximum content width, centered |\n| Ultra | >2000px | Content stays centered, extreme margins |\n\n### Touch Targets\n- Buttons use 12px 24px padding for comfortable touch\n- Navigation links spaced with 24px gaps\n- Minimum tap target: 44px height\n- Mobile: full-width buttons for easy thumb reach\n\n### Collapsing Strategy\n- Hero: 320px monospace headline scales down dramatically (to ~48px-64px on mobile)\n- Navigation: horizontal links collapse to hamburger menu\n- Feature sections: two-column to single-column stacking\n- Section padding: 96px -> 48px -> 24px across breakpoints\n- Massive display type is the first thing to resize -- it must remain impactful but not overflow\n\n### Image Behavior\n- Minimal imagery -- the site relies on typography and whitespace\n- Any product screenshots maintain sharp corners\n- Full-width media scales proportionally with viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Dark (`#1f2228`)\n- Text Primary: White (`#ffffff`)\n- Text Secondary: White 70% (`rgba(255, 255, 255, 0.7)`)\n- Text Muted: White 50% (`rgba(255, 255, 255, 0.5)`)\n- Text Disabled: White 30% (`rgba(255, 255, 255, 0.3)`)\n- Border Default: White 10% (`rgba(255, 255, 255, 0.1)`)\n- Border Strong: White 20% (`rgba(255, 255, 255, 0.2)`)\n- Surface Subtle: White 3% (`rgba(255, 255, 255, 0.03)`)\n- Surface Hover: White 8% (`rgba(255, 255, 255, 0.08)`)\n- Focus Ring: Blue (`rgb(59, 130, 246)` at 50% opacity)\n- Button Primary BG: White (`#ffffff`), text Dark (`#1f2228`)\n\n### Example Component Prompts\n- \"Create a hero section on #1f2228 background. Headline in GeistMono at 72px weight 300, color #ffffff, centered. Subtitle in universalSans 18px weight 400, rgba(255,255,255,0.7), max-width 600px centered. Two buttons: primary (white bg, #1f2228 text, 0px radius, GeistMono 14px uppercase, 1.4px letter-spacing, 12px 24px padding) and ghost (transparent bg, 1px solid rgba(255,255,255,0.2), white text, same font treatment).\"\n- \"Design a card: transparent or rgba(255,255,255,0.03) background, 1px solid rgba(255,255,255,0.1) border, 0px radius, 24px padding. No shadow. Title in universalSans 22px weight 400, #ffffff. Body in universalSans 16px weight 400, rgba(255,255,255,0.7), line-height 1.5. Hover: border changes to rgba(255,255,255,0.2).\"\n- \"Build navigation: #1f2228 background, full-width. Brand text left (GeistMono 14px uppercase). Links in universalSans 14px #ffffff with hover to rgba(255,255,255,0.5). White primary button right-aligned (GeistMono 14px uppercase, 1.4px letter-spacing).\"\n- \"Create a form: dark background #1f2228. Label in universalSans 14px rgba(255,255,255,0.7). Input with transparent bg, 1px solid rgba(255,255,255,0.2) border, 0px radius, white text 16px universalSans. Focus: blue ring rgb(59,130,246)\u002F0.5. Placeholder: rgba(255,255,255,0.3).\"\n- \"Design a monospace tag\u002Fbadge: transparent bg, 1px solid rgba(255,255,255,0.2), 0px radius, GeistMono 12px uppercase, 1px letter-spacing, white text, 4px 8px padding.\"\n\n### Iteration Guide\n1. Always start with `#1f2228` background -- never use pure black or gray backgrounds\n2. GeistMono for display and buttons, universalSans for everything else -- never mix these roles\n3. All buttons must be GeistMono uppercase with 1.4px letter-spacing -- this is non-negotiable\n4. No shadows, ever -- depth comes from border opacity and background opacity only\n5. Borders are always white with low opacity (0.1 default, 0.2 for emphasis)\n6. Hover behavior dims to 0.5 opacity rather than brightening -- the reverse of most systems\n7. Sharp corners (0px) by default -- only use 4px for specific secondary containers\n8. Body text at 16px universalSans with 1.5 line-height for comfortable reading\n9. Generous section padding (48px-96px) -- let content breathe in the darkness\n10. The monochromatic white-on-dark palette is absolute -- resist adding color unless critical for function\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: xAI (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #f8f8f8;\n    --bg-page: #ffffff;\n    --dark: #1f2228;\n    --white: #ffffff;\n    --text-primary: #1f2228;\n    --text-secondary: rgba(31, 34, 40, 0.7);\n    --text-muted: rgba(31, 34, 40, 0.5);\n    --text-disabled: rgba(31, 34, 40, 0.3);\n    --border: rgba(31, 34, 40, 0.1);\n    --border-strong: rgba(31, 34, 40, 0.2);\n    --surface: rgba(31, 34, 40, 0.03);\n    --surface-hover: rgba(31, 34, 40, 0.06);\n    --ring-blue: rgb(59, 130, 246);\n    --font-display: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, monospace;\n    --font-body: 'Inter', -apple-system, system-ui, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(255,255,255,0.90);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border);\n  }\n  .nav-brand { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--text-muted); }\n  .nav-cta {\n    display: inline-block; background: var(--dark); color: var(--white);\n    padding: 8px 16px; border-radius: 0px;\n    font-family: var(--font-display); font-size: 12px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1.20;\n    color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--dark); color: var(--white);\n    padding: 12px 24px; border-radius: 0px; border: none;\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-primary:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 12px 24px; border-radius: 0px;\n    border: 1px solid var(--border-strong);\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-ghost:hover { opacity: 0.6; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }\n  .section-label { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }\n  .section-title { font-family: var(--font-body); font-size: 30px; font-weight: 400; line-height: 1.20; margin-bottom: 32px; color: var(--text-primary); }\n  .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { overflow: hidden; border: 1px solid var(--border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); }\n  .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; }\n  .btn-text-link {\n    display: inline-block; background: none; color: var(--text-primary);\n    padding: 8px 16px; font-family: var(--font-body); font-size: 16px;\n    font-weight: 400; text-decoration: none; transition: opacity 0.15s;\n  }\n  .btn-text-link:hover { opacity: 0.5; }\n  .badge-mono {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 4px 8px; font-family: var(--font-display); font-size: 12px;\n    text-transform: uppercase; letter-spacing: 1px;\n    border: 1px solid var(--border-strong);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: var(--surface); padding: 24px;\n    border: 1px solid var(--border);\n    transition: border-color 0.2s ease;\n  }\n  .card:hover { border-color: var(--border-strong); }\n  .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }\n  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.60; }\n  .card-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border: 1px solid var(--border-strong); margin-bottom: 12px; color: var(--text-muted); }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: transparent; color: var(--text-primary);\n    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;\n    font-family: var(--font-body); font-size: 14px; font-weight: 400; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }\n  .form-input--focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: transparent; color: var(--text-primary);\n    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;\n    font-family: var(--font-body); font-size: 14px; font-weight: 400; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--dark); margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--dark); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }\n  .radius-context { font-size: 10px; color: var(--text-muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--bg-page); padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 400; margin-bottom: 4px; color: var(--text-primary); }\n  .elevation-desc { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); }\n\n  \u002F* DARK SHOWCASE *\u002F\n  .dark-showcase {\n    background: #1f2228; padding: 48px 32px; margin: 0;\n  }\n  .dark-showcase-inner { max-width: 1080px; margin: 0 auto; }\n  .dark-showcase h2 { font-family: var(--font-display); font-size: 48px; font-weight: 300; color: #ffffff; margin-bottom: 16px; line-height: 1.20; }\n  .dark-showcase p { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.60; margin-bottom: 24px; max-width: 600px; }\n  .dark-showcase .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }\n  .dark-btn-primary {\n    display: inline-block; background: #ffffff; color: #1f2228;\n    padding: 12px 24px; border-radius: 0px; border: none;\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n  }\n  .dark-btn-ghost {\n    display: inline-block; background: transparent; color: #ffffff;\n    padding: 12px 24px; border-radius: 0px;\n    border: 1px solid rgba(255,255,255,0.2);\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n  }\n  .dark-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 32px; }\n  .dark-card {\n    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);\n    padding: 24px; transition: border-color 0.2s;\n  }\n  .dark-card:hover { border-color: rgba(255,255,255,0.2); }\n  .dark-card h4 { font-family: var(--font-body); font-size: 18px; color: #ffffff; font-weight: 400; margin-bottom: 8px; }\n  .dark-card p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.60; margin: 0; }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }\n  .footer a { color: var(--text-primary); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n    .dark-showcase h2 { font-size: 32px; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">TRY GROK\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by xAI\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">GET STARTED\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">VIEW DOCUMENTATION\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Background\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f2228\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff; border-bottom:1px solid rgba(0,0,0,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, foreground\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text Opacity Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,1);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Primary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.7);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.7)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Descriptions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.5);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state, placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.3);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Disabled\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.3)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.1);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Default\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Strong\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.2)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.03);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface Subtle\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.03)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.08);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.08)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Functional\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgb(59,130,246)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Ring\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgb(59, 130, 246)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Keyboard focus\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:72px; font-weight:300; line-height:1.20; color:var(--text-primary);\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 320px (shown at 72px) \u002F GeistMono \u002F 300 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:30px; font-weight:400; line-height:1.20; color:var(--text-primary);\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 30px \u002F universalSans \u002F 400 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; color:var(--text-secondary);\">Body text -- xAI is a company working on building artificial intelligence to accelerate human scientific discovery.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:14px; font-weight:400; line-height:1.43; text-transform:uppercase; letter-spacing:1.4px; color:var(--text-primary);\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button -- 14px \u002F GeistMono \u002F 400 \u002F uppercase \u002F 1.4px tracking\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);\">Label \u002F Caption text for supporting information\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label -- 14px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:12px; font-weight:400; line-height:1.50; color:var(--text-muted);\">Small meta text, timestamps, footnotes\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small -- 12px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:12px; font-weight:400; line-height:1.50; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);\">MONOSPACE TAG\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tag -- 12px \u002F GeistMono \u002F uppercase \u002F 1px tracking\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">GET STARTED\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">LEARN MORE\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-text-link\" href=\"#\">Text Link\u003C\u002Fa>\u003Cdiv class=\"button-label\">Text Link\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-mono\">API v2\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Mono Tag\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">MODEL\u003C\u002Fdiv>\n      \u003Ch3>Grok\u003C\u002Fh3>\n      \u003Cp>An AI assistant built to be maximally helpful. Grok has real-time knowledge, a conversational style, and handles complex reasoning tasks.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--border-strong);\">\n      \u003Cdiv class=\"card-tag\">RESEARCH\u003C\u002Fdiv>\n      \u003Ch3>Understanding AI\u003C\u002Fh3>\n      \u003Cp>Advancing fundamental research in artificial intelligence. Card shown with stronger border for elevated emphasis.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">API\u003C\u002Fdiv>\n      \u003Ch3>Developer Access\u003C\u002Fh3>\n      \u003Cp>Build with Grok through the xAI API. Enterprise-grade performance with straightforward integration.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003C!-- Dark Showcase Section -->\n\u003Csection class=\"dark-showcase\">\n  \u003Cdiv class=\"dark-showcase-inner\">\n    \u003Cdiv class=\"section-label\" style=\"color: rgba(255,255,255,0.4);\">Native Dark Context\u003C\u002Fdiv>\n    \u003Ch2>Monospace at Scale\u003C\u002Fh2>\n    \u003Cp>xAI's dark-first design uses GeistMono at extreme display sizes. This section shows components in their native dark context -- the true home of the xAI design system.\u003C\u002Fp>\n    \u003Cdiv class=\"btn-row\">\n      \u003Ca class=\"dark-btn-primary\" href=\"#\">TRY GROK\u003C\u002Fa>\n      \u003Ca class=\"dark-btn-ghost\" href=\"#\">VIEW API\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"dark-card-grid\">\n      \u003Cdiv class=\"dark-card\">\n        \u003Ch4>Real-time Knowledge\u003C\u002Fh4>\n        \u003Cp>Access to live information through direct integration with real-time data sources.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"dark-card\">\n        \u003Ch4>Complex Reasoning\u003C\u002Fh4>\n        \u003Cp>Advanced chain-of-thought capabilities for multi-step problem solving.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"dark-card\">\n        \u003Ch4>Enterprise Scale\u003C\u002Fh4>\n        \u003Cp>Production-ready infrastructure with high throughput and low latency.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-api-key\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Endpoint URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.x.ai\u002Fv1\u002Fchat\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">System Prompt\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"You are a helpful assistant...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--text-muted); margin-top:8px;\">Base unit: 8px. Scale is deliberately sparse -- large jumps create clear hierarchy through whitespace.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Primary (buttons, cards)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Secondary containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation (No Shadows)\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border, no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background: var(--surface); border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 1: Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle bg (0.03 opacity)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 2: Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.1 opacity border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-strong);\">\u003Cdiv class=\"elevation-label\">Level 3: Active\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.2 opacity border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px rgb(59,130,246);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--text-muted); margin-top:16px;\">xAI uses no box-shadows. Depth is communicated through border opacity and background opacity only.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fx.ai\u002F\">x.ai\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: xAI (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Geist+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  :root {\n    --bg: #1f2228;\n    --bg-page: #1f2228;\n    --white: #ffffff;\n    --text-primary: #ffffff;\n    --text-secondary: rgba(255, 255, 255, 0.7);\n    --text-muted: rgba(255, 255, 255, 0.5);\n    --text-disabled: rgba(255, 255, 255, 0.3);\n    --border: rgba(255, 255, 255, 0.1);\n    --border-strong: rgba(255, 255, 255, 0.2);\n    --surface: rgba(255, 255, 255, 0.03);\n    --surface-hover: rgba(255, 255, 255, 0.08);\n    --ring-blue: rgb(59, 130, 246);\n    --font-display: 'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, Monaco, monospace;\n    --font-body: 'Inter', -apple-system, system-ui, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--bg-page);\n    color: var(--text-primary);\n    font-family: var(--font-body);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(31,34,40,0.90);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border);\n  }\n  .nav-brand { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--text-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--text-muted); }\n  .nav-cta {\n    display: inline-block; background: var(--white); color: var(--bg);\n    padding: 8px 16px; border-radius: 0px;\n    font-family: var(--font-display); font-size: 12px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.85; }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--white); color: var(--bg);\n    font-family: var(--font-display); font-size: 11px; font-weight: 400;\n    padding: 4px 10px; border-radius: 0px;\n    text-transform: uppercase; letter-spacing: 1px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1.20;\n    color: var(--text-primary); margin-bottom: 16px;\n  }\n  .hero p { font-size: 18px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-primary {\n    display: inline-block; background: var(--white); color: var(--bg);\n    padding: 12px 24px; border-radius: 0px; border: none;\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-primary:hover { opacity: 0.85; }\n  .btn-ghost {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 12px 24px; border-radius: 0px;\n    border: 1px solid var(--border-strong);\n    font-family: var(--font-display); font-size: 14px; font-weight: 400;\n    text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px;\n    cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-ghost:hover { opacity: 0.6; }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }\n  .section-label { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }\n  .section-title { font-family: var(--font-body); font-size: 30px; font-weight: 400; line-height: 1.20; margin-bottom: 32px; color: var(--text-primary); }\n  .section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { overflow: hidden; border: 1px solid var(--border); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; color: var(--text-primary); }\n  .color-swatch-hex { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); }\n  .color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; }\n  .btn-text-link {\n    display: inline-block; background: none; color: var(--text-primary);\n    padding: 8px 16px; font-family: var(--font-body); font-size: 16px;\n    font-weight: 400; text-decoration: none; transition: opacity 0.15s;\n  }\n  .btn-text-link:hover { opacity: 0.5; }\n  .badge-mono {\n    display: inline-block; background: transparent; color: var(--text-primary);\n    padding: 4px 8px; font-family: var(--font-display); font-size: 12px;\n    text-transform: uppercase; letter-spacing: 1px;\n    border: 1px solid var(--border-strong);\n  }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card {\n    background: var(--surface); padding: 24px;\n    border: 1px solid var(--border);\n    transition: border-color 0.2s ease;\n  }\n  .card:hover { border-color: var(--border-strong); }\n  .card h3 { font-family: var(--font-body); font-size: 20px; font-weight: 400; margin-bottom: 8px; color: var(--text-primary); }\n  .card p { font-size: 14px; color: var(--text-secondary); line-height: 1.60; }\n  .card-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border: 1px solid var(--border-strong); margin-bottom: 12px; color: var(--text-muted); }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: transparent; color: var(--text-primary);\n    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;\n    font-family: var(--font-body); font-size: 14px; font-weight: 400; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }\n  .form-input--focus { border-color: var(--ring-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: transparent; color: var(--text-primary);\n    border: 1px solid var(--border-strong); padding: 10px 12px; border-radius: 0px;\n    font-family: var(--font-body); font-size: 14px; font-weight: 400; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--white); margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--white); margin-bottom: 6px; }\n  .radius-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; color: var(--text-muted); }\n  .radius-context { font-size: 10px; color: var(--text-muted); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--surface); padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 400; margin-bottom: 4px; color: var(--text-primary); }\n  .elevation-desc { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }\n  .footer a { color: var(--text-primary); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 36px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">TRY GROK\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System Inspired by xAI\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-primary\" href=\"#\">GET STARTED\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">VIEW DOCUMENTATION\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228; border-bottom: 1px solid rgba(255,255,255,0.1)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Background\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#1f2228\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ffffff\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Pure White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ffffff\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Text, foreground\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Text Opacity Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,1);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Primary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Headings, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.7);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Secondary\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.7)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Descriptions\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.5);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Muted\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.5)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover state, placeholders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.3);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Text Disabled\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.3)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Disabled states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Border & Surface\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.1);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Default\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.1)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Cards, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.2);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Border Strong\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.2)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Active, buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.03);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface Subtle\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.03)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Card backgrounds\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#1f2228\">\u003Cdiv style=\"width:100%;height:100%;background:rgba(255,255,255,0.08);\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Surface Hover\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgba(255,255,255,0.08)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Hover surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Functional\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:rgb(59,130,246)\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Focus Ring\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">rgb(59, 130, 246)\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Keyboard focus\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:72px; font-weight:300; line-height:1.20; color:var(--text-primary);\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero -- 320px (shown at 72px) \u002F GeistMono \u002F 300 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:30px; font-weight:400; line-height:1.20; color:var(--text-primary);\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading -- 30px \u002F universalSans \u002F 400 \u002F 1.20\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.50; color:var(--text-secondary);\">Body text -- xAI is a company working on building artificial intelligence to accelerate human scientific discovery.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body -- 16px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:14px; font-weight:400; line-height:1.43; text-transform:uppercase; letter-spacing:1.4px; color:var(--text-primary);\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button -- 14px \u002F GeistMono \u002F 400 \u002F uppercase \u002F 1.4px tracking\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:14px; font-weight:400; line-height:1.50; color:var(--text-secondary);\">Label \u002F Caption text for supporting information\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Label -- 14px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-body); font-size:12px; font-weight:400; line-height:1.50; color:var(--text-muted);\">Small meta text, timestamps, footnotes\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Small -- 12px \u002F universalSans \u002F 400 \u002F 1.50\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:12px; font-weight:400; line-height:1.50; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);\">MONOSPACE TAG\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Tag -- 12px \u002F GeistMono \u002F uppercase \u002F 1px tracking\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-primary\" href=\"#\">GET STARTED\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">LEARN MORE\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Outlined\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-text-link\" href=\"#\">Text Link\u003C\u002Fa>\u003Cdiv class=\"button-label\">Text Link\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan class=\"badge-mono\">API v2\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Mono Tag\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">MODEL\u003C\u002Fdiv>\n      \u003Ch3>Grok\u003C\u002Fh3>\n      \u003Cp>An AI assistant built to be maximally helpful. Grok has real-time knowledge, a conversational style, and handles complex reasoning tasks.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--border-strong);\">\n      \u003Cdiv class=\"card-tag\">RESEARCH\u003C\u002Fdiv>\n      \u003Ch3>Understanding AI\u003C\u002Fh3>\n      \u003Cp>Advancing fundamental research in artificial intelligence. Card shown with stronger border for elevated emphasis.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-tag\">API\u003C\u002Fdiv>\n      \u003Ch3>Developer Access\u003C\u002Fh3>\n      \u003Cp>Build with Grok through the xAI API. Enterprise-grade performance with straightforward integration.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">API Key Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"my-api-key\">\u003Cdiv class=\"form-state-label\">Default\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Endpoint URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"https:\u002F\u002Fapi.x.ai\u002Fv1\u002Fchat\">\u003Cdiv class=\"form-state-label\">Focus (blue ring)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">System Prompt\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"You are a helpful assistant...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--text-muted); margin-top:8px;\">Base unit: 8px. Scale is deliberately sparse -- large jumps create clear hierarchy through whitespace.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:0px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">0px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Primary (buttons, cards)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Secondary containers\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation (No Shadows)\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border, no shadow\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"background: var(--surface); border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 1: Surface\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Subtle bg (0.03 opacity)\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border);\">\u003Cdiv class=\"elevation-label\">Level 2: Bordered\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.1 opacity border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--border-strong);\">\u003Cdiv class=\"elevation-label\">Level 3: Active\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">0.2 opacity border\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"box-shadow: 0 0 0 2px rgb(59,130,246);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Blue focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size:14px; color:var(--text-muted); margin-top:16px;\">xAI uses no box-shadows. Depth is communicated through border opacity and background opacity only.\u003C\u002Fp>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fx.ai\u002F\">x.ai\u003C\u002Fa> DESIGN.md -- awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# xAI Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fx.ai\u002FDESIGN.md) extracted from the public [xAI](https:\u002F\u002Fx.ai\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fx.ai\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the xAI design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![xAI Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fx.ai\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![xAI Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fx.ai\u002Fpreview-screenshot.png)\n",{"slug":411,"name":412,"category":90,"designMd":413,"previewHtml":414,"previewDarkHtml":415,"readme":416},"zapier","Zapier","# Design System Inspiration of Zapier\n\n## 1. Visual Theme & Atmosphere\n\nZapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (`#fffefb`) that feels like unbleached paper -- the digital equivalent of a well-organized notebook. The near-black (`#201515`) text has a faint reddish-brown warmth, creating an atmosphere more human than mechanical. This is automation designed to feel effortless, not technical.\n\nThe typographic system is a deliberate interplay of two distinct personalities. **Degular Display** -- a geometric, wide-set display face -- handles hero-scale headlines at 56-80px with medium weight (500) and extraordinarily tight line-heights (0.90), creating headlines that compress vertically like stacked blocks. **Inter** serves as the workhorse for everything else, from section headings to body text and navigation, with fallbacks to Helvetica and Arial. **GT Alpina**, an elegant thin-weight serif with aggressive negative letter-spacing (-1.6px to -1.92px), makes occasional appearances for softer editorial moments. This three-font system gives Zapier the ability to shift register -- from bold and punchy (Degular) to clean and functional (Inter) to refined and literary (GT Alpina).\n\nThe brand's signature orange (`#ff4f00`) is unmistakable -- a vivid, saturated red-orange that sits precisely between traffic-cone urgency and sunset warmth. It's used sparingly but decisively: primary CTA buttons, active state underlines, and accent borders. Against the warm cream background, this orange creates a color relationship that feels energetic without being aggressive.\n\n**Key Characteristics:**\n- Warm cream canvas (`#fffefb`) instead of pure white -- organic, paper-like warmth\n- Near-black with reddish undertone (`#201515`) -- text that breathes rather than dominates\n- Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern\n- Inter as the universal UI font across all functional typography\n- GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking\n- Zapier Orange (`#ff4f00`) as the single accent -- vivid, warm, sparingly applied\n- Warm neutral palette: borders (`#c5c0b1`), muted text (`#939084`), surface tints (`#eceae3`)\n- 8px base spacing system with generous padding on CTAs (20px 24px)\n- Border-forward design: `1px solid` borders in warm grays define structure over shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Zapier Black** (`#201515`): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.\n- **Cream White** (`#fffefb`): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.\n- **Off-White** (`#fffdf9`): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.\n\n### Brand Accent\n- **Zapier Orange** (`#ff4f00`): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.\n\n### Neutral Scale\n- **Dark Charcoal** (`#36342e`): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.\n- **Warm Gray** (`#939084`): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.\n- **Sand** (`#c5c0b1`): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.\n- **Light Sand** (`#eceae3`): Secondary button backgrounds, light borders, subtle card surfaces.\n- **Mid Warm** (`#b5b2aa`): Alternate border tone, used on specific span elements.\n\n### Interactive\n- **Orange CTA** (`#ff4f00`): Primary action buttons and active tab underlines.\n- **Dark CTA** (`#201515`): Secondary dark buttons with sand hover state.\n- **Light CTA** (`#eceae3`): Tertiary\u002Fghost buttons with sand hover.\n- **Link Default** (`#201515`): Standard link color, matching body text.\n- **Hover Underline**: Links remove `text-decoration: underline` on hover (inverse pattern).\n\n### Overlay & Surface\n- **Semi-transparent Dark** (`rgba(45, 45, 46, 0.5)`): Overlay button variant, backdrop-like elements.\n- **Pill Surface** (`#fffefb`): White pill buttons with sand borders.\n\n### Shadows & Depth\n- **Inset Underline** (`rgb(255, 79, 0) 0px -4px 0px 0px inset`): Active tab indicator -- orange underline using inset box-shadow.\n- **Hover Underline** (`rgb(197, 192, 177) 0px -4px 0px 0px inset`): Inactive tab hover -- sand-colored underline.\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Degular Display` -- wide geometric display face for hero headlines\n- **Primary**: `Inter`, with fallbacks: `Helvetica, Arial`\n- **Editorial**: `GT Alpina` -- thin-weight serif for editorial moments\n- **System**: `Arial` -- fallback for form elements and system UI\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero XL | Degular Display | 80px (5.00rem) | 500 | 0.90 (tight) | normal | Maximum impact, compressed block |\n| Display Hero | Degular Display | 56px (3.50rem) | 500 | 0.90-1.10 (tight) | 0-1.12px | Primary hero headlines |\n| Display Hero SM | Degular Display | 40px (2.50rem) | 500 | 0.90 (tight) | normal | Smaller hero variant |\n| Display Button | Degular Display | 24px (1.50rem) | 600 | 1.00 (tight) | 1px | Large CTA button text |\n| Section Heading | Inter | 48px (3.00rem) | 500 | 1.04 (tight) | normal | Major section titles |\n| Editorial Heading | GT Alpina | 48px (3.00rem) | 250 | normal | -1.92px | Thin editorial headlines |\n| Editorial Sub | GT Alpina | 40px (2.50rem) | 300 | 1.08 (tight) | -1.6px | Editorial subheadings |\n| Sub-heading LG | Inter | 36px (2.25rem) | 500 | normal | -1px | Large sub-sections |\n| Sub-heading | Inter | 32px (2.00rem) | 400 | 1.25 (tight) | normal | Standard sub-sections |\n| Sub-heading MD | Inter | 28px (1.75rem) | 500 | normal | normal | Medium sub-headings |\n| Card Title | Inter | 24px (1.50rem) | 600 | normal | -0.48px | Card headings |\n| Body Large | Inter | 20px (1.25rem) | 400-500 | 1.00-1.20 (tight) | -0.2px | Feature descriptions |\n| Body Emphasis | Inter | 18px (1.13rem) | 600 | 1.00 (tight) | normal | Emphasized body text |\n| Body | Inter | 16px (1.00rem) | 400-500 | 1.20-1.25 | -0.16px | Standard reading text |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.16 (tight) | normal | Strong labels |\n| Button | Inter | 16px (1.00rem) | 600 | normal | normal | Standard buttons |\n| Button SM | Inter | 14px (0.88rem) | 600 | normal | normal | Small buttons |\n| Caption | Inter | 14px (0.88rem) | 500 | 1.25-1.43 | normal | Labels, metadata |\n| Caption Upper | Inter | 14px (0.88rem) | 600 | normal | 0.5px | Uppercase section labels |\n| Micro | Inter | 12px (0.75rem) | 600 | 0.90-1.33 | 0.5px | Tiny labels, often uppercase |\n| Micro SM | Inter | 13px (0.81rem) | 500 | 1.00-1.54 | normal | Small metadata text |\n\n### Principles\n- **Three-font system, clear roles**: Degular Display commands attention at hero scale only. Inter handles everything functional. GT Alpina adds editorial warmth sparingly.\n- **Compressed display**: Degular at 0.90 line-height creates vertically compressed headline blocks that feel modern and architectural.\n- **Weight as hierarchy signal**: Inter uses 400 (reading), 500 (navigation\u002Femphasis), 600 (headings\u002FCTAs). Degular uses 500 (display) and 600 (buttons).\n- **Uppercase for labels**: Section labels (like \"01 \u002F Colors\") and small categorization use `text-transform: uppercase` with 0.5px letter-spacing.\n- **Negative tracking for elegance**: GT Alpina uses -1.6px to -1.92px letter-spacing for its thin-weight editorial headlines.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Orange**\n- Background: `#ff4f00`\n- Text: `#fffefb`\n- Padding: 8px 16px\n- Radius: 4px\n- Border: `1px solid #ff4f00`\n- Use: Primary CTA (\"Start free with email\", \"Sign up free\")\n\n**Primary Dark**\n- Background: `#201515`\n- Text: `#fffefb`\n- Padding: 20px 24px\n- Radius: 8px\n- Border: `1px solid #201515`\n- Hover: background shifts to `#c5c0b1`, text to `#201515`\n- Use: Large secondary CTA buttons\n\n**Light \u002F Ghost**\n- Background: `#eceae3`\n- Text: `#36342e`\n- Padding: 20px 24px\n- Radius: 8px\n- Border: `1px solid #c5c0b1`\n- Hover: background shifts to `#c5c0b1`, text to `#201515`\n- Use: Tertiary actions, filter buttons\n\n**Pill Button**\n- Background: `#fffefb`\n- Text: `#36342e`\n- Padding: 0px 16px\n- Radius: 20px\n- Border: `1px solid #c5c0b1`\n- Use: Tag-like selections, filter pills\n\n**Overlay Semi-transparent**\n- Background: `rgba(45, 45, 46, 0.5)`\n- Text: `#fffefb`\n- Radius: 20px\n- Hover: background becomes fully opaque `#2d2d2e`\n- Use: Video play buttons, floating actions\n\n**Tab \u002F Navigation (Inset Shadow)**\n- Background: transparent\n- Text: `#201515`\n- Padding: 12px 16px\n- Shadow: `rgb(255, 79, 0) 0px -4px 0px 0px inset` (active orange underline)\n- Hover shadow: `rgb(197, 192, 177) 0px -4px 0px 0px inset` (sand underline)\n- Use: Horizontal tab navigation\n\n### Cards & Containers\n- Background: `#fffefb`\n- Border: `1px solid #c5c0b1` (warm sand border)\n- Radius: 5px (standard), 8px (featured)\n- No shadow elevation by default -- borders define containment\n- Hover: subtle border color intensification\n\n### Inputs & Forms\n- Background: `#fffefb`\n- Text: `#201515`\n- Border: `1px solid #c5c0b1`\n- Radius: 5px\n- Focus: border color shifts to `#ff4f00` (orange)\n- Placeholder: `#939084`\n\n### Navigation\n- Clean horizontal nav on cream background\n- Zapier logotype left-aligned, 104x28px\n- Links: Inter 16px weight 500, `#201515` text\n- CTA: Orange button (\"Start free with email\")\n- Tab navigation uses inset box-shadow underline technique\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Product screenshots with `1px solid #c5c0b1` border\n- Rounded corners: 5-8px\n- Dashboard\u002Fworkflow screenshots prominent in feature sections\n- Light gradient backgrounds behind hero content\n\n### Distinctive Components\n\n**Workflow Integration Cards**\n- Display connected app icons in pairs\n- Arrow or connection indicator between apps\n- Sand border containment\n- Inter weight 500 for app names\n\n**Stat Counter**\n- Large display number using Inter 48px weight 500\n- Muted description below in `#36342e`\n- Used for social proof metrics\n\n**Social Proof Icons**\n- Circular icon buttons: 14px radius\n- Sand border: `1px solid #c5c0b1`\n- Used for social media follow links in footer\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px\n- CTA buttons use generous padding: 20px 24px for large, 8px 16px for standard\n- Section padding: 64px-80px vertical\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with large top padding\n- Feature sections: 2-3 column grids for integration cards\n- Full-width sand-bordered dividers between sections\n- Footer: multi-column dark background (`#201515`)\n\n### Whitespace Philosophy\n- **Warm breathing room**: Generous vertical spacing between sections (64px-80px), but content areas are relatively dense -- Zapier packs information efficiently within its cream canvas.\n- **Architectural compression**: Degular Display headlines at 0.90 line-height compress vertically, contrasting with the open spacing around them.\n- **Section rhythm**: Cream background throughout, with sections separated by sand-colored borders rather than background color changes.\n\n### Border Radius Scale\n- Tight (3px): Small inline spans\n- Standard (4px): Buttons (orange CTA), tags, small elements\n- Content (5px): Cards, links, general containers\n- Comfortable (8px): Featured cards, large buttons, tabs\n- Social (14px): Social icon buttons, pill-like elements\n- Pill (20px): Play buttons, large pill buttons, floating actions\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Bordered (Level 1) | `1px solid #c5c0b1` | Standard cards, containers, inputs |\n| Strong Border (Level 1b) | `1px solid #36342e` | Dark dividers, emphasized sections |\n| Active Tab (Level 2) | `rgb(255, 79, 0) 0px -4px 0px 0px inset` | Active tab underline (orange) |\n| Hover Tab (Level 2b) | `rgb(197, 192, 177) 0px -4px 0px 0px inset` | Hover tab underline (sand) |\n| Focus (Accessibility) | `1px solid #ff4f00` outline | Focus ring on interactive elements |\n\n**Shadow Philosophy**: Zapier deliberately avoids traditional shadow-based elevation. Structure is defined almost entirely through borders -- warm sand (`#c5c0b1`) borders for standard containment, dark charcoal (`#36342e`) borders for emphasis. The only shadow-like technique is the inset box-shadow used for tab underlines, where a `0px -4px 0px 0px inset` shadow creates a bottom-bar indicator. This border-first approach keeps the design grounded and tangible rather than floating.\n\n### Decorative Depth\n- Orange inset underline on active tabs creates visual \"weight\" at the bottom of elements\n- Sand hover underlines provide preview states without layout shifts\n- No background gradients in main content -- the cream canvas is consistent\n- Footer uses full dark background (`#201515`) for contrast reversal\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Degular Display exclusively for hero-scale headlines (40px+) with 0.90 line-height for compressed impact\n- Use Inter for all functional UI -- navigation, body text, buttons, labels\n- Apply warm cream (`#fffefb`) as the background, never pure white\n- Use `#201515` for text, never pure black -- the reddish warmth matters\n- Keep Zapier Orange (`#ff4f00`) reserved for primary CTAs and active state indicators\n- Use sand (`#c5c0b1`) borders as the primary structural element instead of shadows\n- Apply generous button padding (20px 24px) for large CTAs to match Zapier's spacious button style\n- Use inset box-shadow underlines for tab navigation rather than border-bottom\n- Apply uppercase with 0.5px letter-spacing for section labels and micro-categorization\n\n### Don't\n- Don't use Degular Display for body text or UI elements -- it's display-only\n- Don't use pure white (`#ffffff`) or pure black (`#000000`) -- Zapier's palette is warm-shifted\n- Don't apply box-shadow elevation to cards -- use borders instead\n- Don't scatter Zapier Orange across the UI -- it's reserved for CTAs and active states\n- Don't use tight padding on large CTA buttons -- Zapier's buttons are deliberately spacious\n- Don't ignore the warm neutral system -- borders should be `#c5c0b1`, not gray\n- Don't use GT Alpina for functional UI -- it's an editorial accent at thin weights only\n- Don't apply positive letter-spacing to GT Alpina -- it uses aggressive negative tracking (-1.6px to -1.92px)\n- Don't use rounded pill shapes (9999px) for primary buttons -- pills are for tags and social icons\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u003C450px | Tight single column, reduced hero text |\n| Mobile | 450-600px | Standard mobile, stacked layout |\n| Mobile Large | 600-640px | Slight horizontal breathing room |\n| Tablet Small | 640-680px | 2-column grids begin |\n| Tablet | 680-768px | Card grids expand |\n| Tablet Large | 768-991px | Full card grids, expanded padding |\n| Desktop Small | 991-1024px | Desktop layout initiates |\n| Desktop | 1024-1280px | Full layout, maximum content width |\n| Large Desktop | >1280px | Centered with generous margins |\n\n### Touch Targets\n- Large CTA buttons: 20px 24px padding (comfortable 60px+ height)\n- Standard buttons: 8px 16px padding\n- Navigation links: 16px weight 500 with adequate spacing\n- Social icons: 14px radius circular buttons\n- Tab items: 12px 16px padding\n\n### Collapsing Strategy\n- Hero: Degular 80px display scales to 40-56px on smaller screens\n- Navigation: horizontal links + CTA collapse to hamburger menu\n- Feature cards: 3-column grid to 2-column to single-column stacked\n- Integration workflow illustrations: maintain aspect ratio, may simplify\n- Footer: multi-column dark section collapses to stacked\n- Section spacing: 64-80px reduces to 40-48px on mobile\n\n### Image Behavior\n- Product screenshots maintain sand border treatment at all sizes\n- Integration app icons maintain fixed sizes within responsive containers\n- Hero illustrations scale proportionally\n- Full-width sections maintain edge-to-edge treatment\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Zapier Orange (`#ff4f00`)\n- Background: Cream White (`#fffefb`)\n- Heading text: Zapier Black (`#201515`)\n- Body text: Dark Charcoal (`#36342e`)\n- Border: Sand (`#c5c0b1`)\n- Secondary surface: Light Sand (`#eceae3`)\n- Muted text: Warm Gray (`#939084`)\n\n### Example Component Prompts\n- \"Create a hero section on cream background (`#fffefb`). Headline at 56px Degular Display weight 500, line-height 0.90, color `#201515`. Subtitle at 20px Inter weight 400, line-height 1.20, color `#36342e`. Orange CTA button (`#ff4f00`, 4px radius, 8px 16px padding, white text) and dark button (`#201515`, 8px radius, 20px 24px padding, white text).\"\n- \"Design a card: cream background (`#fffefb`), `1px solid #c5c0b1` border, 5px radius. Title at 24px Inter weight 600, letter-spacing -0.48px, `#201515`. Body at 16px weight 400, `#36342e`. No box-shadow.\"\n- \"Build a tab navigation: transparent background. Inter 16px weight 500, `#201515` text. Active tab: `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset`. Hover: `box-shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset`. Padding 12px 16px.\"\n- \"Create navigation: cream sticky header (`#fffefb`). Inter 16px weight 500 for links, `#201515` text. Orange pill CTA 'Start free with email' right-aligned (`#ff4f00`, 4px radius, 8px 16px padding).\"\n- \"Design a footer with dark background (`#201515`). Text `#fffefb`. Links in `#c5c0b1` with hover to `#fffefb`. Multi-column layout. Social icons as 14px-radius circles with sand borders.\"\n\n### Iteration Guide\n1. Always use warm cream (`#fffefb`) background, never pure white -- the warmth defines Zapier\n2. Borders (`1px solid #c5c0b1`) are the structural backbone -- avoid shadow elevation\n3. Zapier Orange (`#ff4f00`) is the only accent color; everything else is warm neutrals\n4. Three fonts, strict roles: Degular Display (hero), Inter (UI), GT Alpina (editorial)\n5. Large CTA buttons need generous padding (20px 24px) -- Zapier buttons feel spacious\n6. Tab navigation uses inset box-shadow underlines, not border-bottom\n7. Text is always warm: `#201515` for dark, `#36342e` for body, `#939084` for muted\n8. Uppercase labels at 12-14px with 0.5px letter-spacing for section categorization\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Zapier (Light)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  @font-face {\n    font-family: 'Degular Display';\n    src: local('Degular Display');\n    font-weight: 500;\n    font-style: normal;\n  }\n  :root {\n    --zapier-black: #201515;\n    --cream: #fffefb;\n    --off-white: #fffdf9;\n    --charcoal: #36342e;\n    --warm-gray: #939084;\n    --sand: #c5c0b1;\n    --light-sand: #eceae3;\n    --mid-warm: #b5b2aa;\n    --orange: #ff4f00;\n    --shadow-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;\n    --shadow-tab-hover: rgb(197, 192, 177) 0px -4px 0px 0px inset;\n    --font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;\n    --font-sans: 'Inter', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--zapier-black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(255, 254, 251, 0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--sand);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--zapier-black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--zapier-black); }\n  .nav-cta {\n    display: inline-block; background: var(--orange); color: var(--cream);\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600;\n    text-decoration: none; border: 1px solid var(--orange); transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 56px; font-weight: 500; line-height: 0.90;\n    color: var(--zapier-black); margin-bottom: 20px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--charcoal); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-orange {\n    display: inline-block; background: var(--orange); color: var(--cream);\n    padding: 8px 16px; border-radius: 4px; border: 1px solid var(--orange);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-orange:hover { opacity: 0.9; }\n  .btn-dark {\n    display: inline-block; background: var(--zapier-black); color: var(--cream);\n    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--zapier-black);\n    font-family: var(--font-sans); font-size: 16px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-dark:hover { background: var(--sand); color: var(--zapier-black); }\n  .btn-ghost {\n    display: inline-block; background: var(--light-sand); color: var(--charcoal);\n    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);\n    font-family: var(--font-sans); font-size: 16px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-ghost:hover { background: var(--sand); color: var(--zapier-black); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 500; line-height: 1.25; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--sand); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 5px; overflow: hidden; border: 1px solid var(--sand); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); }\n  .color-swatch-role { font-size: 11px; color: var(--warm-gray); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--light-sand); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }\n  .btn-pill {\n    display: inline-block; background: var(--cream); color: var(--charcoal);\n    padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;\n    text-decoration: none; border: 1px solid var(--sand);\n  }\n\n  \u002F* TABS *\u002F\n  .tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--sand); margin-bottom: 24px; }\n  .tab-item {\n    padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--charcoal);\n    cursor: pointer; transition: box-shadow 0.15s;\n  }\n  .tab-item:hover { box-shadow: var(--shadow-tab-hover); }\n  .tab-item.active { color: var(--zapier-black); box-shadow: var(--shadow-tab-active); }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--cream); border-radius: 5px; padding: 24px; border: 1px solid var(--sand); transition: border-color 0.2s; }\n  .card:hover { border-color: var(--charcoal); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--charcoal); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; letter-spacing: 0.5px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--zapier-black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--cream); color: var(--zapier-black);\n    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--orange); }\n  .form-input--focus { border-color: var(--orange); }\n  .form-input--error { border-color: #d32f2f; }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--cream); color: var(--zapier-black);\n    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--warm-gray); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--zapier-black); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--warm-gray); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--zapier-black); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--warm-gray); }\n  .radius-context { font-size: 10px; color: var(--warm-gray); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--cream); border-radius: 5px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--warm-gray); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--sand); font-size: 13px; color: var(--warm-gray); }\n  .footer a { color: var(--orange); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Free\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Zapier\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#201515\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Zapier Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#201515\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fffefb; border-bottom:1px solid #c5c0b1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cream White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fffefb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fffdf9; border-bottom:1px solid #c5c0b1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fffdf9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff4f00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Zapier Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff4f00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, active states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#36342e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#36342e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text, borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#939084\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#939084\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c5c0b1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c5c0b1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b5b2aa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Warm\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b5b2aa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Alternate borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eceae3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eceae3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Ghost button bg, surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:56px; font-weight:500; line-height:0.90;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 56px \u002F 500 \u002F 0.90 \u002F Degular Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:40px; font-weight:500; line-height:0.90;\">Display Hero SM\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero SM — 40px \u002F 500 \u002F 0.90 \u002F Degular Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:500; line-height:1.04;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 48px \u002F 500 \u002F 1.04 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:500; line-height:normal; letter-spacing:-1px;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading LG — 36px \u002F 500 \u002F normal \u002F -1px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:600; line-height:normal; letter-spacing:-0.48px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 600 \u002F normal \u002F -0.48px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.40; letter-spacing:-0.2px;\">Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F -0.2px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.00;\">Body Emphasis\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Emphasis — 18px \u002F 600 \u002F 1.00 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.25;\">Body Medium — Navigation and interface text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.25 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.16;\">Body Semibold — Active states\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Semibold — 16px \u002F 600 \u002F 1.16 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:normal;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 14px \u002F 600 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption — Labels and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;\">SECTION LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Upper — 14px \u002F 600 \u002F uppercase \u002F 0.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 12px \u002F 600 \u002F uppercase \u002F 0.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-orange\" href=\"#\">Start Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Orange\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">Integrations\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(45,45,46,0.5); color:#fffefb; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;\">Play Video\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"section-label\" style=\"margin-top:32px;\">Tab Navigation\u003C\u002Fdiv>\n  \u003Cdiv class=\"tab-row\">\n    \u003Cdiv class=\"tab-item active\">Overview\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Integrations\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Pricing\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Enterprise\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,79,0,0.1); color:var(--orange);\">Integration\u003C\u002Fdiv>\n      \u003Ch3>Connect Your Apps\u003C\u002Fh3>\n      \u003Cp>Link your favorite tools and automate workflows between them. No code required, set up in minutes.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--charcoal);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(32,21,21,0.08); color:var(--zapier-black);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>AI Automation\u003C\u002Fh3>\n      \u003Cp>Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--light-sand); color:var(--charcoal);\">Workflow\u003C\u002Fdiv>\n      \u003Ch3>Multi-step Zaps\u003C\u002Fh3>\n      \u003Cp>Chain multiple actions together for complex automations. Trigger once, automate everything downstream.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Zap Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My automation\">\u003Cdiv class=\"form-state-label\">Default (sand border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Trigger App\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Gmail\">\u003Cdiv class=\"form-state-label\">Focus (orange border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Webhook URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-url\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workflow...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">3px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Social icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--light-sand);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border emphasis\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand);\">\u003Cdiv class=\"elevation-label\">Level 1: Sand Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #c5c0b1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--charcoal);\">\u003Cdiv class=\"elevation-label\">Level 1b: Strong\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #36342e\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand); box-shadow: var(--shadow-tab-active);\">\u003Cdiv class=\"elevation-label\">Level 2: Active Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset orange underline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand); box-shadow: var(--shadow-tab-hover);\">\u003Cdiv class=\"elevation-label\">Level 2b: Hover Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset sand underline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 2px solid var(--orange);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Orange focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fzapier.com\u002F\">zapier.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"UTF-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003Ctitle>Design System Preview: Zapier (Dark)\u003C\u002Ftitle>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\u003Cstyle>\n  @font-face {\n    font-family: 'Degular Display';\n    src: local('Degular Display');\n    font-weight: 500;\n    font-style: normal;\n  }\n  :root {\n    --zapier-black: #f0ece6;\n    --cream: #1a1412;\n    --off-white: #1e1816;\n    --charcoal: #c5c0b1;\n    --warm-gray: #8a8578;\n    --sand: #4a463e;\n    --light-sand: #2e2a24;\n    --mid-warm: #5a564e;\n    --orange: #ff4f00;\n    --shadow-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;\n    --shadow-tab-hover: rgb(74, 70, 62) 0px -4px 0px 0px inset;\n    --font-display: 'Degular Display', 'Inter', system-ui, -apple-system, sans-serif;\n    --font-sans: 'Inter', Helvetica, Arial, sans-serif;\n  }\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body {\n    background: var(--cream);\n    color: var(--zapier-black);\n    font-family: var(--font-sans);\n    font-size: 16px; font-weight: 400; line-height: 1.50;\n    -webkit-font-smoothing: antialiased;\n  }\n\n  \u002F* NAV *\u002F\n  .nav {\n    position: sticky; top: 0; z-index: 100;\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 12px 32px;\n    background: rgba(26, 20, 18, 0.9);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--sand);\n  }\n  .nav-brand { font-size: 14px; font-weight: 600; color: var(--zapier-black); text-decoration: none; }\n  .nav-links { display: flex; gap: 24px; list-style: none; }\n  .nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; transition: color 0.15s; }\n  .nav-links a:hover { color: var(--zapier-black); }\n  .nav-cta {\n    display: inline-block; background: var(--orange); color: #fffefb;\n    padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 600;\n    text-decoration: none; border: 1px solid var(--orange); transition: opacity 0.15s;\n  }\n  .nav-cta:hover { opacity: 0.9; }\n\n  \u002F* DARK MODE BADGE *\u002F\n  .dark-badge {\n    position: fixed; top: 16px; right: 16px; z-index: 200;\n    background: var(--zapier-black); color: var(--cream);\n    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;\n  }\n\n  \u002F* HERO *\u002F\n  .hero { padding: 96px 32px 80px; text-align: center; }\n  .hero h1 {\n    font-family: var(--font-display);\n    font-size: 56px; font-weight: 500; line-height: 0.90;\n    color: var(--zapier-black); margin-bottom: 20px;\n  }\n  .hero p { font-size: 20px; font-weight: 400; line-height: 1.40; color: var(--charcoal); max-width: 600px; margin: 0 auto 32px; }\n  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n  .btn-orange {\n    display: inline-block; background: var(--orange); color: #fffefb;\n    padding: 8px 16px; border-radius: 4px; border: 1px solid var(--orange);\n    font-family: var(--font-sans); font-size: 14px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: opacity 0.15s;\n  }\n  .btn-orange:hover { opacity: 0.9; }\n  .btn-dark {\n    display: inline-block; background: var(--light-sand); color: var(--zapier-black);\n    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);\n    font-family: var(--font-sans); font-size: 16px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-dark:hover { background: var(--sand); }\n  .btn-ghost {\n    display: inline-block; background: var(--light-sand); color: var(--charcoal);\n    padding: 20px 24px; border-radius: 8px; border: 1px solid var(--sand);\n    font-family: var(--font-sans); font-size: 16px; font-weight: 600;\n    text-decoration: none; cursor: pointer; transition: all 0.15s;\n  }\n  .btn-ghost:hover { background: var(--sand); color: var(--zapier-black); }\n\n  \u002F* SECTIONS *\u002F\n  .section { padding: 64px 32px; max-width: 1200px; margin: 0 auto; }\n  .section-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--warm-gray); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }\n  .section-title { font-size: 32px; font-weight: 500; line-height: 1.25; margin-bottom: 32px; }\n  .section-divider { border: none; border-top: 1px solid var(--sand); margin: 0; }\n\n  \u002F* COLORS *\u002F\n  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }\n  .color-swatch { border-radius: 5px; overflow: hidden; border: 1px solid var(--sand); }\n  .color-swatch-block { height: 72px; width: 100%; }\n  .color-swatch-info { padding: 10px 12px; }\n  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }\n  .color-swatch-hex { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); }\n  .color-swatch-role { font-size: 11px; color: var(--warm-gray); margin-top: 3px; }\n  .color-group-label { font-size: 14px; font-weight: 600; color: var(--charcoal); margin: 24px 0 10px; }\n\n  \u002F* TYPOGRAPHY *\u002F\n  .type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--light-sand); }\n  .type-sample:last-child { border-bottom: none; }\n  .type-meta { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }\n\n  \u002F* BUTTONS *\u002F\n  .button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\n  .button-item { text-align: center; }\n  .button-label { font-size: 12px; font-weight: 500; color: var(--warm-gray); margin-top: 8px; }\n  .btn-pill {\n    display: inline-block; background: var(--cream); color: var(--charcoal);\n    padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;\n    text-decoration: none; border: 1px solid var(--sand);\n  }\n\n  \u002F* TABS *\u002F\n  .tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--sand); margin-bottom: 24px; }\n  .tab-item {\n    padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--charcoal);\n    cursor: pointer; transition: box-shadow 0.15s;\n  }\n  .tab-item:hover { box-shadow: var(--shadow-tab-hover); }\n  .tab-item.active { color: var(--zapier-black); box-shadow: var(--shadow-tab-active); }\n\n  \u002F* CARDS *\u002F\n  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }\n  .card { background: var(--cream); border-radius: 5px; padding: 24px; border: 1px solid var(--sand); transition: border-color 0.2s; }\n  .card:hover { border-color: var(--charcoal); }\n  .card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.48px; margin-bottom: 8px; }\n  .card p { font-size: 14px; color: var(--charcoal); line-height: 1.50; }\n  .card-badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; letter-spacing: 0.5px; }\n\n  \u002F* FORMS *\u002F\n  .form-group { margin-bottom: 20px; max-width: 400px; }\n  .form-label { display: block; font-size: 14px; font-weight: 500; color: var(--zapier-black); margin-bottom: 6px; }\n  .form-input {\n    width: 100%; background: var(--off-white); color: var(--zapier-black);\n    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;\n    font-family: var(--font-sans); font-size: 14px; outline: none;\n    transition: border-color 0.15s;\n  }\n  .form-input:focus { border-color: var(--orange); }\n  .form-input--focus { border-color: var(--orange); }\n  .form-input--error { border-color: #ff4444; }\n  .form-textarea {\n    width: 100%; min-height: 80px; background: var(--off-white); color: var(--zapier-black);\n    border: 1px solid var(--sand); padding: 10px 12px; border-radius: 5px;\n    font-family: var(--font-sans); font-size: 14px; resize: vertical; outline: none;\n  }\n  .form-state-label { font-size: 11px; color: var(--warm-gray); margin-top: 4px; }\n\n  \u002F* SPACING *\u002F\n  .spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }\n  .spacing-item { text-align: center; }\n  .spacing-block { background: var(--zapier-black); border-radius: 3px; margin-bottom: 6px; height: 28px; }\n  .spacing-value { font-size: 11px; font-weight: 500; color: var(--warm-gray); }\n\n  \u002F* RADIUS *\u002F\n  .radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }\n  .radius-item { text-align: center; }\n  .radius-box { width: 64px; height: 64px; background: var(--zapier-black); margin-bottom: 6px; }\n  .radius-label { font-size: 11px; font-weight: 500; color: var(--warm-gray); }\n  .radius-context { font-size: 10px; color: var(--warm-gray); }\n\n  \u002F* ELEVATION *\u002F\n  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .elevation-card { background: var(--cream); border-radius: 5px; padding: 20px; text-align: center; }\n  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }\n  .elevation-desc { font-size: 11px; color: var(--warm-gray); }\n\n  \u002F* FOOTER *\u002F\n  .footer { padding: 32px; text-align: center; border-top: 1px solid var(--sand); font-size: 13px; color: var(--warm-gray); }\n  .footer a { color: var(--orange); text-decoration: underline; }\n\n  @media (max-width: 768px) {\n    .hero h1 { font-size: 40px; }\n    .nav-links { display: none; }\n    .section { padding: 48px 20px; }\n    .card-grid { grid-template-columns: 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cnav class=\"nav\">\n  \u003Ca class=\"nav-brand\" href=\"#\">awesome-design-md\u003C\u002Fa>\n  \u003Cul class=\"nav-links\">\n    \u003Cli>\u003Ca href=\"#colors\">Colors\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#typography\">Typography\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#buttons\">Buttons\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#cards\">Cards\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#forms\">Forms\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#spacing\">Spacing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Ca class=\"nav-cta\" href=\"#\">Start Free\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cdiv class=\"dark-badge\">Dark Mode\u003C\u002Fdiv>\n\n\u003Csection class=\"hero\">\n  \u003Ch1>Design System\u003Cbr>Inspired by Zapier\u003C\u002Fh1>\n  \u003Cp>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.\u003C\u002Fp>\n  \u003Cdiv class=\"hero-buttons\">\n    \u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\n    \u003Ca class=\"btn-ghost\" href=\"#\">View Documentation\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"colors\">\n  \u003Cdiv class=\"section-label\">01 \u002F Colors\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Color Palette\u003C\u002Fh2>\n\n  \u003Cdiv class=\"color-group-label\">Primary\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#201515\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Zapier Black\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#201515\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary text, headings\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fffefb\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Cream White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fffefb\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Page background\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#fffdf9\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Off White\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#fffdf9\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary surface\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Brand Accent\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#ff4f00\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Zapier Orange\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#ff4f00\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Primary CTA, active states\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"color-group-label\">Neutral Scale\u003C\u002Fdiv>\n  \u003Cdiv class=\"color-grid\">\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#36342e\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Dark Charcoal\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#36342e\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Secondary text, borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#939084\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Warm Gray\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#939084\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Muted text, labels\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#c5c0b1\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#c5c0b1\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Borders, dividers\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#b5b2aa\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Mid Warm\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#b5b2aa\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Alternate borders\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"color-swatch\">\u003Cdiv class=\"color-swatch-block\" style=\"background:#eceae3\">\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-info\">\u003Cdiv class=\"color-swatch-name\">Light Sand\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-hex\">#eceae3\u003C\u002Fdiv>\u003Cdiv class=\"color-swatch-role\">Ghost button bg, surfaces\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"typography\">\n  \u003Cdiv class=\"section-label\">02 \u002F Typography\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Typography Scale\u003C\u002Fh2>\n\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:56px; font-weight:500; line-height:0.90;\">Display Hero\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero — 56px \u002F 500 \u002F 0.90 \u002F Degular Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-family:var(--font-display); font-size:40px; font-weight:500; line-height:0.90;\">Display Hero SM\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Display Hero SM — 40px \u002F 500 \u002F 0.90 \u002F Degular Display\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:48px; font-weight:500; line-height:1.04;\">Section Heading\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Section Heading — 48px \u002F 500 \u002F 1.04 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:36px; font-weight:500; line-height:normal; letter-spacing:-1px;\">Sub-heading Large\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Sub-heading LG — 36px \u002F 500 \u002F normal \u002F -1px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:24px; font-weight:600; line-height:normal; letter-spacing:-0.48px;\">Card Title\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Card Title — 24px \u002F 600 \u002F normal \u002F -0.48px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:20px; font-weight:400; line-height:1.40; letter-spacing:-0.2px;\">Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Large — 20px \u002F 400 \u002F 1.40 \u002F -0.2px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:18px; font-weight:600; line-height:1.00;\">Body Emphasis\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Emphasis — 18px \u002F 600 \u002F 1.00 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:500; line-height:1.25;\">Body Medium — Navigation and interface text\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Medium — 16px \u002F 500 \u002F 1.25 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:16px; font-weight:600; line-height:1.16;\">Body Semibold — Active states\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Body Semibold — 16px \u002F 600 \u002F 1.16 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; line-height:normal;\">Button Label\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Button — 14px \u002F 600 \u002F normal \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:500; line-height:1.43;\">Caption — Labels and metadata\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption — 14px \u002F 500 \u002F 1.43 \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;\">SECTION LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Caption Upper — 14px \u002F 600 \u002F uppercase \u002F 0.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"type-sample\">\u003Cdiv style=\"font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;\">MICRO LABEL\u003C\u002Fdiv>\u003Cdiv class=\"type-meta\">Micro — 12px \u002F 600 \u002F uppercase \u002F 0.5px \u002F Inter\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"buttons\">\n  \u003Cdiv class=\"section-label\">03 \u002F Buttons\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Button Variants\u003C\u002Fh2>\n  \u003Cdiv class=\"button-row\" style=\"margin-bottom:32px;\">\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-orange\" href=\"#\">Start Free\u003C\u002Fa>\u003Cdiv class=\"button-label\">Primary Orange\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-dark\" href=\"#\">Get Started\u003C\u002Fa>\u003Cdiv class=\"button-label\">Dark CTA\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-ghost\" href=\"#\">Learn More\u003C\u002Fa>\u003Cdiv class=\"button-label\">Ghost \u002F Light\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Ca class=\"btn-pill\" href=\"#\">Integrations\u003C\u002Fa>\u003Cdiv class=\"button-label\">Pill\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"button-item\">\u003Cspan style=\"display:inline-block; background:rgba(240,236,230,0.3); color:#f0ece6; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:500;\">Play Video\u003C\u002Fspan>\u003Cdiv class=\"button-label\">Overlay\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"section-label\" style=\"margin-top:32px;\">Tab Navigation\u003C\u002Fdiv>\n  \u003Cdiv class=\"tab-row\">\n    \u003Cdiv class=\"tab-item active\">Overview\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Integrations\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Pricing\u003C\u002Fdiv>\n    \u003Cdiv class=\"tab-item\">Enterprise\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"cards\">\n  \u003Cdiv class=\"section-label\">04 \u002F Cards\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Card Examples\u003C\u002Fh2>\n  \u003Cdiv class=\"card-grid\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(255,79,0,0.15); color:var(--orange);\">Integration\u003C\u002Fdiv>\n      \u003Ch3>Connect Your Apps\u003C\u002Fh3>\n      \u003Cp>Link your favorite tools and automate workflows between them. No code required, set up in minutes.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"border-color: var(--charcoal);\">\n      \u003Cdiv class=\"card-badge\" style=\"background:rgba(240,236,230,0.1); color:var(--zapier-black);\">Featured\u003C\u002Fdiv>\n      \u003Ch3>AI Automation\u003C\u002Fh3>\n      \u003Cp>Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-badge\" style=\"background:var(--light-sand); color:var(--charcoal);\">Workflow\u003C\u002Fdiv>\n      \u003Ch3>Multi-step Zaps\u003C\u002Fh3>\n      \u003Cp>Chain multiple actions together for complex automations. Trigger once, automate everything downstream.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"forms\">\n  \u003Cdiv class=\"section-label\">05 \u002F Forms\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Form Elements\u003C\u002Fh2>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Zap Name\u003C\u002Flabel>\u003Cinput class=\"form-input\" type=\"text\" placeholder=\"My automation\">\u003Cdiv class=\"form-state-label\">Default (sand border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Trigger App\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--focus\" type=\"text\" value=\"Gmail\">\u003Cdiv class=\"form-state-label\">Focus (orange border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Webhook URL\u003C\u002Flabel>\u003Cinput class=\"form-input form-input--error\" type=\"text\" value=\"invalid-url\">\u003Cdiv class=\"form-state-label\">Error (red border)\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv class=\"form-group\">\u003Clabel class=\"form-label\">Description\u003C\u002Flabel>\u003Ctextarea class=\"form-textarea\" placeholder=\"Describe your workflow...\">\u003C\u002Ftextarea>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"spacing\">\n  \u003Cdiv class=\"section-label\">06 \u002F Spacing\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Spacing Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"spacing-row\">\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">4\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">8\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:12px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">12\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:16px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">16\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">20\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:24px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">24\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:32px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">32\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:40px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">40\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:48px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">48\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"spacing-item\">\u003Cdiv class=\"spacing-block\" style=\"width:64px\">\u003C\u002Fdiv>\u003Cdiv class=\"spacing-value\">64\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"radius\">\n  \u003Cdiv class=\"section-label\">07 \u002F Radius\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Border Radius Scale\u003C\u002Fh2>\n  \u003Cdiv class=\"radius-row\">\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:3px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">3px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Spans\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:4px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">4px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:5px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">5px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Cards\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:8px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">8px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Large buttons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:14px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">14px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Social icons\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"radius-item\">\u003Cdiv class=\"radius-box\" style=\"border-radius:20px\">\u003C\u002Fdiv>\u003Cdiv class=\"radius-label\">20px\u003C\u002Fdiv>\u003Cdiv class=\"radius-context\">Pills\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Chr class=\"section-divider\">\n\n\u003Csection class=\"section\" id=\"elevation\">\n  \u003Cdiv class=\"section-label\">08 \u002F Elevation\u003C\u002Fdiv>\n  \u003Ch2 class=\"section-title\">Elevation & Depth\u003C\u002Fh2>\n  \u003Cdiv class=\"elevation-grid\">\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--light-sand);\">\u003Cdiv class=\"elevation-label\">Level 0: Flat\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">No border emphasis\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand);\">\u003Cdiv class=\"elevation-label\">Level 1: Sand Border\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #c5c0b1\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--charcoal);\">\u003Cdiv class=\"elevation-label\">Level 1b: Strong\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">1px solid #36342e\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand); box-shadow: var(--shadow-tab-active);\">\u003Cdiv class=\"elevation-label\">Level 2: Active Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset orange underline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 1px solid var(--sand); box-shadow: var(--shadow-tab-hover);\">\u003Cdiv class=\"elevation-label\">Level 2b: Hover Tab\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Inset sand underline\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Cdiv class=\"elevation-card\" style=\"border: 2px solid var(--orange);\">\u003Cdiv class=\"elevation-label\">Focus\u003C\u002Fdiv>\u003Cdiv class=\"elevation-desc\">Orange focus ring\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cfooter class=\"footer\">\n  Generated from \u003Ca href=\"https:\u002F\u002Fzapier.com\u002F\">zapier.com\u003C\u002Fa> DESIGN.md — awesome-design-md\n\u003C\u002Ffooter>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","# Zapier Inspired Design System\n\n[DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fzapier\u002FDESIGN.md) extracted from the public [Zapier](https:\u002F\u002Fzapier.com\u002F) 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.\n\n## Files\n\n| File | Description |\n|------|-------------|\n| `DESIGN.md` | Complete design system documentation (9 sections) |\n| `preview.html` | Interactive design token catalog (light) |\n| `preview-dark.html` | Interactive design token catalog (dark) |\n\n\nUse [DESIGN.md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\u002Fblob\u002Fmain\u002Fdesign-md\u002Fzapier\u002FDESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Zapier design language.\n\n## Preview\n\nA sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.\n\n### Dark Mode\n![Zapier Design System — Dark Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fzapier\u002Fpreview-dark-screenshot.png)\n\n### Light Mode\n![Zapier Design System — Light Mode](https:\u002F\u002Fpub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev\u002Fdesigns\u002Fzapier\u002Fpreview-screenshot.png)\n",1775970504962]