update YAML

Add issue template

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: voltagent
+

.github/ISSUE_TEMPLATE/design-md-request.yml

@@ -0,0 +1,46 @@
+name: Design MD Request
+description: Request a DESIGN.md generated from a website
+title: "DESIGN.md for <your website>"
+labels: ["design-md"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Fill out the form below to request a DESIGN.md generation for your website.
+  - type: input
+    id: website
+    attributes:
+      label: Website URL
+      description: The website you want us to generate DESIGN.md for
+      placeholder: https://example.com
+    validations:
+      required: true
+
+  - type: input
+    id: email
+    attributes:
+      label: Delivery Email
+      description: Email address where we should send the generated DESIGN.md
+      placeholder: you@example.com
+    validations:
+      required: true
+
+  - type: dropdown
+    id: sponsor
+    attributes:
+      label: Do you want to prioritize your DESIGN.md generation request?
+      description: We receive many requests to generate DESIGN.md. As we maintain multiple open-source projects with limited bandwidth, sponsor-backed requests are prioritized. Select the "Priority DESIGN.md generation (awesome-design-md)" tier on [GitHub Sponsors](https://github.com/sponsors/VoltAgent).
+      options:
+        - "Yes, I am a GitHub Sponsor"
+        - "No, I am not a sponsor"
+    validations:
+      required: true
+
+  - type: textarea
+    id: details
+    attributes:
+      label: Additional Details (optional)
+      description: Anything else you'd like us to know about this request
+    validations:
+      required: false

.gitignore

@@ -0,0 +1 @@
+.DS_Store

CONTRIBUTING.md

@@ -8,95 +8,20 @@ This repository is a curated collection of DESIGN.md files extracted from popula
 
 ### Request a New Site
 
-The easiest way to contribute. [Open an issue](https://github.com/VoltAgent/awesome-design-md/issues) with:
+To request a DESIGN.md for a website, [open an issue](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) with the website URL.
 
-- The site URL
+We receive many requests, and maintainer bandwidth is limited. Sponsor-backed requests are prioritized, consider supporting the project via [GitHub Sponsors](https://github.com/sponsors/VoltAgent) if you'd like faster turnaround.
-- Why it's interesting (unique design language, popular brand, etc.)
-
-We'll extract the DESIGN.md and add it to the collection.
 
 ### Improve an Existing DESIGN.md
 
 If you notice issues with an existing file:
 
-1. Open the site's `DESIGN.md`
+1. **Open an issue first** to describe what you'd like to change and get feedback from maintainers
-2. Compare against the live site
+2. Open the site's `DESIGN.md`
-3. Fix incorrect hex values, missing tokens, or weak descriptions
+3. Compare against the live site
-4. Update the `preview.html` and `preview-dark.html` if your changes affect displayed tokens
+4. Fix incorrect hex values, missing tokens, or weak descriptions
-5. Open a PR with before/after rationale
+5. Update the `preview.html` and `preview-dark.html` if your changes affect displayed tokens
-
+6. Open a PR with before/after rationale
-### Submit a New DESIGN.md
-
-If you've extracted a DESIGN.md yourself:
-
-1. Create a directory named after the site (e.g., `x/`)
-2. Include at minimum:
-   - `DESIGN.md`: The design system document
-   - `preview.html`: Visual catalog (light)
-   - `preview-dark.html`: Visual catalog (dark)
-3. Update `README.md`: Add the site to the correct category table
-4. Open a PR with the site name and a short description
-
-## DESIGN.md Quality Bar
-
-Every DESIGN.md must include all 9 sections:
-
-1. Visual Theme & Atmosphere
-2. Color Palette & Roles
-3. Typography Rules
-4. Component Stylings
-5. Layout Principles
-6. Depth & Elevation
-7. Do's and Don'ts
-8. Responsive Behavior
-9. Agent Prompt Guide
-
-### Writing Standards
-
-- **Every color**: Semantic Name (`#hex`) + functional role
-- **Atmosphere**: Evocative and specific, never "clean and modern"
-- **Typography**: Full hierarchy table with size, weight, line-height, letter-spacing
-- **Components**: Include hover/focus states and transition timing
-- **Why, not just what**: Explain the reasoning behind design decisions
-
-### Common Issues to Watch For
-
-- Hex values that don't match the live site (token extraction isn't perfect)
-- Missing hover/focus states on buttons and links
-- Generic atmosphere descriptions that could apply to any site
-- Incomplete typography tables (missing code font, small labels, etc.)
-
-## Preview HTML Standards
-
-- Self-contained single HTML file (inline CSS, no external dependencies except Google Fonts)
-- Must display: color swatches, typography scale, button variants, card examples, form elements, spacing scale, border radius, elevation levels
-- No logo icons or emoji icons in the nav. Plain text site name only
-- No Do's and Don'ts section in the HTML preview
-- Responsive: must look reasonable on mobile
-
-## Validation Checklist (Before PR)
-
-- [ ] All 9 sections present in DESIGN.md
-- [ ] Every color has semantic name + hex + role
-- [ ] Typography table is complete with real values
-- [ ] Preview HTML files are self-contained and render correctly
-- [ ] Site added to correct category in README.md
-- [ ] Links in README resolve correctly
-
-## Pull Request Checklist
-
-- [ ] Added/updated DESIGN.md file
-- [ ] Added/updated preview HTML files
-- [ ] Updated main README.md
-- [ ] Included clear PR description
-- [ ] Verified against live site
-
-## Style Notes
-
-- Keep documentation in English.
-- Prefer precise, descriptive wording over marketing language.
-- Keep category descriptions short and factual.
-- Alphabetical ordering within categories.
 
 ## License
 

README.md

@@ -16,17 +16,14 @@
 <div align="center">
 
 [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
-![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-44-10b981?style=classic)
+![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-55-10b981?style=classic)
 [![Last Update](https://img.shields.io/github/last-commit/VoltAgent/awesome-design-md?label=Last%20update&style=classic)](https://github.com/VoltAgent/awesome-design-md)
 [![Discord](https://img.shields.io/discord/1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://s.voltagent.dev/discord)
 
 </div>
 </div>
 
-
+# Awesome DESIGN.md
-
-
-# Awesome Design MD
 
 Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.
 
@@ -76,6 +73,12 @@ Each site includes:
 1. Copy a site's `DESIGN.md` into your project root
 2. Tell your AI agent to use it.
 
+
+## Request a DESIGN.md
+
+[Open a GitHub issue with this template](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) to request a DESIGN.md generation for a website.
+
+
 ## Collection
 
 ### AI & Machine Learning
@@ -100,10 +103,14 @@ Each site includes:
 - [**Linear**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/linear.app/) - Project management for engineers. Ultra-minimal, precise, purple accent
 - [**Lovable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lovable/) - AI full-stack builder. Playful gradients, friendly dev aesthetic
 - [**Mintlify**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mintlify/) - Documentation platform. Clean, green-accented, reading-optimized
+- [**PostHog**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/posthog/) - Product analytics. Playful hedgehog branding, developer-friendly dark UI
+- [**Raycast**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/raycast/) - Productivity launcher. Sleek dark chrome, vibrant gradient accents
 - [**Resend**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/resend/) - Email API for developers. Minimal dark theme, monospace accents
 - [**Sentry**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sentry/) - Error monitoring. Dark dashboard, data-dense, pink-purple accent
 - [**Supabase**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/supabase/) - Open-source Firebase alternative. Dark emerald theme, code-first
+- [**Superhuman**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/superhuman/) - Fast email client. Premium dark UI, keyboard-first, purple glow
 - [**Vercel**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/vercel/) - Frontend deployment platform. Black and white precision, Geist font
+- [**Warp**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/warp/) - Modern terminal. Dark IDE-like interface, block-based command UI
 - [**Zapier**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/zapier/) - Automation platform. Warm orange, friendly illustration-driven
 
 ### Infrastructure & Cloud
@@ -117,10 +124,16 @@ Each site includes:
 
 ### Design & Productivity
 
+- [**Airtable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airtable/) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
+- [**Cal.com**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cal/) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
 - [**Clay**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clay/) - Creative agency. Organic shapes, soft gradients, art-directed layout
 - [**Figma**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/figma/) - Collaborative design tool. Vibrant multi-color, playful yet professional
+- [**Framer**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/framer/) - Website builder. Bold black and blue, motion-first, design-forward
+- [**Intercom**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/intercom/) - Customer messaging. Friendly blue palette, conversational UI patterns
+- [**Miro**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/miro/) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
 - [**Notion**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/notion/) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
 - [**Pinterest**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/pinterest/) - Visual discovery platform. Red accent, masonry grid, image-first
+- [**Webflow**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/webflow/) - Visual web builder. Blue-accented, polished marketing site aesthetic
 
 ### Fintech & Crypto
 
@@ -144,12 +157,13 @@ Each site includes:
 
 ## Contributing
 
-We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
-- [**Request a site**](https://github.com/VoltAgent/awesome-design-md/issues): Open an issue with the URL
 - **Improve existing files**: Fix wrong colors, missing tokens, weak descriptions
 - **Report issues**: Let us know if something looks off
 
+Before opening a PR, please [open an issue](https://github.com/VoltAgent/awesome-design-md/issues) first to discuss your idea and get feedback from maintainers.
+
 
 ## License
 

design-md/airtable/DESIGN.md

@@ -0,0 +1,89 @@
+# Design System: Airtable
+
+## 1. Visual Theme & Atmosphere
+
+Airtable'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.
+
+**Key Characteristics:**
+- White canvas with deep navy text (`#181d26`)
+- Airtable Blue (`#1b61c9`) as primary CTA and link color
+- Haas + Haas Groot Disp dual font system
+- Positive letter-spacing on body text (0.08px–0.28px)
+- 12px radius buttons, 16px–32px for cards
+- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
+- Semantic theme tokens: `--theme_*` CSS variable naming
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Deep Navy** (`#181d26`): Primary text
+- **Airtable Blue** (`#1b61c9`): CTA buttons, links
+- **White** (`#ffffff`): Primary surface
+- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
+
+### Semantic
+- **Success Green** (`#006400`): `--theme_success-text`
+- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
+- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
+
+### Neutral
+- **Dark Gray** (`#333333`): Secondary text
+- **Mid Blue** (`#254fad`): Link/accent blue variant
+- **Border** (`#e0e2e6`): Card borders
+- **Light Surface** (`#f8fafc`): Subtle surface
+
+### Shadows
+- **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`)
+- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
+- **Display**: `Haas Groot Disp`, fallback: `Haas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Haas | 48px | 400 | 1.15 | normal |
+| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
+| Section Heading | Haas | 40px | 400 | 1.25 | normal |
+| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
+| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
+| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
+| Body | Haas | 18px | 400 | 1.35 | 0.18px |
+| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
+| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
+| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
+- **White**: white bg, `#181d26` text, 12px radius, 1px border white
+- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
+
+### Cards: `1px solid #e0e2e6`, 16px–24px radius
+### Inputs: Standard Haas styling
+
+## 5. Layout
+- Spacing: 1–48px (8px base)
+- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
+
+## 6. Depth
+- Blue-tinted multi-layer shadow system
+- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
+
+## 7. Do's and Don'ts
+### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
+### Don't: Skip positive letter-spacing, use heavy shadows
+
+## 8. Responsive Behavior
+Breakpoints: 425–1664px (23 breakpoints)
+
+## 9. Agent Prompt Guide
+- Text: Deep Navy (`#181d26`)
+- CTA: Airtable Blue (`#1b61c9`)
+- Background: White (`#ffffff`)
+- Border: `#e0e2e6`

design-md/airtable/README.md

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

design-md/airtable/preview-dark.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Airtable (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  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; }
+
+  .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); }
+  .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .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; }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
+  .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
+  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:56px; }
+  .color-swatch-info { padding:8px; }
+  .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
+  .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
+
+  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:9px; color:var(--weak); margin-top:4px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
+
+  .form-group { margin-bottom:12px; max-width:380px; }
+  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
+  .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; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:#c00; }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
+  .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .radius-row { display:flex; gap:10px; flex-wrap:wrap; }
+  .radius-item { text-align:center; }
+  .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
+  .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
+  .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
+  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
+  .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
+  .footer a { color:var(--white); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
+<div 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</div>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
+<div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
+<div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
+<div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://airtable.com/">airtable.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/airtable/preview.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Airtable (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  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; }
+
+  .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); }
+  .nav-brand { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--navy); text-decoration:none; letter-spacing:0.14px; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:48px; font-weight:400; line-height:1.15; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:18px; color:var(--weak); max-width:520px; margin:0 auto 32px; letter-spacing:0.18px; line-height:1.35; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .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; }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:14px; font-weight:500; color:var(--weak); letter-spacing:0.28px; margin-bottom:8px; }
+  .section-title { font-size:40px; font-weight:400; line-height:1.25; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
+  .color-swatch { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:56px; }
+  .color-swatch-info { padding:8px; }
+  .color-swatch-name { font-size:11px; font-weight:500; letter-spacing:0.11px; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--weak); font-family:monospace; }
+  .color-group-label { font-size:11px; font-weight:500; color:var(--weak); margin:16px 0 6px; letter-spacing:0.16px; }
+
+  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,230,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:9px; color:var(--weak); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:9px; color:var(--weak); margin-top:4px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:400; letter-spacing:0.12px; line-height:1.30; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--weak); letter-spacing:0.07px; }
+
+  .form-group { margin-bottom:12px; max-width:380px; }
+  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:4px; letter-spacing:0.14px; }
+  .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; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:#c00; }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--weak); margin-top:3px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
+  .spacing-value { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .radius-row { display:flex; gap:10px; flex-wrap:wrap; }
+  .radius-item { text-align:center; }
+  .radius-box { width:48px; height:48px; background:var(--light); border:1px solid var(--border); margin-bottom:3px; }
+  .radius-label { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
+  .elevation-card { background:var(--white); border-radius:16px; padding:14px; text-align:center; }
+  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
+  .elevation-desc { font-size:8px; color:var(--weak); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--navy); color:rgba(255,255,255,0.5); font-size:11px; }
+  .footer a { color:var(--white); text-decoration:underline; }
+
+  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up for free</a></nav>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Airtable</span></h1><p>Every color, font, and component — connected in one workspace.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up for free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#181d26"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#181d26</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#1b61c9"></div><div class="color-swatch-info"><div class="color-swatch-name">Airtable Blue</div><div class="color-swatch-hex">#1b61c9</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#254fad"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Blue</div><div class="color-swatch-hex">#254fad</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#333333"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Gray</div><div class="color-swatch-hex">#333333</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#e0e2e6"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e0e2e6</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#f8fafc"></div><div class="color-swatch-info"><div class="color-swatch-name">Light</div><div class="color-swatch-hex">#f8fafc</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:48px; font-weight:400; line-height:1.15;">Display Hero</div><div class="type-meta">Haas — 48px / 400 / 1.15</div></div>
+<div class="type-sample"><div style="font-size:48px; font-weight:900; line-height:1.50;">Display Bold</div><div class="type-meta">Haas Groot Disp — 48px / 900 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:32px; font-weight:400; line-height:1.15;">Sub-heading</div><div class="type-meta">Haas — 32px / 400 / 1.15</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Haas — 18px / 400 / 1.35 / +0.18px</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.30; letter-spacing:0.16px;">Button Label</div><div class="type-meta">Haas — 16px / 500 / 1.30 / +0.16px</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0.28px; color:var(--weak);">Caption — Updated 3 min ago</div><div class="type-meta">Haas — 14px / 500 / 1.35 / +0.28px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign up</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Product Development</h3><p>Build products faster with connected workflows and real-time collaboration.</p></div>
+<div class="card"><h3>Marketing Campaigns</h3><p>Plan, execute, and track campaigns from ideation to launch.</p></div>
+<div class="card"><h3>Operations</h3><p>Streamline business processes with automated workflows.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Workspace</label><input class="form-input form-input--focus" type="text" value="My Team"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Base Name</label><input class="form-input form-input--error" type="text" value=""><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your base..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:24px"></div><div class="radius-label">24px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:48px; height:48px;"></div><div class="radius-label">50%</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px;"><div class="elevation-label">Blue Shadow</div><div class="elevation-desc">Blue-tinted multi-layer</div></div><div class="elevation-card" style="box-shadow:rgba(15,48,106,0.05) 0px 0px 20px;"><div class="elevation-label">Soft</div><div class="elevation-desc">Ambient navy glow</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://airtable.com/">airtable.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/cal/DESIGN.md

@@ -0,0 +1,259 @@
+# Design System: Cal.com
+
+## 1. Visual Theme & Atmosphere
+
+Cal.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.
+
+Cal 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.
+
+The 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.
+
+**Key Characteristics:**
+- Purely grayscale brand palette — no brand colors, boldness through monochrome
+- Cal Sans custom geometric display font with extremely tight default letter-spacing
+- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
+- Cal Sans for headings, Inter for body — clean typographic division
+- Wide border-radius scale from 2px to 9999px (pill) — versatile rounding
+- White canvas with near-black (#242424) text — maximum contrast, zero decoration
+- Product screenshots as primary visual content — the scheduling UI sells itself
+- Built on Framer platform
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Charcoal** (`#242424`): Primary heading and button text — Cal.com's signature near-black, warmer than pure black
+- **Midnight** (`#111111`): Deepest text/overlay color — used at 50% opacity for subtle overlays
+- **White** (`#ffffff`): Primary background and surface — the dominant canvas
+
+### Secondary & Accent
+- **Link Blue** (`#0099ff`): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
+- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction
+- **Default Link** (`#0000ee`): Browser-default link color on some elements — unmodified, signaling openness
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background and card surfaces
+- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation — barely visible tint
+- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels
+
+### Neutrals & Text
+- **Charcoal** (`#242424`): Headlines, buttons, primary UI text
+- **Midnight** (`#111111`): Deep black for high-contrast links and nav text
+- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content
+- **Pure Black** (`#000000`): Certain link text elements
+- **Border Gray** (approx `rgba(34, 42, 53, 0.08–0.10)`): Shadow-based borders using ring shadows instead of CSS borders
+
+### Semantic & Accent
+- Cal.com is deliberately colorless for brand elements — "a grayscale brand to emphasise on boldness and professionalism"
+- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome
+- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral
+
+### Gradient System
+- No gradients on the marketing site — the design is fully flat and monochrome
+- Depth is achieved entirely through shadows, not color transitions
+
+## 3. Typography Rules
+
+### Font Family
+- **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)
+- **Body**: `Inter` — "rock-solid" standard body font. Fallback: `Inter Placeholder`
+- **UI Light**: `Cal Sans UI Variable Light` — light-weight variant (300) for softer UI text with -0.2px letter-spacing
+- **UI Medium**: `Cal Sans UI Medium` — medium-weight variant (500) for emphasized captions
+- **Mono**: `Roboto Mono` — for code blocks and technical content
+- **Tertiary**: `Matter Regular` / `Matter SemiBold` / `Matter Medium` — additional body fonts for specific contexts
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |
+| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |
+| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |
+| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |
+| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |
+| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |
+| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |
+| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |
+| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |
+| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |
+| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |
+| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |
+| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |
+| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |
+| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |
+
+### Principles
+- **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
+- **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
+- **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
+- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight
+- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
+- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
+- **Pill**: 9999px radius for rounded pill-shaped actions and badges
+- **Compact**: 4px padding, small text — utility actions within product UI
+- **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
+
+### Cards & Containers
+- **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
+- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation
+- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections
+- **Hover**: Likely subtle shadow deepening or scale transform
+
+### Inputs & Forms
+- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border
+- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)
+- **Text input**: 8px radius, standard border treatment
+- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms
+
+### Navigation
+- **Top nav**: White/transparent background, Cal Sans links at near-black
+- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis
+- **CTA button**: Dark Primary in the nav — high contrast call-to-action
+- **Mobile**: Collapses to hamburger with simplified navigation
+- **Sticky**: Fixed on scroll
+
+### Image Treatment
+- **Product screenshots**: Large scheduling UI screenshots — the product is the primary visual
+- **Trust logos**: Grayscale company logos in a horizontal trust bar
+- **Aspect ratios**: Wide landscape for product UI screenshots
+- **No decorative imagery**: No illustrations, photos, or abstract graphics — pure product + typography
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
+- **Section padding**: 80px–96px vertical between major sections (generous)
+- **Card padding**: 12px–24px internal
+- **Component gaps**: 4px–8px between related elements
+- **Notable jump**: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier
+
+### Grid & Container
+- **Max width**: ~1200px content container, centered
+- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids
+- **Feature showcase**: Product screenshots flanked by description text
+- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated
+
+### Whitespace Philosophy
+- **Lavish section spacing**: 80px–96px between sections creates a breathable, premium feel
+- **Product-first content**: Screenshots dominate the visual space — minimal surrounding decoration
+- **Centered headlines**: Cal Sans headings centered with generous margins above and below
+
+### Border Radius Scale
+- **2px**: Subtle rounding on inline elements
+- **4px**: Small UI components
+- **6px–7px**: Buttons, small cards, images
+- **8px**: Standard interactive elements — buttons, inputs, images
+- **12px**: Medium containers — links, larger cards, images
+- **16px**: Large section containers
+- **29px**: Special rounded elements
+- **100px**: Large rounding — nearly circular on small elements
+- **1000px**: Very large rounding
+- **9999px**: Full pill shape — badges, links
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow | Page canvas, basic text containers |
+| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed/recessed elements, input wells |
+| 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 |
+| 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 |
+| 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 |
+| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |
+
+### Shadow Philosophy
+Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:
+- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout
+- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth
+- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding
+- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel
+- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together
+
+### Decorative Depth
+- No gradients or glow effects
+- All depth comes from the sophisticated shadow compositing system
+- The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing
+- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it
+- Maintain the grayscale palette — boldness comes from contrast, not color
+- Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow
+- Keep backgrounds pure white — the monochrome philosophy requires a clean canvas
+- Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality
+- Let product screenshots be the visual content — no illustrations, no decorative graphics
+- Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel
+
+### Don't
+- Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading
+- Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only
+- Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach
+- Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px
+- Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges
+- Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only
+- Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character
+- Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |
+| Tablet Small | 640px–768px | 2-column begins for some elements |
+| Tablet | 768px–810px | Layout adjustments, fuller grid |
+| Tablet Large | 810px–1024px | Multi-column feature grids |
+| Desktop | 1024px–1199px | Full layout, expanded navigation |
+| Large Desktop | >1199px | Max-width container, centered content |
+
+### Touch Targets
+- Buttons: 8px radius with comfortable padding (10px+ vertical)
+- Nav links: Dark text with adequate spacing
+- Mobile CTAs: Full-width dark buttons for easy thumb access
+- Pill badges: 9999px radius creates large, tappable targets
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger on mobile
+- **Hero**: 64px Cal Sans display → ~36px on mobile
+- **Feature grids**: Multi-column → 2-column → single stacked column
+- **Product screenshots**: Scale within containers, maintaining aspect ratios
+- **Section spacing**: Reduces from 80px–96px to ~48px on mobile
+
+### Image Behavior
+- Product screenshots scale responsively
+- Trust logos reflow to multi-row grid on mobile
+- No art direction changes — same compositions at all sizes
+- Images use 7px–12px border-radius for consistent rounded corners
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Charcoal (`#242424`)
+- Deep Text: Midnight (`#111111`)
+- Secondary Text: Mid Gray (`#898989`)
+- Background: Pure White (`#ffffff`)
+- Link: Link Blue (`#0099ff`)
+- CTA Button: Charcoal (`#242424`) bg, white text
+- Shadow Border: `rgba(34, 42, 53, 0.08)` ring
+
+### Example Component Prompts
+- "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)"
+- "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"
+- "Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning"
+- "Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background"
+- "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"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them
+2. Check that the palette is purely grayscale — if you see brand colors, remove them
+3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders
+4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space
+5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes

design-md/cal/README.md

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

design-md/cal/preview-dark.html

@@ -0,0 +1,449 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Cal.com — Dark Mode</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --charcoal: #242424;
+    --midnight: #111111;
+    --mid-gray: #898989;
+    --white: #ffffff;
+    --link-blue: #0099ff;
+    --focus-blue: #3b82f6;
+    --font-display: 'Cal Sans', system-ui, sans-serif;
+    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
+    --font-mono: 'Roboto Mono', ui-monospace, monospace;
+
+    --dk-bg: #0a0a0a;
+    --dk-surface: #141414;
+    --dk-surface-elevated: #1c1c1c;
+    --dk-border: #2a2a2a;
+    --dk-border-light: #333333;
+    --dk-text: #e8e8e8;
+    --dk-text-secondary: #898989;
+    --dk-text-muted: #555555;
+    --dk-shadow-ring: rgba(255,255,255,0.06);
+    --dk-shadow-soft: rgba(0,0,0,0.3);
+    --dk-shadow-contact: rgba(0,0,0,0.8);
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-body);
+    background: var(--dk-bg);
+    color: var(--dk-text);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .dark-badge {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    z-index: 200;
+    background: var(--white);
+    color: var(--charcoal);
+    padding: 5px 12px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 40px;
+    background: rgba(10,10,10,0.92);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: var(--dk-shadow-contact) 0px 1px 5px -4px, var(--dk-shadow-ring) 0px 0px 0px 1px;
+  }
+  .nav-brand { font-size: 14px; font-weight: 600; color: var(--dk-text); text-decoration: none; }
+  .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
+  .nav-links a { font-size: 14px; font-weight: 500; color: var(--dk-text-secondary); text-decoration: none; transition: color 0.15s; }
+  .nav-links a:hover { color: var(--dk-text); }
+  .nav-cta {
+    background: var(--white);
+    color: var(--charcoal);
+    padding: 8px 18px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.85; }
+
+  .hero { padding: 96px 40px 80px; text-align: center; }
+  .hero h1 {
+    font-family: var(--font-display);
+    font-size: 64px;
+    font-weight: 600;
+    line-height: 1.10;
+    color: var(--dk-text);
+    max-width: 700px;
+    margin: 0 auto 20px;
+  }
+  .hero .subtitle {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.50;
+    color: var(--dk-text-secondary);
+    max-width: 480px;
+    margin: 0 auto 36px;
+    letter-spacing: -0.2px;
+  }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+  .btn-light {
+    background: var(--white);
+    color: var(--charcoal);
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .btn-light:hover { opacity: 0.85; }
+  .btn-outline {
+    background: transparent;
+    color: var(--dk-text);
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
+    transition: box-shadow 0.15s;
+  }
+  .btn-outline:hover { box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 1px; }
+
+  .section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
+  .section-title {
+    font-family: var(--font-display);
+    font-size: 48px;
+    font-weight: 600;
+    line-height: 1.10;
+    color: var(--dk-text);
+    margin-bottom: 8px;
+  }
+  .section-subtitle {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.50;
+    color: var(--dk-text-secondary);
+    margin-bottom: 48px;
+    letter-spacing: -0.2px;
+  }
+
+  .color-category { margin-bottom: 36px; }
+  .color-category h3 {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--dk-text);
+    margin-bottom: 16px;
+    letter-spacing: 0.2px;
+  }
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
+  .color-swatch { border-radius: 12px; overflow: hidden; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
+  .swatch-color { height: 80px; width: 100%; }
+  .swatch-info { padding: 10px 12px; background: var(--dk-surface); }
+  .swatch-name { font-size: 13px; font-weight: 600; color: var(--dk-text); margin-bottom: 2px; }
+  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }
+  .swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
+
+  .type-sample { padding: 20px 0; border-bottom: 1px solid var(--dk-border); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text { color: var(--dk-text); margin-bottom: 6px; }
+  .type-sample .type-label { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
+
+  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
+  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
+  .btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); }
+  .btn-dk-surface {
+    background: var(--dk-surface-elevated);
+    color: var(--dk-text);
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
+  }
+  .btn-pill-light {
+    background: var(--white);
+    color: var(--charcoal);
+    padding: 10px 24px;
+    border-radius: 9999px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+  }
+
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+  .card { border-radius: 12px; padding: 28px; }
+  .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; }
+  .card-dk-elevated { background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
+  .card-dk-inset { background: var(--dk-bg); box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
+  .card-hover { transition: transform 0.15s; }
+  .card-hover:hover { transform: translateY(-2px); }
+  .card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dk-text); margin-bottom: 8px; letter-spacing: 0.2px; }
+  .card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--dk-text-secondary); letter-spacing: -0.2px; }
+  .card .card-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--font-mono); margin-top: 14px; }
+
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text); }
+  .form-group input, .form-group textarea {
+    font-family: var(--font-body);
+    font-size: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: none;
+    background: var(--dk-surface);
+    color: var(--dk-text);
+    outline: none;
+    box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px;
+    transition: box-shadow 0.15s;
+  }
+  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
+  .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; }
+  .form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
+  .form-group textarea { resize: vertical; min-height: 80px; }
+  .form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--font-mono); }
+  .form-error-text { font-size: 11px; color: #ef4444; }
+
+  .spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
+  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+  .spacing-box { background: var(--dk-text); border-radius: 4px; height: 40px; opacity: 0.5; }
+  .spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--font-mono); }
+
+  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
+  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+  .radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
+  .radius-label { font-size: 12px; font-weight: 600; color: var(--dk-text); font-family: var(--font-mono); }
+  .radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; max-width: 80px; }
+
+  .elevation-section { background: var(--dk-surface); border-radius: 16px; padding: 48px; box-shadow: var(--dk-shadow-ring) 0px 0px 0px 1px; }
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
+  .elevation-card { background: var(--dk-surface-elevated); border-radius: 12px; padding: 24px; min-height: 120px; }
+  .elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--dk-text); margin-bottom: 6px; }
+  .elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
+  .elev-flat { box-shadow: none; }
+  .elev-inset { box-shadow: rgba(0,0,0,0.3) 0px 1px 1.9px 0px inset; }
+  .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; }
+  .elev-soft { box-shadow: var(--dk-shadow-soft) 0px 4px 8px 0px; }
+  .elev-highlight { box-shadow: rgba(255,255,255,0.08) 0px 2px 0px 0px inset; background: var(--white); color: var(--charcoal); }
+  .elev-highlight h4 { color: var(--charcoal); }
+  .elev-highlight p { color: var(--mid-gray); }
+
+  footer {
+    text-align: center;
+    padding: 48px 40px;
+    font-size: 13px;
+    color: var(--dk-text-muted);
+    border-top: 1px solid var(--dk-border);
+  }
+
+  @media (max-width: 768px) {
+    nav { padding: 12px 16px; }
+    .nav-links { display: none; }
+    .hero { padding: 64px 16px 48px; }
+    .hero h1 { font-size: 36px; }
+    .section { padding: 48px 16px; }
+    .section-title { font-size: 32px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 20px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+    .dark-badge { top: 10px; right: 10px; }
+  }
+</style>
+</head>
+<body>
+
+<div class="dark-badge">Dark Mode</div>
+
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get started</a>
+</nav>
+
+<section class="hero">
+  <h1>Design System Inspired by Cal.com</h1>
+  <p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
+  <div class="hero-buttons">
+    <button class="btn-light">Explore Tokens</button>
+    <button class="btn-outline">View DESIGN.md</button>
+  </div>
+</section>
+
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">A grayscale brand on dark surfaces.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#ffffff;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Neutrals</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:rgba(255,255,255,0.06);"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring (Dark)</div><div class="swatch-hex">rgba(255,255,255,0.06)</div><div class="swatch-role">Dark mode ring shadows</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Accent (Minimal)</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring</div></div></div>
+    </div>
+  </div>
+</section>
+
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">Cal Sans for display, Inter for body.</p>
+
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div><div class="type-label">Cal Sans 64px / 600 / 1.10</div></div>
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div><div class="type-label">Cal Sans 48px / 600 / 1.10</div></div>
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div><div class="type-label">Cal Sans 24px / 600 / 1.30</div></div>
+  <div class="type-sample"><div 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</div><div class="type-label">Cal Sans 20px / 600 / 1.20 / +0.2px</div></div>
+  <div class="type-sample"><div 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</div><div class="type-label">Inter 18px / 300 / 1.30 / -0.2px</div></div>
+  <div class="type-sample"><div 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.</div><div class="type-label">Inter 16px / 300 / 1.50 / -0.2px</div></div>
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div><div class="type-label">Inter 16px / 600 / 1.00</div></div>
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption</div><div class="type-label">Inter 14px / 500 / 1.14</div></div>
+  <div class="type-sample"><div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div><div class="type-label">Roboto Mono 14px / 600 / 1.00</div></div>
+</section>
+
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Inverted for dark surfaces.</p>
+
+  <div class="button-grid">
+    <div class="button-item"><button class="btn-light">Light Primary</button><span class="btn-label">#fff / #242424 / 8px</span></div>
+    <div class="button-item"><button class="btn-dk-surface">Surface</button><span class="btn-label">#1c1c1c / ring shadow / 8px</span></div>
+    <div class="button-item"><button class="btn-outline">Outline</button><span class="btn-label">transparent / ring / 8px</span></div>
+    <div class="button-item"><button class="btn-pill-light">Pill</button><span class="btn-label">#fff / 9999px</span></div>
+  </div>
+</section>
+
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Dark surface cards with shadow elevation.</p>
+
+  <div class="card-grid">
+    <div class="card card-dk card-hover"><h4>Shadow Card</h4><p class="card-desc">Dark surface with ring + contact + diffused shadow compositing. Hover to lift.</p><p class="card-label">ring + contact + soft shadows</p></div>
+    <div class="card card-dk-elevated"><h4>Elevated Card</h4><p class="card-desc">Lighter dark surface with ring shadow border for secondary content.</p><p class="card-label">ring shadow only</p></div>
+    <div class="card card-dk-inset"><h4>Inset Card</h4><p class="card-desc">Deepest background with inset shadow for recessed content wells.</p><p class="card-label">inset shadow</p></div>
+  </div>
+</section>
+
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Dark surface inputs with ring shadows and blue focus.</p>
+
+  <div class="form-grid">
+    <div class="form-group"><label>Default Input</label><input type="text" placeholder="Enter your name"><span class="form-hint">ring shadow border / 8px</span></div>
+    <div class="form-group"><label>Focus State</label><input 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;"><span class="form-hint">blue focus ring</span></div>
+    <div class="form-group"><label>Error State</label><input type="text" class="error" value="bad"><span class="form-error-text">Invalid input</span></div>
+    <div class="form-group"><label>Textarea</label><textarea placeholder="Message..."></textarea><span class="form-hint">Same styling</span></div>
+  </div>
+</section>
+
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base with section-level jump to 80px–96px.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
+  </div>
+</section>
+
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">2px to pill 9999px.</p>
+
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
+  </div>
+</section>
+
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Shadow compositing on dark surfaces.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Default canvas.</p></div>
+      <div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Recessed/pressed appearance.</p></div>
+      <div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring + contact + diffused. Workhorse.</p></div>
+      <div class="elevation-card elev-soft"><h4>Level 3 — Soft</h4><p>Ambient shadow only.</p></div>
+      <div class="elevation-card elev-highlight"><h4>Level 4 — Highlight</h4><p>White surface with inset bevel.</p></div>
+    </div>
+  </div>
+</section>
+
+<footer>Generated from DESIGN.md — Cal.com Design System Catalog (Dark Mode)</footer>
+
+</body>
+</html>

design-md/cal/preview.html

@@ -0,0 +1,575 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Cal.com</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --charcoal: #242424;
+    --midnight: #111111;
+    --mid-gray: #898989;
+    --white: #ffffff;
+    --link-blue: #0099ff;
+    --focus-blue: #3b82f6;
+    --shadow-ring: rgba(34, 42, 53, 0.08);
+    --shadow-soft: rgba(34, 42, 53, 0.05);
+    --shadow-contact: rgba(19, 19, 22, 0.7);
+    --font-display: 'Cal Sans', system-ui, sans-serif;
+    --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
+    --font-mono: 'Roboto Mono', ui-monospace, monospace;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-body);
+    background: var(--white);
+    color: var(--charcoal);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* NAV */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 40px;
+    background: rgba(255,255,255,0.95);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
+  }
+  .nav-brand {
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--midnight);
+    text-decoration: none;
+  }
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 28px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--charcoal);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .nav-links a:hover { color: var(--midnight); }
+  .nav-cta {
+    background: var(--charcoal);
+    color: var(--white);
+    padding: 8px 18px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.7; }
+
+  /* HERO */
+  .hero {
+    padding: 96px 40px 80px;
+    text-align: center;
+  }
+  .hero h1 {
+    font-family: var(--font-display);
+    font-size: 64px;
+    font-weight: 600;
+    line-height: 1.10;
+    letter-spacing: 0px;
+    color: var(--charcoal);
+    max-width: 700px;
+    margin: 0 auto 20px;
+  }
+  .hero .subtitle {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.50;
+    color: var(--mid-gray);
+    max-width: 480px;
+    margin: 0 auto 36px;
+    letter-spacing: -0.2px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .btn-dark {
+    background: var(--charcoal);
+    color: var(--white);
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset;
+  }
+  .btn-dark:hover { opacity: 0.7; }
+  .btn-white {
+    background: var(--white);
+    color: var(--charcoal);
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+    transition: box-shadow 0.15s;
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
+  }
+  .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; }
+
+  /* SECTIONS */
+  .section {
+    padding: 80px 40px;
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+  .section-title {
+    font-family: var(--font-display);
+    font-size: 48px;
+    font-weight: 600;
+    line-height: 1.10;
+    color: var(--charcoal);
+    margin-bottom: 8px;
+  }
+  .section-subtitle {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.50;
+    color: var(--mid-gray);
+    margin-bottom: 48px;
+    letter-spacing: -0.2px;
+  }
+
+  /* COLORS */
+  .color-category { margin-bottom: 36px; }
+  .color-category h3 {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--charcoal);
+    margin-bottom: 16px;
+    letter-spacing: 0.2px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 16px;
+  }
+  .color-swatch {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
+  }
+  .swatch-color { height: 80px; width: 100%; }
+  .swatch-info { padding: 10px 12px; background: var(--white); }
+  .swatch-name { font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
+  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-bottom: 4px; }
+  .swatch-role { font-size: 11px; color: var(--mid-gray); line-height: 1.4; }
+
+  /* TYPOGRAPHY */
+  .type-sample {
+    padding: 20px 0;
+    border-bottom: 1px solid rgba(34,42,53,0.08);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text { color: var(--charcoal); margin-bottom: 6px; }
+  .type-sample .type-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--mid-gray);
+    font-family: var(--font-mono);
+  }
+
+  /* BUTTONS */
+  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
+  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
+  .btn-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); }
+  .btn-pill {
+    background: var(--charcoal);
+    color: var(--white);
+    padding: 10px 24px;
+    border-radius: 9999px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body);
+    border: none;
+    cursor: pointer;
+  }
+
+  /* CARDS */
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+  .card { border-radius: 12px; padding: 28px; background: var(--white); }
+  .card-shadow {
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
+  }
+  .card-shadow-alt {
+    box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px;
+  }
+  .card-inset {
+    box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset;
+    background: #fafafa;
+  }
+  .card-hover { transition: transform 0.15s, box-shadow 0.15s; }
+  .card-hover:hover {
+    transform: translateY(-2px);
+    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;
+  }
+  .card h4 {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--charcoal);
+    margin-bottom: 8px;
+    letter-spacing: 0.2px;
+  }
+  .card .card-desc { font-size: 14px; font-weight: 300; line-height: 1.50; color: var(--mid-gray); letter-spacing: -0.2px; }
+  .card .card-label { font-size: 11px; font-weight: 500; color: var(--mid-gray); font-family: var(--font-mono); margin-top: 14px; }
+
+  /* FORMS */
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-group label { font-size: 14px; font-weight: 600; color: var(--charcoal); }
+  .form-group input, .form-group textarea {
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: 400;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: none;
+    background: var(--white);
+    color: var(--charcoal);
+    outline: none;
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px, var(--shadow-soft) 0px 4px 8px 0px;
+    transition: box-shadow 0.15s;
+  }
+  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--mid-gray); }
+  .form-group input:focus, .form-group textarea:focus {
+    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;
+  }
+  .form-group input.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
+  .form-group textarea { resize: vertical; min-height: 80px; }
+  .form-hint { font-size: 11px; color: var(--mid-gray); font-family: var(--font-mono); }
+  .form-error-text { font-size: 11px; color: #dc2626; }
+
+  /* SPACING */
+  .spacing-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
+  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+  .spacing-box { background: var(--charcoal); border-radius: 4px; height: 40px; }
+  .spacing-label { font-size: 10px; font-weight: 600; color: var(--mid-gray); font-family: var(--font-mono); }
+
+  /* RADIUS */
+  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
+  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+  .radius-box {
+    width: 80px;
+    height: 80px;
+    background: #f5f5f5;
+    box-shadow: var(--shadow-contact) 0px 1px 5px -4px, var(--shadow-ring) 0px 0px 0px 1px;
+  }
+  .radius-label { font-size: 12px; font-weight: 600; color: var(--charcoal); font-family: var(--font-mono); }
+  .radius-context { font-size: 10px; color: var(--mid-gray); text-align: center; max-width: 80px; }
+
+  /* ELEVATION */
+  .elevation-section { background: #f5f5f5; border-radius: 16px; padding: 48px; }
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
+  .elevation-card { background: var(--white); border-radius: 12px; padding: 24px; min-height: 120px; }
+  .elevation-card h4 { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
+  .elevation-card p { font-size: 12px; color: var(--mid-gray); line-height: 1.5; }
+  .elev-flat { box-shadow: none; }
+  .elev-inset { box-shadow: rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset; }
+  .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; }
+  .elev-soft { box-shadow: var(--shadow-soft) 0px 4px 8px 0px; }
+  .elev-highlight { box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset; background: var(--charcoal); color: var(--white); }
+  .elev-highlight h4 { color: var(--white); }
+  .elev-highlight p { color: rgba(255,255,255,0.6); }
+
+  footer {
+    text-align: center;
+    padding: 48px 40px;
+    font-size: 13px;
+    color: var(--mid-gray);
+    border-top: 1px solid rgba(34,42,53,0.08);
+  }
+
+  @media (max-width: 768px) {
+    nav { padding: 12px 16px; }
+    .nav-links { display: none; }
+    .hero { padding: 64px 16px 48px; }
+    .hero h1 { font-size: 36px; }
+    .section { padding: 48px 16px; }
+    .section-title { font-size: 32px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 20px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get started</a>
+</nav>
+
+<section class="hero">
+  <h1>Design System Inspired by Cal.com</h1>
+  <p class="subtitle">A visual catalog of design tokens extracted from Cal.com's monochromatic, grayscale design system.</p>
+  <div class="hero-buttons">
+    <button class="btn-dark">Explore Tokens</button>
+    <button class="btn-white">View DESIGN.md</button>
+  </div>
+</section>
+
+<!-- 1. COLORS -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">A grayscale brand — boldness through monochrome, not color.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#242424;"></div><div class="swatch-info"><div class="swatch-name">Charcoal</div><div class="swatch-hex">#242424</div><div class="swatch-role">Headings, buttons, primary text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#111111;"></div><div class="swatch-info"><div class="swatch-name">Midnight</div><div class="swatch-hex">#111111</div><div class="swatch-role">Deep text, overlays</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#ffffff; border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">White</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">Background, surfaces</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Neutrals</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#898989;"></div><div class="swatch-info"><div class="swatch-name">Mid Gray</div><div class="swatch-hex">#898989</div><div class="swatch-role">Secondary text, descriptions</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#000000;"></div><div class="swatch-info"><div class="swatch-name">Black</div><div class="swatch-hex">#000000</div><div class="swatch-role">High-contrast link text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:rgba(34,42,53,0.08);border-bottom:1px solid #eee;"></div><div class="swatch-info"><div class="swatch-name">Shadow Ring</div><div class="swatch-hex">rgba(34,42,53,0.08)</div><div class="swatch-role">Ring-shadow borders</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Accent (Minimal)</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#0099ff;"></div><div class="swatch-info"><div class="swatch-name">Link Blue</div><div class="swatch-hex">#0099ff</div><div class="swatch-role">In-text links only</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
+    </div>
+  </div>
+</section>
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">Cal Sans for display, Inter for body — a clean typographic division.</p>
+
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-display); font-size:64px; font-weight:600; line-height:1.10;">Display Hero</div>
+    <div class="type-label">Display Hero — Cal Sans 64px / 600 / 1.10</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1.10;">Section Heading</div>
+    <div class="type-label">Section Heading — Cal Sans 48px / 600 / 1.10</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.30;">Feature Heading</div>
+    <div class="type-label">Feature Heading — Cal Sans 24px / 600 / 1.30</div>
+  </div>
+  <div class="type-sample">
+    <div 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</div>
+    <div class="type-label">Sub-heading — Cal Sans 20px / 600 / 1.20 / +0.2px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.10;">Card Title</div>
+    <div class="type-label">Card Title — Cal Sans 16px / 600 / 1.10</div>
+  </div>
+  <div class="type-sample">
+    <div 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</div>
+    <div class="type-label">Body Light — Inter 18px / 300 / 1.30 / -0.2px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body Standard — Inter 16px / 300 / 1.50 / -0.2px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-body); font-size:16px; font-weight:600; line-height:1.00;">UI Label</div>
+    <div class="type-label">UI Label — Inter 16px / 600 / 1.00</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1.14;">Caption Inter</div>
+    <div class="type-label">Caption — Inter 14px / 500 / 1.14</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1.00;">Micro text</div>
+    <div class="type-label">Micro — Inter 12px / 500 / 1.00</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-family:var(--font-mono); font-size:14px; font-weight:600; line-height:1.00;">Code — Roboto Mono</div>
+    <div class="type-label">Code — Roboto Mono 14px / 600 / 1.00</div>
+  </div>
+</section>
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Dark CTAs with inset highlights, shadow-bordered white buttons, and pill shapes.</p>
+
+  <div class="button-grid">
+    <div class="button-item">
+      <button class="btn-dark">Dark Primary</button>
+      <span class="btn-label">#242424 / white / 8px / inset highlight</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-white">White Shadow</button>
+      <span class="btn-label">#fff / ring shadow / 8px</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-pill">Pill Button</button>
+      <span class="btn-label">#242424 / 9999px radius</span>
+    </div>
+  </div>
+</section>
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Multi-layered shadow elevation with ring borders instead of CSS borders.</p>
+
+  <div class="card-grid">
+    <div class="card card-shadow card-hover">
+      <h4>Shadow Card</h4>
+      <p class="card-desc">Ring shadow + contact shadow + diffused shadow. The workhorse card pattern. Hover to see lift.</p>
+      <p class="card-label">ring + contact + soft / 12px radius</p>
+    </div>
+    <div class="card card-shadow-alt">
+      <h4>Alt Shadow Card</h4>
+      <p class="card-desc">Contact shadow + soft shadow without the ring border. Lighter elevation.</p>
+      <p class="card-label">contact + soft only / 12px radius</p>
+    </div>
+    <div class="card card-inset">
+      <h4>Inset Card</h4>
+      <p class="card-desc">Inset shadow creates a recessed, pressed-in appearance for input wells and secondary containers.</p>
+      <p class="card-label">inset 0px 1px 1.9px rgba(0,0,0,0.16)</p>
+    </div>
+  </div>
+</section>
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Shadow-bordered inputs with blue focus rings.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label>Default Input</label>
+      <input type="text" placeholder="Enter your name">
+      <span class="form-hint">shadow-ring border / 8px radius</span>
+    </div>
+    <div class="form-group">
+      <label>Focus State</label>
+      <input 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;">
+      <span class="form-hint">focus: blue ring + shadows</span>
+    </div>
+    <div class="form-group">
+      <label>Error State</label>
+      <input type="text" class="error" value="bad input">
+      <span class="form-error-text">Invalid input</span>
+    </div>
+    <div class="form-group">
+      <label>Textarea</label>
+      <textarea placeholder="Type a message..."></textarea>
+      <span class="form-hint">Same shadow styling</span>
+    </div>
+  </div>
+</section>
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base with a jump from 28px to 80px for section-level tiers.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-box" style="width:1px;"></div><span class="spacing-label">1</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:3px;"></div><span class="spacing-label">3</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:20px;"></div><span class="spacing-label">20</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:28px;"></div><span class="spacing-label">28</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:80px;"></div><span class="spacing-label">80</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:96px;"></div><span class="spacing-label">96</span></div>
+  </div>
+</section>
+
+<!-- 7. RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Wide scale from sharp 2px to full pill 9999px.</p>
+
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius:2px;"></div><span class="radius-label">2px</span><span class="radius-context">Inline</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:4px;"></div><span class="radius-label">4px</span><span class="radius-context">Small UI</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:8px;"></div><span class="radius-label">8px</span><span class="radius-context">Buttons, inputs</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:12px;"></div><span class="radius-label">12px</span><span class="radius-context">Cards, links</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:16px;"></div><span class="radius-label">16px</span><span class="radius-context">Sections</span></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div><span class="radius-label">9999px</span><span class="radius-context">Pill</span></div>
+  </div>
+</section>
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Multi-layered shadow compositing: ring borders + diffused shadows + inset highlights.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat"><h4>Level 0 — Flat</h4><p>No shadow. Page canvas and basic containers.</p></div>
+      <div class="elevation-card elev-inset"><h4>Level 1 — Inset</h4><p>Inset shadow. Pressed/recessed elements, input wells.</p></div>
+      <div class="elevation-card elev-ring-soft"><h4>Level 2 — Ring + Soft</h4><p>Ring border + contact shadow + diffused shadow. The workhorse elevation.</p></div>
+      <div class="elevation-card elev-soft"><h4>Level 3 — Soft Only</h4><p>Subtle ambient shadow without ring border. Gentle floating.</p></div>
+      <div class="elevation-card elev-highlight"><h4>Level 4 — Inset Highlight</h4><p>White inset on dark bg. Button 3D bevel effect.</p></div>
+    </div>
+  </div>
+</section>
+
+<footer>Generated from DESIGN.md — Cal.com Design System Catalog</footer>
+
+</body>
+</html>

design-md/elevenlabs/README.md

@@ -1,6 +1,6 @@
 # Elevenlabs Inspired Design System
 
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) extracted from the public [elevenlabs](https://elevenlabs.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
+[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/elevenlabs/DESIGN.md) extracted from the public [elevenlabs](https://elevenlabs.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
 
 ## Files
 

design-md/framer/DESIGN.md

@@ -0,0 +1,246 @@
+# Design System: Framer
+
+## 1. Visual Theme & Atmosphere
+
+Framer'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.
+
+The 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.
+
+The 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.
+
+**Key Characteristics:**
+- Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted
+- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
+- Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise
+- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements
+- Product screenshots as hero art — the tool IS the marketing
+- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces
+- Extensive OpenType feature usage across Inter for refined micro-typography
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity
+- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds
+- **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights
+
+### Secondary & Accent
+- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
+- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation
+
+### Surface & Background
+- **Void Black** (`#000000`): Page background, primary canvas
+- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark
+- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`): Heading text, high-emphasis body text
+- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information
+- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces
+
+### Semantic & Accent
+- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings
+- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements
+- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)
+
+### Gradient System
+- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
+- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
+- **Body/UI**: `Inter Variable` / `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
+- **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)
+- **Monospace**: `Azeret Mono` — companion mono for code and technical labels
+- **Rounded**: `Open Runde` — small rounded companion font for micro-labels
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
+| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
+| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
+| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
+| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
+| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
+| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
+| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
+| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
+| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
+| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
+| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
+
+### Principles
+- **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
+- **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
+- **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
+- **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
+
+## 4. Component Stylings
+
+### Buttons
+- **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
+- **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
+- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
+- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
+
+### Cards & Containers
+- **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)
+- **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)
+- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews
+- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Input fields follow dark theme: dark background, subtle border, white text
+- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`
+- Placeholder text in `rgba(255, 255, 255, 0.4)`
+
+### Navigation
+- **Dark floating nav bar**: Black background with frosted glass effect, white text links
+- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
+- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
+- **Mobile**: Collapses to hamburger menu, maintains dark theme
+- **Sticky behavior**: Nav remains fixed at top on scroll
+
+### Image Treatment
+- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)
+- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
+- **16:9 and custom aspect ratios**: Product demos fill their containers
+- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow
+
+### Trust & Social Proof
+- Customer logos and testimonials in muted gray on dark surfaces
+- Minimal ornamentation — the product screenshots serve as the trust signal
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
+- **Section padding**: Large vertical spacing (80px–120px between sections)
+- **Card padding**: 15px–30px internal padding
+- **Component gaps**: 8px–20px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container, centered
+- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
+- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
+
+### Whitespace Philosophy
+- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks
+- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
+- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
+
+### Border Radius Scale
+- **1px**: Micro-elements, nearly squared precision edges
+- **5px–7px**: Small UI elements, image thumbnails — subtly softened
+- **8px**: Standard component radius — code blocks, buttons, interactive elements
+- **10px–12px**: Cards, product screenshots — comfortably rounded
+- **15px–20px**: Large containers, feature cards — generously rounded
+- **30px–40px**: Navigation pills, pagination — noticeably rounded
+- **100px**: Full pill shape — primary CTAs, tag elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
+| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |
+| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |
+| 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 |
+
+### Shadow Philosophy
+Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
+- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element
+- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface
+- **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)
+
+### Decorative Depth
+- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas
+- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (`#000000`) as the primary background — not dark gray, not charcoal
+- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
+- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons
+- Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states
+- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds
+- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand
+- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
+- Let product screenshots be the visual centerpiece — the tool markets itself
+- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment
+
+### Don't
+- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)
+- Apply bold (700+) weight to GT Walsheim display text — medium 500 only
+- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system
+- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)
+- Add decorative imagery, illustrations, or icons — the product IS the illustration
+- Use positive letter-spacing on headlines — everything is compressed, negative tracking
+- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients
+- Place light/white backgrounds behind content sections — the void is sacred
+- Use serif or display-weight fonts — the system is geometric sans-serif only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |
+| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |
+| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
+
+### Touch Targets
+- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum
+- Nav links: 15px text with generous padding for touch accessibility
+- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint
+- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally
+- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile
+- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
+- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile
+
+### Image Behavior
+- Product screenshots are responsive, scaling within their container boundaries
+- No art direction changes — same crops across breakpoints
+- Dark background ensures screenshots maintain visual impact at any size
+- Screenshots lazy-load as user scrolls into view
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Void Black (`#000000`)
+- Primary Text: Pure White (`#ffffff`)
+- Accent/CTA: Framer Blue (`#0099ff`)
+- Secondary Text: Muted Silver (`#a6a6a6`)
+- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
+- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
+
+### Example Component Prompts
+- "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"
+- "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"
+- "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"
+- "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)"
+- "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"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time — the dark canvas makes each element precious
+2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable
+3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links
+4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic
+5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears

design-md/framer/README.md

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

design-md/framer/preview-dark.html

@@ -0,0 +1,904 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Framer — Dark Mode</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --color-black: #000000;
+    --color-white: #ffffff;
+    --color-blue: #0099ff;
+    --color-silver: #a6a6a6;
+    --color-near-black: #090909;
+    --color-frosted: rgba(255, 255, 255, 0.1);
+    --color-frosted-hover: rgba(255, 255, 255, 0.15);
+    --color-blue-glow: rgba(0, 153, 255, 0.15);
+    --color-ghost: rgba(255, 255, 255, 0.6);
+    --color-placeholder: rgba(255, 255, 255, 0.4);
+    --shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;
+    --shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;
+    --shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
+    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Azeret Mono', monospace;
+    --radius-xs: 1px;
+    --radius-sm: 5px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 15px;
+    --radius-2xl: 20px;
+    --radius-pill: 100px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-body);
+    background: #050508;
+    color: var(--color-white);
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* DARK MODE BADGE */
+  .dark-badge {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    z-index: 200;
+    background: var(--color-white);
+    color: var(--color-black);
+    padding: 5px 12px;
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: -0.11px;
+  }
+
+  /* NAV */
+  .nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 32px;
+    background: rgba(5, 5, 8, 0.9);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  }
+  .nav-brand {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-white);
+    letter-spacing: -0.3px;
+  }
+  .nav-links {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    list-style: none;
+  }
+  .nav-links a {
+    color: var(--color-silver);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: -0.14px;
+    transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--color-white); }
+  .nav-cta {
+    background: var(--color-white);
+    color: var(--color-black) !important;
+    padding: 8px 18px;
+    border-radius: var(--radius-pill);
+    font-weight: 600;
+    font-size: 13px;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.9; }
+
+  /* HERO */
+  .hero {
+    padding: 120px 32px 100px;
+    text-align: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: radial-gradient(ellipse at 50% 80%, rgba(0, 153, 255, 0.06) 0%, transparent 60%);
+  }
+  .hero h1 {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+    line-height: 0.88;
+    color: var(--color-white);
+    margin-bottom: 24px;
+  }
+  .hero .subtitle {
+    font-size: 18px;
+    color: var(--color-silver);
+    letter-spacing: -0.01px;
+    line-height: 1.5;
+    max-width: 560px;
+    margin: 0 auto 40px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-white);
+    color: var(--color-black);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    letter-spacing: -0.15px;
+  }
+  .btn-primary:hover { opacity: 0.9; }
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-frosted);
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 500;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: background 0.2s;
+    letter-spacing: -0.15px;
+  }
+  .btn-secondary:hover { background: var(--color-frosted-hover); }
+
+  /* SECTIONS */
+  .section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 80px 32px;
+  }
+  .section-title {
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: -2.5px;
+    line-height: 1.0;
+    margin-bottom: 12px;
+  }
+  .section-desc {
+    font-size: 16px;
+    color: var(--color-silver);
+    margin-bottom: 48px;
+    letter-spacing: -0.01px;
+  }
+  .section-divider {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    margin: 0 32px;
+    max-width: 1136px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* COLOR PALETTE */
+  .color-group { margin-bottom: 40px; }
+  .color-group-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-silver);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 16px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 16px;
+  }
+  .color-swatch {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    background: #0a0a0d;
+    box-shadow: var(--shadow-ring);
+  }
+  .color-swatch-preview {
+    height: 80px;
+    width: 100%;
+  }
+  .color-swatch-info {
+    padding: 12px;
+  }
+  .color-swatch-name {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 2px;
+    letter-spacing: -0.13px;
+  }
+  .color-swatch-hex {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-silver);
+  }
+  .color-swatch-role {
+    font-size: 11px;
+    color: var(--color-ghost);
+    margin-top: 4px;
+    line-height: 1.4;
+  }
+
+  /* TYPOGRAPHY */
+  .type-sample {
+    padding: 24px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--color-blue);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .type-spec {
+    font-size: 12px;
+    color: var(--color-silver);
+    margin-top: 8px;
+    letter-spacing: -0.12px;
+  }
+
+  /* BUTTONS */
+  .button-showcase {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .btn-ghost {
+    background: transparent;
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 500;
+    text-decoration: none;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s;
+    letter-spacing: -0.15px;
+    font-family: var(--font-body);
+  }
+  .btn-ghost:hover {
+    background: var(--color-frosted);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  .btn-blue {
+    background: var(--color-blue);
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    letter-spacing: -0.15px;
+    font-family: var(--font-body);
+  }
+  .btn-blue:hover { opacity: 0.85; }
+  .btn-label {
+    display: block;
+    font-size: 11px;
+    color: var(--color-silver);
+    margin-top: 8px;
+    text-align: center;
+    font-family: var(--font-mono);
+  }
+  .btn-item { text-align: center; }
+
+  /* CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+  }
+  .card {
+    background: #0a0a0d;
+    border-radius: var(--radius-lg);
+    padding: 28px;
+    box-shadow: var(--shadow-ring);
+    transition: box-shadow 0.3s, transform 0.3s;
+  }
+  .card:hover {
+    box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.4) 0px 12px 40px;
+    transform: translateY(-2px);
+  }
+  .card-elevated {
+    box-shadow: var(--shadow-floating);
+  }
+  .card-elevated:hover {
+    box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.45) 0px 14px 44px;
+    transform: translateY(-2px);
+  }
+  .card-title {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.8px;
+    margin-bottom: 8px;
+  }
+  .card-text {
+    font-size: 14px;
+    color: var(--color-silver);
+    line-height: 1.5;
+  }
+  .card-tag {
+    display: inline-block;
+    padding: 4px 10px;
+    background: rgba(0, 153, 255, 0.1);
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-blue);
+    margin-bottom: 12px;
+    letter-spacing: -0.11px;
+  }
+
+  /* FORMS */
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+  }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-silver);
+    letter-spacing: -0.13px;
+  }
+  .form-input {
+    background: #0a0a0d;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius-md);
+    padding: 12px 14px;
+    color: var(--color-white);
+    font-size: 14px;
+    font-family: var(--font-body);
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .form-input::placeholder { color: var(--color-placeholder); }
+  .form-input:focus {
+    border-color: var(--color-blue);
+    box-shadow: var(--shadow-ring);
+  }
+  .form-input-error {
+    border-color: #ff4444;
+    box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;
+  }
+  .form-error-text {
+    font-size: 12px;
+    color: #ff4444;
+  }
+  textarea.form-input {
+    min-height: 100px;
+    resize: vertical;
+  }
+
+  /* SPACING */
+  .spacing-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 10px;
+  }
+  .spacing-box {
+    height: 32px;
+    background: var(--color-blue);
+    border-radius: 4px;
+    opacity: 0.6;
+  }
+  .spacing-label {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--color-silver);
+    min-width: 60px;
+    text-align: right;
+  }
+
+  /* RADIUS */
+  .radius-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: flex-end;
+  }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 72px;
+    height: 72px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    margin-bottom: 8px;
+  }
+  .radius-value {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-silver);
+  }
+  .radius-context {
+    font-size: 10px;
+    color: var(--color-ghost);
+    margin-top: 2px;
+  }
+
+  /* ELEVATION */
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+  }
+  .elevation-card {
+    padding: 28px;
+    border-radius: var(--radius-lg);
+    background: #0a0a0d;
+    min-height: 120px;
+  }
+  .elevation-label {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 6px;
+    letter-spacing: -0.14px;
+  }
+  .elevation-desc {
+    font-size: 12px;
+    color: var(--color-silver);
+    line-height: 1.5;
+  }
+
+  /* FOOTER */
+  .footer {
+    text-align: center;
+    padding: 48px 32px;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    margin-top: 40px;
+  }
+  .footer p {
+    font-size: 13px;
+    color: var(--color-silver);
+  }
+  .footer a {
+    color: var(--color-blue);
+    text-decoration: none;
+  }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 52px; letter-spacing: -2.5px; }
+    .hero .subtitle { font-size: 16px; }
+    .section-title { font-size: 36px; letter-spacing: -1.5px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- DARK MODE BADGE -->
+<div class="dark-badge">Dark Mode</div>
+
+<!-- NAV -->
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Get Started</a></li>
+  </ul>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <h1>Design System<br>Inspired by Framer</h1>
+  <p class="subtitle">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 1. COLOR PALETTE -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #000000; border-bottom: 1px solid rgba(255,255,255,0.04);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Void Black</div>
+          <div class="color-swatch-hex">#000000</div>
+          <div class="color-swatch-role">Primary background, void canvas</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ffffff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Pure White</div>
+          <div class="color-swatch-hex">#ffffff</div>
+          <div class="color-swatch-role">Primary text, button fill</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0099ff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Framer Blue</div>
+          <div class="color-swatch-hex">#0099ff</div>
+          <div class="color-swatch-role">Accent — links, borders, focus rings</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #a6a6a6;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Muted Silver</div>
+          <div class="color-swatch-hex">#a6a6a6</div>
+          <div class="color-swatch-role">Secondary text, descriptions</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #090909; border: 1px solid rgba(255,255,255,0.04);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near Black</div>
+          <div class="color-swatch-hex">#090909</div>
+          <div class="color-swatch-role">Elevated dark surface, card background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.04);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted White</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.1)</div>
+          <div class="color-swatch-role">Glass-effect buttons, translucent surfaces</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.6);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Ghost White</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
+          <div class="color-swatch-role">Tertiary text, placeholders</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Semantic</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.15);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Blue Glow</div>
+          <div class="color-swatch-hex">rgba(0,153,255,0.15)</div>
+          <div class="color-swatch-role">Focus ring shadow, blue halo</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0000ee;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Default Link Blue</div>
+          <div class="color-swatch-hex">#0000ee</div>
+          <div class="color-swatch-role">Browser default links (rare)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 110px / 500 / 0.85 / -5.5px</div>
+    <div style="font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;">Build better sites</div>
+    <div class="type-spec">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 85px / 500 / 0.95 / -4.25px</div>
+    <div style="font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;">Scale without limits</div>
+    <div class="type-spec">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Heading — 62px / 500 / 1.00 / -3.1px</div>
+    <div style="font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;">Create, collaborate</div>
+    <div class="type-spec">GT Walsheim Medium — OpenType: ss02</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Feature Heading — 32px / 500 / 1.13 / -1px</div>
+    <div style="font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;">Powering ambitious sites</div>
+    <div class="type-spec">GT Walsheim Medium — tightest of the smaller headings</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Card Title — 24px / 400 / 1.30 / -0.01px</div>
+    <div style="font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;">Interactive components that respond</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Feature Title — 22px / 700 / 1.20 / -0.8px</div>
+    <div style="font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;">Visual canvas meets code precision</div>
+    <div class="type-spec">Inter — OpenType: cv05</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body Large — 18px / 400 / 1.30 / -0.01px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 15px / 400 / 1.30 / -0.01px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv11</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Caption — 14px / 400 / 1.40</div>
+    <div style="font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);">Responsive breakpoints with automatic layout adjustments across all devices.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Label — 13px / 500 / 1.60</div>
+    <div style="font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);">Component interaction settings</div>
+    <div class="type-spec">Inter — OpenType: cv06, cv11, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Micro Code — 10.4px / 400 / 1.60</div>
+    <div 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</div>
+    <div class="type-spec">Azeret Mono — OpenType: cv06, cv11, ss03</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Start for Free</a>
+      <span class="btn-label">Primary / White Pill</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Frosted / Glass</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">View Docs</button>
+      <span class="btn-label">Ghost / Outline</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-blue">Upgrade Plan</button>
+      <span class="btn-label">Blue / Accent</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-primary" style="padding: 8px 18px; font-size: 13px;">Sign Up</a>
+      <span class="btn-label">Small / Nav CTA</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Visual Canvas</div>
+      <h3 class="card-title">Design Freedom</h3>
+      <p class="card-text">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.</p>
+    </div>
+    <div class="card card-elevated">
+      <div class="card-tag">Interactive</div>
+      <h3 class="card-title">Smart Components</h3>
+      <p class="card-text">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Performance</div>
+      <h3 class="card-title">Lightning Fast</h3>
+      <p class="card-text">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Dark inputs with Framer Blue focus rings and minimal chrome.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email Address (Focus State)</label>
+      <input type="email" class="form-input" placeholder="you@example.com" style="border-color: var(--color-blue); box-shadow: var(--shadow-ring);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Project URL (Error State)</label>
+      <input type="url" class="form-input form-input-error" placeholder="https://yoursite.framer.app" value="invalid-url">
+      <span class="form-error-text">Please enter a valid URL</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your project..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit system with fine-grained sub-8px values for micro-adjustments.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">6px</span><div class="spacing-box" style="width: 24px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">10px</span><div class="spacing-box" style="width: 56px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 72px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">15px</span><div class="spacing-box" style="width: 96px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 140px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">30px</span><div class="spacing-box" style="width: 220px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">35px</span><div class="spacing-box" style="width: 260px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From nearly-squared micro edges to full pill shapes — radius grows with element importance.</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 1px;"></div>
+      <div class="radius-value">1px</div>
+      <div class="radius-context">Micro</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 5px;"></div>
+      <div class="radius-value">5px</div>
+      <div class="radius-context">Thumbnails</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 8px;"></div>
+      <div class="radius-value">8px</div>
+      <div class="radius-context">Components</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 12px;"></div>
+      <div class="radius-value">12px</div>
+      <div class="radius-context">Cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 15px;"></div>
+      <div class="radius-value">15px</div>
+      <div class="radius-context">Large cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 20px;"></div>
+      <div class="radius-value">20px</div>
+      <div class="radius-context">Containers</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 40px;"></div>
+      <div class="radius-value">40px</div>
+      <div class="radius-context">Nav pills</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 100px; width: 72px; height: 44px;"></div>
+      <div class="radius-value">100px</div>
+      <div class="radius-context">Full pill</div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid rgba(255,255,255,0.03);">
+      <div class="elevation-label">Level 0 — Flat</div>
+      <div class="elevation-desc">No shadow. Pure black surface. The void baseline that everything else rises from.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-ring);">
+      <div class="elevation-label">Level 1 — Ring</div>
+      <div class="elevation-desc">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-contained);">
+      <div class="elevation-label">Level 2 — Contained</div>
+      <div class="elevation-desc">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-floating);">
+      <div class="elevation-label">Level 3 — Floating</div>
+      <div class="elevation-desc">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.</div>
+    </div>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer class="footer">
+  <p>Design system extracted from <a href="https://framer.com">framer.com</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/framer/preview.html

@@ -0,0 +1,885 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Framer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --color-black: #000000;
+    --color-white: #ffffff;
+    --color-blue: #0099ff;
+    --color-silver: #a6a6a6;
+    --color-near-black: #090909;
+    --color-frosted: rgba(255, 255, 255, 0.1);
+    --color-frosted-hover: rgba(255, 255, 255, 0.15);
+    --color-blue-glow: rgba(0, 153, 255, 0.15);
+    --color-ghost: rgba(255, 255, 255, 0.6);
+    --color-placeholder: rgba(255, 255, 255, 0.4);
+    --shadow-ring: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px;
+    --shadow-contained: rgb(9, 9, 9) 0px 0px 0px 2px;
+    --shadow-floating: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px 0px;
+    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Azeret Mono', monospace;
+    --radius-xs: 1px;
+    --radius-sm: 5px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 15px;
+    --radius-2xl: 20px;
+    --radius-pill: 100px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-body);
+    background: var(--color-black);
+    color: var(--color-white);
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* NAV */
+  .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.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .nav-brand {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-white);
+    letter-spacing: -0.3px;
+  }
+  .nav-links {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    list-style: none;
+  }
+  .nav-links a {
+    color: var(--color-silver);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: -0.14px;
+    transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--color-white); }
+  .nav-cta {
+    background: var(--color-white);
+    color: var(--color-black) !important;
+    padding: 8px 18px;
+    border-radius: var(--radius-pill);
+    font-weight: 600;
+    font-size: 13px;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.9; }
+
+  /* HERO */
+  .hero {
+    padding: 120px 32px 100px;
+    text-align: center;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .hero h1 {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+    line-height: 0.88;
+    color: var(--color-white);
+    margin-bottom: 24px;
+  }
+  .hero .subtitle {
+    font-size: 18px;
+    color: var(--color-silver);
+    letter-spacing: -0.01px;
+    line-height: 1.5;
+    max-width: 560px;
+    margin: 0 auto 40px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-white);
+    color: var(--color-black);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    letter-spacing: -0.15px;
+  }
+  .btn-primary:hover { opacity: 0.9; }
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-frosted);
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 500;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: background 0.2s;
+    letter-spacing: -0.15px;
+  }
+  .btn-secondary:hover { background: var(--color-frosted-hover); }
+
+  /* SECTIONS */
+  .section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 80px 32px;
+  }
+  .section-title {
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: -2.5px;
+    line-height: 1.0;
+    margin-bottom: 12px;
+  }
+  .section-desc {
+    font-size: 16px;
+    color: var(--color-silver);
+    margin-bottom: 48px;
+    letter-spacing: -0.01px;
+  }
+  .section-divider {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    margin: 0 32px;
+    max-width: 1136px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* COLOR PALETTE */
+  .color-group { margin-bottom: 40px; }
+  .color-group-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-silver);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 16px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 16px;
+  }
+  .color-swatch {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    background: var(--color-near-black);
+    box-shadow: var(--shadow-ring);
+  }
+  .color-swatch-preview {
+    height: 80px;
+    width: 100%;
+  }
+  .color-swatch-info {
+    padding: 12px;
+  }
+  .color-swatch-name {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 2px;
+    letter-spacing: -0.13px;
+  }
+  .color-swatch-hex {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-silver);
+  }
+  .color-swatch-role {
+    font-size: 11px;
+    color: var(--color-ghost);
+    margin-top: 4px;
+    line-height: 1.4;
+  }
+
+  /* TYPOGRAPHY */
+  .type-sample {
+    padding: 24px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--color-blue);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .type-spec {
+    font-size: 12px;
+    color: var(--color-silver);
+    margin-top: 8px;
+    letter-spacing: -0.12px;
+  }
+
+  /* BUTTONS */
+  .button-showcase {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .btn-ghost {
+    background: transparent;
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 500;
+    text-decoration: none;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s;
+    letter-spacing: -0.15px;
+    font-family: var(--font-body);
+  }
+  .btn-ghost:hover {
+    background: var(--color-frosted);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+  .btn-blue {
+    background: var(--color-blue);
+    color: var(--color-white);
+    padding: 12px 28px;
+    border-radius: var(--radius-pill);
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    letter-spacing: -0.15px;
+    font-family: var(--font-body);
+  }
+  .btn-blue:hover { opacity: 0.85; }
+  .btn-label {
+    display: block;
+    font-size: 11px;
+    color: var(--color-silver);
+    margin-top: 8px;
+    text-align: center;
+    font-family: var(--font-mono);
+  }
+  .btn-item { text-align: center; }
+
+  /* CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+  }
+  .card {
+    background: var(--color-near-black);
+    border-radius: var(--radius-lg);
+    padding: 28px;
+    box-shadow: var(--shadow-ring);
+    transition: box-shadow 0.3s, transform 0.3s;
+  }
+  .card:hover {
+    box-shadow: rgba(0, 153, 255, 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 12px 40px;
+    transform: translateY(-2px);
+  }
+  .card-elevated {
+    box-shadow: var(--shadow-floating);
+  }
+  .card-elevated:hover {
+    box-shadow: rgba(255, 255, 255, 0.15) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.35) 0px 14px 44px;
+    transform: translateY(-2px);
+  }
+  .card-title {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.8px;
+    margin-bottom: 8px;
+  }
+  .card-text {
+    font-size: 14px;
+    color: var(--color-silver);
+    line-height: 1.5;
+  }
+  .card-tag {
+    display: inline-block;
+    padding: 4px 10px;
+    background: var(--color-frosted);
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-blue);
+    margin-bottom: 12px;
+    letter-spacing: -0.11px;
+  }
+
+  /* FORMS */
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+  }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-silver);
+    letter-spacing: -0.13px;
+  }
+  .form-input {
+    background: var(--color-near-black);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    padding: 12px 14px;
+    color: var(--color-white);
+    font-size: 14px;
+    font-family: var(--font-body);
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .form-input::placeholder { color: var(--color-placeholder); }
+  .form-input:focus {
+    border-color: var(--color-blue);
+    box-shadow: var(--shadow-ring);
+  }
+  .form-input-error {
+    border-color: #ff4444;
+    box-shadow: rgba(255, 68, 68, 0.15) 0px 0px 0px 1px;
+  }
+  .form-error-text {
+    font-size: 12px;
+    color: #ff4444;
+  }
+  textarea.form-input {
+    min-height: 100px;
+    resize: vertical;
+  }
+
+  /* SPACING */
+  .spacing-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 10px;
+  }
+  .spacing-box {
+    height: 32px;
+    background: var(--color-blue);
+    border-radius: 4px;
+    opacity: 0.7;
+  }
+  .spacing-label {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--color-silver);
+    min-width: 60px;
+    text-align: right;
+  }
+
+  /* RADIUS */
+  .radius-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: flex-end;
+  }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 72px;
+    height: 72px;
+    background: var(--color-frosted);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 8px;
+  }
+  .radius-value {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--color-silver);
+  }
+  .radius-context {
+    font-size: 10px;
+    color: var(--color-ghost);
+    margin-top: 2px;
+  }
+
+  /* ELEVATION */
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+  }
+  .elevation-card {
+    padding: 28px;
+    border-radius: var(--radius-lg);
+    background: var(--color-near-black);
+    min-height: 120px;
+  }
+  .elevation-label {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 6px;
+    letter-spacing: -0.14px;
+  }
+  .elevation-desc {
+    font-size: 12px;
+    color: var(--color-silver);
+    line-height: 1.5;
+  }
+
+  /* FOOTER */
+  .footer {
+    text-align: center;
+    padding: 48px 32px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    margin-top: 40px;
+  }
+  .footer p {
+    font-size: 13px;
+    color: var(--color-silver);
+  }
+  .footer a {
+    color: var(--color-blue);
+    text-decoration: none;
+  }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 52px; letter-spacing: -2.5px; }
+    .hero .subtitle { font-size: 16px; }
+    .section-title { font-size: 36px; letter-spacing: -1.5px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Get Started</a></li>
+  </ul>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <h1>Design System<br>Inspired by Framer</h1>
+  <p class="subtitle">A complete visual catalog of design tokens, components, and patterns extracted from Framer's marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 1. COLOR PALETTE -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Every color from Framer's dark-first identity — pure black void, electric blue accent, and frosted white surfaces.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #000000; border-bottom: 1px solid rgba(255,255,255,0.06);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Void Black</div>
+          <div class="color-swatch-hex">#000000</div>
+          <div class="color-swatch-role">Primary background, void canvas</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ffffff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Pure White</div>
+          <div class="color-swatch-hex">#ffffff</div>
+          <div class="color-swatch-role">Primary text, button fill</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0099ff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Framer Blue</div>
+          <div class="color-swatch-hex">#0099ff</div>
+          <div class="color-swatch-role">Accent — links, borders, focus rings</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #a6a6a6;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Muted Silver</div>
+          <div class="color-swatch-hex">#a6a6a6</div>
+          <div class="color-swatch-role">Secondary text, descriptions</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #090909; border: 1px solid rgba(255,255,255,0.06);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near Black</div>
+          <div class="color-swatch-hex">#090909</div>
+          <div class="color-swatch-role">Elevated dark surface, card background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.06);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted White</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.1)</div>
+          <div class="color-swatch-role">Glass-effect buttons, translucent surfaces</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.6);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Ghost White</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
+          <div class="color-swatch-role">Tertiary text, placeholders</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Semantic</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(0,153,255,0.15); border: 1px solid rgba(0,153,255,0.2);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Blue Glow</div>
+          <div class="color-swatch-hex">rgba(0,153,255,0.15)</div>
+          <div class="color-swatch-role">Focus ring shadow, blue halo</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0000ee;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Default Link Blue</div>
+          <div class="color-swatch-hex">#0000ee</div>
+          <div class="color-swatch-role">Browser default links (rare)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">GT Walsheim for compressed display headlines, Inter for refined body and UI text with extensive OpenType features.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 110px / 500 / 0.85 / -5.5px</div>
+    <div style="font-size: 80px; font-weight: 700; letter-spacing: -4px; line-height: 0.88;">Build better sites</div>
+    <div class="type-spec">GT Walsheim Framer Medium (shown in Inter fallback) — extreme negative tracking, compressed impact</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 85px / 500 / 0.95 / -4.25px</div>
+    <div style="font-size: 64px; font-weight: 700; letter-spacing: -3.5px; line-height: 0.95;">Scale without limits</div>
+    <div class="type-spec">GT Walsheim Medium (shown in Inter fallback) — OpenType: ss02, tnum</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Heading — 62px / 500 / 1.00 / -3.1px</div>
+    <div style="font-size: 52px; font-weight: 600; letter-spacing: -2.8px; line-height: 1.0;">Create, collaborate</div>
+    <div class="type-spec">GT Walsheim Medium — OpenType: ss02</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Feature Heading — 32px / 500 / 1.13 / -1px</div>
+    <div style="font-size: 32px; font-weight: 500; letter-spacing: -1px; line-height: 1.13;">Powering ambitious sites</div>
+    <div class="type-spec">GT Walsheim Medium — tightest of the smaller headings</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Card Title — 24px / 400 / 1.30 / -0.01px</div>
+    <div style="font-size: 24px; font-weight: 400; letter-spacing: -0.01px; line-height: 1.3;">Interactive components that respond</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Feature Title — 22px / 700 / 1.20 / -0.8px</div>
+    <div style="font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.2;">Visual canvas meets code precision</div>
+    <div class="type-spec">Inter — OpenType: cv05</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body Large — 18px / 400 / 1.30 / -0.01px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv05, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 15px / 400 / 1.30 / -0.01px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv11</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Caption — 14px / 400 / 1.40</div>
+    <div style="font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-silver);">Responsive breakpoints with automatic layout adjustments across all devices.</div>
+    <div class="type-spec">Inter Variable — OpenType: cv01, cv06, cv09, cv11, ss03, ss07</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Label — 13px / 500 / 1.60</div>
+    <div style="font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--color-silver);">Component interaction settings</div>
+    <div class="type-spec">Inter — OpenType: cv06, cv11, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Micro Code — 10.4px / 400 / 1.60</div>
+    <div 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</div>
+    <div class="type-spec">Azeret Mono — OpenType: cv06, cv11, ss03</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">All pill-shaped — no sharp corners on interactive elements. 40px–100px radius range.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Start for Free</a>
+      <span class="btn-label">Primary / White Pill</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Frosted / Glass</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">View Docs</button>
+      <span class="btn-label">Ghost / Outline</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-blue">Upgrade Plan</button>
+      <span class="btn-label">Blue / Accent</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-primary" style="padding: 8px 18px; font-size: 13px;">Sign Up</a>
+      <span class="btn-label">Small / Nav CTA</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Dark surface cards with Framer Blue ring borders and multi-layer floating shadows.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Visual Canvas</div>
+      <h3 class="card-title">Design Freedom</h3>
+      <p class="card-text">Build layouts with a true visual editor that outputs clean, production-ready code. Drag, resize, and animate with precision.</p>
+    </div>
+    <div class="card card-elevated">
+      <div class="card-tag">Interactive</div>
+      <h3 class="card-title">Smart Components</h3>
+      <p class="card-text">Create reusable components with built-in variants, interactions, and responsive overrides that scale across your project.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Performance</div>
+      <h3 class="card-title">Lightning Fast</h3>
+      <p class="card-text">Sites built on Framer's infrastructure load instantly with optimized assets, code splitting, and edge delivery.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Dark inputs with Framer Blue focus rings and minimal chrome.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email Address (Focus State)</label>
+      <input type="email" class="form-input" placeholder="you@example.com" style="border-color: var(--color-blue); box-shadow: var(--shadow-ring);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Project URL (Error State)</label>
+      <input type="url" class="form-input form-input-error" placeholder="https://yoursite.framer.app" value="invalid-url">
+      <span class="form-error-text">Please enter a valid URL</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your project..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit system with fine-grained sub-8px values for micro-adjustments.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">6px</span><div class="spacing-box" style="width: 24px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">10px</span><div class="spacing-box" style="width: 56px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 72px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">15px</span><div class="spacing-box" style="width: 96px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 140px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">30px</span><div class="spacing-box" style="width: 220px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">35px</span><div class="spacing-box" style="width: 260px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From nearly-squared micro edges to full pill shapes — radius grows with element importance.</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 1px;"></div>
+      <div class="radius-value">1px</div>
+      <div class="radius-context">Micro</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 5px;"></div>
+      <div class="radius-value">5px</div>
+      <div class="radius-context">Thumbnails</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 8px;"></div>
+      <div class="radius-value">8px</div>
+      <div class="radius-context">Components</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 12px;"></div>
+      <div class="radius-value">12px</div>
+      <div class="radius-context">Cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 15px;"></div>
+      <div class="radius-value">15px</div>
+      <div class="radius-context">Large cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 20px;"></div>
+      <div class="radius-value">20px</div>
+      <div class="radius-context">Containers</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 40px;"></div>
+      <div class="radius-value">40px</div>
+      <div class="radius-context">Nav pills</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 100px; width: 72px; height: 44px;"></div>
+      <div class="radius-value">100px</div>
+      <div class="radius-context">Full pill</div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">Inverted elevation system — blue ring shadows for containment, white edge highlights for floating elements.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid rgba(255,255,255,0.04);">
+      <div class="elevation-label">Level 0 — Flat</div>
+      <div class="elevation-desc">No shadow. Pure black surface. The void baseline that everything else rises from.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-ring);">
+      <div class="elevation-label">Level 1 — Ring</div>
+      <div class="elevation-desc">Framer Blue glow ring (rgba(0,153,255,0.15) 1px). Card borders, interactive outlines.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-contained);">
+      <div class="elevation-label">Level 2 — Contained</div>
+      <div class="elevation-desc">Near-black ring (rgb(9,9,9) 2px). Subtle containment on dark surfaces.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-floating);">
+      <div class="elevation-label">Level 3 — Floating</div>
+      <div class="elevation-desc">White top-edge highlight + deep ambient shadow (30px spread). Elevated cards, modals, dropdowns.</div>
+    </div>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer class="footer">
+  <p>Design system extracted from <a href="https://framer.com">framer.com</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/intercom/DESIGN.md

@@ -0,0 +1,146 @@
+# Design System: Intercom
+
+## 1. Visual Theme & Atmosphere
+
+Intercom'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.
+
+The 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.
+
+What 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.
+
+**Key Characteristics:**
+- Warm off-white canvas (`#faf9f6`) with oat-toned borders (`#dedbd6`)
+- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height
+- Fin Orange (`#ff5600`) as singular brand accent
+- Sharp 4px border-radius — near-rectangular buttons and elements
+- Scale(1.1) hover with scale(0.85) active — physical button interaction
+- SaansMono uppercase labels with wide tracking (0.6px–1.2px)
+- Rich multi-color report palette (blue, green, red, pink, lime, orange)
+- oklab color values for sophisticated opacity management
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Off Black** (`#111111`): `--color-off-black`, primary text, button backgrounds
+- **Pure White** (`#ffffff`): `--wsc-color-content-primary`, primary surface
+- **Warm Cream** (`#faf9f6`): Button backgrounds, card surfaces
+- **Fin Orange** (`#ff5600`): `--color-fin`, primary brand accent
+- **Report Orange** (`#fe4c02`): `--color-report-orange`, data visualization
+
+### Report Palette
+- **Report Blue** (`#65b5ff`): `--color-report-blue`
+- **Report Green** (`#0bdf50`): `--color-report-green`
+- **Report Red** (`#c41c1c`): `--color-report-red`
+- **Report Pink** (`#ff2067`): `--color-report-pink`
+- **Report Lime** (`#b3e01c`): `--color-report-lime-300`
+- **Green** (`#00da00`): `--color-green`
+- **Deep Blue** (`#0007cb`): Deep blue accent
+
+### Neutral Scale (Warm)
+- **Black 80** (`#313130`): `--wsc-color-black-80`, dark neutral
+- **Black 60** (`#626260`): `--wsc-color-black-60`, mid neutral
+- **Black 50** (`#7b7b78`): `--wsc-color-black-50`, muted text
+- **Content Tertiary** (`#9c9fa5`): `--wsc-color-content-tertiary`
+- **Oat Border** (`#dedbd6`): Warm border color
+- **Warm Sand** (`#d3cec6`): Light warm neutral
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Saans`, fallbacks: `Saans Fallback, ui-sans-serif, system-ui`
+- **Serif**: `Serrif`, fallbacks: `Serrif Fallback, ui-serif, Georgia`
+- **Monospace**: `SaansMono`, fallbacks: `SaansMono Fallback, ui-monospace`
+- **UI**: `MediumLL` / `LLMedium`, fallbacks: `system-ui, -apple-system`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |
+| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |
+| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |
+| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |
+| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |
+| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |
+| Nav / UI | Saans | 18px | 400 | 1.00 | normal |
+| Body | Saans | 16px | 400 | 1.50 | normal |
+| Body Light | Saans | 14px | 300 | 1.40 | normal |
+| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |
+| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |
+| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |
+| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark**
+- Background: `#111111`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 4px
+- Hover: white background, dark text, scale(1.1)
+- Active: green background (`#2c6415`), scale(0.85)
+
+**Outlined**
+- Background: transparent
+- Text: `#111111`
+- Border: `1px solid #111111`
+- Radius: 4px
+- Same scale hover/active behavior
+
+**Warm Card Button**
+- Background: `#faf9f6`
+- Text: `#111111`
+- Padding: 16px
+- Border: `1px solid oklab(... / 0.1)`
+
+### Cards & Containers
+- Background: `#faf9f6` (warm cream)
+- Border: `1px solid #dedbd6` (warm oat)
+- Radius: 8px
+- No visible shadows
+
+### Navigation
+- Saans 16px for links
+- Off-black text on white
+- Small 4px–6px radius buttons
+- Orange Fin accent for AI features
+
+## 5. Layout Principles
+
+### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px
+### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)
+
+## 6. Depth & Elevation
+Minimal shadows. Depth through warm border colors and surface tints.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Saans with 1.00 line-height and negative tracking on all headings
+- Apply 4px radius on buttons — sharp geometry is the identity
+- Use Fin Orange (#ff5600) for AI/brand accent only
+- Apply scale(1.1) hover on buttons
+- Use warm neutrals (#faf9f6, #dedbd6)
+
+### Don't
+- Don't round buttons beyond 4px
+- Don't use Fin Orange decoratively
+- Don't use cool gray borders — always warm oat tones
+- Don't skip the negative tracking on headings
+
+## 8. Responsive Behavior
+Breakpoints: 425px, 530px, 600px, 640px, 768px, 896px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Text: Off Black (`#111111`)
+- Background: Warm Cream (`#faf9f6`)
+- Accent: Fin Orange (`#ff5600`)
+- Border: Oat (`#dedbd6`)
+- Muted: `#7b7b78`
+
+### Example Component Prompts
+- "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."

design-md/intercom/README.md

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

design-md/intercom/preview-dark.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Intercom (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
+  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
+  .nav-links a:hover { color:var(--black); }
+  .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; }
+  .nav-cta:hover { transform:scale(1.05); }
+
+  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
+  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
+  .hero h1 span { color:var(--orange); }
+  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
+  .hero-buttons { display:flex; gap:12px; }
+  .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; }
+  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
+  .btn-dark:active { transform:scale(0.85); }
+  .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; }
+  .btn-outline:hover { transform:scale(1.1); }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
+  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
+  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; margin-bottom:4px; }
+  .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; }
+  .form-input:focus { border-color:var(--black); }
+  .form-input--focus { border-color:var(--black); }
+  .form-input--error { border-color:var(--orange); }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
+  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
+  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; margin-bottom:4px; }
+  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
+  .footer a { color:var(--orange); text-decoration:underline; }
+
+  @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; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
+<div 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</div>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
+</div>
+<div class="color-group-label">Report Palette</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
+<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
+<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
+<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
+<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
+<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
+</div>
+<p 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.</p>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
+<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
+<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
+<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
+<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
+<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
+<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://www.intercom.com/">intercom.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/intercom/preview.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Intercom (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
+  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
+  .nav-links a:hover { color:var(--black); }
+  .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; }
+  .nav-cta:hover { transform:scale(1.05); }
+
+  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
+  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
+  .hero h1 span { color:var(--orange); }
+  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
+  .hero-buttons { display:flex; gap:12px; }
+  .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; }
+  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
+  .btn-dark:active { transform:scale(0.85); }
+  .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; }
+  .btn-outline:hover { transform:scale(1.1); }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
+  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
+  .color-swatch-block { height:60px; }
+  .color-swatch-info { padding:8px 10px; }
+  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
+  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
+  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
+  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:14px; margin-bottom:4px; }
+  .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; }
+  .form-input:focus { border-color:var(--black); }
+  .form-input--focus { border-color:var(--black); }
+  .form-input--error { border-color:var(--orange); }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
+  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
+  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; margin-bottom:4px; }
+  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
+
+  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
+  .footer a { color:var(--orange); text-decoration:underline; }
+
+  @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; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
+</div>
+<div class="color-group-label">Report Palette</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
+<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
+<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
+<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
+<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
+<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
+</div>
+<p 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.</p>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
+<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
+<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
+<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
+<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
+<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
+<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://www.intercom.com/">intercom.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/miro/DESIGN.md

@@ -0,0 +1,108 @@
+# Design System: Miro
+
+## 1. Visual Theme & Atmosphere
+
+Miro'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.
+
+The 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.
+
+**Key Characteristics:**
+- White canvas with near-black (`#1c1c1e`) text
+- Roobert PRO Medium with multiple OpenType character variants
+- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)
+- Blue 450 (`#5b76fe`) as primary interactive color
+- Success green (`#00b473`) for positive states
+- Generous border-radius: 8px–50px range
+- Framer-built with smooth motion patterns
+- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#1c1c1e`): Primary text
+- **White** (`#ffffff`): `--tw-color-white`, primary surface
+- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive
+- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`
+
+### Pastel Accents (Light/Dark pairs)
+- **Coral**: Light `#ffc6c6` / Dark `#600000`
+- **Rose**: Light `#ffd8f4` / Dark (implied)
+- **Teal**: Light `#c3faf5` / Dark `#187574`
+- **Orange**: Light `#ffe6cd`
+- **Yellow**: Dark `#746019`
+- **Moss**: Dark `#187574`
+- **Pink** (`#fde0f0`): Soft pink surface
+- **Red** (`#fbd4d4`): Light red surface
+- **Dark Red** (`#e3c5c5`): Muted red
+
+### Semantic
+- **Success** (`#00b473`): `--tw-color-success-accent`
+
+### Neutral
+- **Slate** (`#555a6a`): Secondary text
+- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`
+- **Border** (`#c7cad5`): Button borders
+- **Ring** (`rgb(224,226,232)`): Shadow-as-border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Roobert PRO Medium`, fallback: Placeholder — `"blwf", "cv03", "cv04", "cv09", "cv11"`
+- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`
+- **Body**: `Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |
+| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |
+| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |
+| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |
+| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |
+| Body | Noto Sans | 18px | 400 | 1.45 | normal |
+| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |
+| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |
+| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |
+| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |
+| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding
+- White circle: 50% radius, white bg with shadow
+- Blue primary (implied from interactive color)
+
+### Cards: 12px–24px radius, pastel backgrounds
+### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding
+
+## 5. Layout Principles
+- Spacing: 1–24px base scale
+- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)
+- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`
+
+## 6. Depth & Elevation
+Minimal — ring shadow + pastel surface contrast
+
+## 7. Do's and Don'ts
+### Do
+- Use pastel light/dark pairs for feature sections
+- Apply Roobert PRO with OpenType character variants
+- Use Blue 450 (#5b76fe) for interactive elements
+### Don't
+- Don't use heavy shadows
+- Don't mix more than 2 pastel accents per section
+
+## 8. Responsive Behavior
+Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
+
+## 9. Agent Prompt Guide
+### Quick Color Reference
+- Text: Near Black (`#1c1c1e`)
+- Background: White (`#ffffff`)
+- Interactive: Blue 450 (`#5b76fe`)
+- Success: `#00b473`
+- Border: `#c7cad5`
+### Example Component Prompts
+- "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)."

design-md/miro/README.md

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

design-md/miro/preview-dark.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Miro (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }
+  .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
+  .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
+  .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }
+  .color-swatch-block { height:56px; }
+  .color-swatch-info { padding:8px; }
+  .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }
+  .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }
+
+  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
+  .card { border-radius:12px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }
+  .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }
+
+  .form-group { margin-bottom:12px; max-width:380px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
+  .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }
+  .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
+  .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }
+  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
+  .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }
+  .footer a { color:var(--blue); text-decoration:underline; }
+
+  @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; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
+<div 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</div>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1e"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c1c1e</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b76fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 450</div><div class="color-swatch-hex">#5b76fe</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#00b473"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#00b473</div></div></div>
+</div>
+<div class="color-group-label">Pastel Accents</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral Light</div><div class="color-swatch-hex">#ffc6c6</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd8f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Rose Light</div><div class="color-swatch-hex">#ffd8f4</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c3faf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Light</div><div class="color-swatch-hex">#c3faf5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffe6cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange Light</div><div class="color-swatch-hex">#ffe6cd</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#fde0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fde0f0</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#fbd4d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Red Light</div><div class="color-swatch-hex">#fbd4d4</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#555a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#555a6a</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#a5a8b5"></div><div class="color-swatch-info"><div class="color-swatch-name">Placeholder</div><div class="color-swatch-hex">#a5a8b5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c7cad5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c7cad5</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;">Display Hero</div><div class="type-meta">Roobert PRO Medium — 56px / 1.15 / -1.68px</div></div>
+<div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;">Section Heading</div><div class="type-meta">Roobert PRO — 48px / 1.15 / -1.44px</div></div>
+<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;">Card Title</div><div class="type-meta">Roobert PRO — 24px / 1.15 / -0.72px</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Noto Sans — 18px / 1.45</div></div>
+<div class="type-sample"><div style="font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;">Button Label</div><div class="type-meta">Roobert PRO — 17.5px / 700 / +0.175px</div></div>
+<div class="type-sample"><div style="font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);">MICRO LABEL</div><div class="type-meta">Roobert PRO — 10.5px / uppercase</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign up free</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact sales</a><div class="button-label">Outlined</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card" style="background:var(--coral-l);"><h3>Brainstorming</h3><p>Ideate together in real-time with sticky notes and voting.</p></div>
+<div class="card" style="background:var(--teal-l);"><h3>Diagramming</h3><p>Create flowcharts, mind maps, and org charts visually.</p></div>
+<div class="card" style="background:var(--orange-l);"><h3>Workshops</h3><p>Run engaging workshops with built-in templates.</p></div>
+<div class="card" style="background:var(--rose-l);"><h3>Strategy</h3><p>Align teams with visual strategic planning tools.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Team name</label><input class="form-input form-input--focus" type="text" value="Design Team"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your board..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50px"></div><div class="radius-label">50px</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/miro/preview.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Miro (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); box-shadow:var(--ring) 0px 0px 0px 1px; }
+  .nav-brand { font-size:16px; font-weight:500; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; color:var(--slate); text-decoration:none; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-family:var(--font-body); font-size:18px; color:var(--slate); max-width:500px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:8px; font-size:17.5px; font-weight:700; letter-spacing:0.175px; text-decoration:none; border:none; cursor:pointer; }
+  .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; }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
+  .section-title { font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--ring); margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
+  .color-swatch { border-radius:12px; overflow:hidden; box-shadow:var(--ring) 0px 0px 0px 1px; }
+  .color-swatch-block { height:56px; }
+  .color-swatch-info { padding:8px; }
+  .color-swatch-name { font-size:11px; font-weight:500; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--placeholder); font-family:monospace; }
+  .color-group-label { font-size:11px; font-weight:600; color:var(--slate); margin:16px 0 6px; }
+
+  .type-sample { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(224,226,232,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:9px; color:var(--placeholder); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:9px; color:var(--placeholder); margin-top:4px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
+  .card { border-radius:12px; padding:20px; }
+  .card h3 { font-size:24px; font-weight:500; letter-spacing:-0.72px; line-height:1.15; margin-bottom:8px; }
+  .card p { font-family:var(--font-body); font-size:14px; color:var(--slate); }
+
+  .form-group { margin-bottom:12px; max-width:380px; }
+  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid #e9eaef; padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:var(--coral-d); box-shadow:0 0 0 1px var(--coral-d); }
+  .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; }
+  .form-state-label { font-size:9px; color:var(--placeholder); margin-top:3px; }
+
+  .spacing-row { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:3px; margin-bottom:3px; height:20px; opacity:0.6; }
+  .spacing-value { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .radius-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:48px; height:48px; background:var(--teal-l); margin-bottom:3px; }
+  .radius-label { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
+  .elevation-card { background:var(--white); border-radius:12px; padding:14px; text-align:center; }
+  .elevation-label { font-size:12px; font-weight:500; margin-bottom:3px; }
+  .elevation-desc { font-size:8px; color:var(--placeholder); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; background:var(--black); color:var(--placeholder); font-size:11px; }
+  .footer a { color:var(--blue); text-decoration:underline; }
+
+  @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; } }
+</style>
+</head>
+<body>
+
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign up free</a></nav>
+
+<section class="hero"><h1>Design System<br>Inspired by <span>Miro</span></h1><p>Every color, font, and component — visualized with collaborative precision.</p><div class="hero-buttons"><a class="btn-blue" href="#">Sign up free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1c1e"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#1c1c1e</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5b76fe"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 450</div><div class="color-swatch-hex">#5b76fe</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#00b473"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#00b473</div></div></div>
+</div>
+<div class="color-group-label">Pastel Accents</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffc6c6"></div><div class="color-swatch-info"><div class="color-swatch-name">Coral Light</div><div class="color-swatch-hex">#ffc6c6</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd8f4"></div><div class="color-swatch-info"><div class="color-swatch-name">Rose Light</div><div class="color-swatch-hex">#ffd8f4</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c3faf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Teal Light</div><div class="color-swatch-hex">#c3faf5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffe6cd"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange Light</div><div class="color-swatch-hex">#ffe6cd</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#fde0f0"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#fde0f0</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#fbd4d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Red Light</div><div class="color-swatch-hex">#fbd4d4</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#555a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#555a6a</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#a5a8b5"></div><div class="color-swatch-info"><div class="color-swatch-name">Placeholder</div><div class="color-swatch-hex">#a5a8b5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#c7cad5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c7cad5</div></div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+<div class="type-sample"><div style="font-size:56px; font-weight:500; line-height:1.15; letter-spacing:-1.68px;">Display Hero</div><div class="type-meta">Roobert PRO Medium — 56px / 1.15 / -1.68px</div></div>
+<div class="type-sample"><div style="font-size:48px; font-weight:500; line-height:1.15; letter-spacing:-1.44px;">Section Heading</div><div class="type-meta">Roobert PRO — 48px / 1.15 / -1.44px</div></div>
+<div class="type-sample"><div style="font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-0.72px;">Card Title</div><div class="type-meta">Roobert PRO — 24px / 1.15 / -0.72px</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">Noto Sans — 18px / 1.45</div></div>
+<div class="type-sample"><div style="font-size:17.5px; font-weight:700; line-height:1.29; letter-spacing:0.175px;">Button Label</div><div class="type-meta">Roobert PRO — 17.5px / 700 / +0.175px</div></div>
+<div class="type-sample"><div style="font-size:10.5px; text-transform:uppercase; line-height:0.90; color:var(--slate);">MICRO LABEL</div><div class="type-meta">Roobert PRO — 10.5px / uppercase</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Sign up free</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact sales</a><div class="button-label">Outlined</div></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card" style="background:var(--coral-l);"><h3>Brainstorming</h3><p>Ideate together in real-time with sticky notes and voting.</p></div>
+<div class="card" style="background:var(--teal-l);"><h3>Diagramming</h3><p>Create flowcharts, mind maps, and org charts visually.</p></div>
+<div class="card" style="background:var(--orange-l);"><h3>Workshops</h3><p>Run engaging workshops with built-in templates.</p></div>
+<div class="card" style="background:var(--rose-l);"><h3>Strategy</h3><p>Align teams with visual strategic planning tools.</p></div>
+</div></section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Team name</label><input class="form-input form-input--focus" type="text" value="Design Team"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Password</label><input class="form-input form-input--error" type="password" value="short"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your board..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:40px"></div><div class="radius-label">40px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50px"></div><div class="radius-label">50px</div></div></div></section>
+
+<hr class="section-divider">
+
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="box-shadow:var(--ring) 0px 0px 0px 1px;"><div class="elevation-label">Ring</div><div class="elevation-desc">1px ring border</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--blue);"><div class="elevation-label">Focus</div><div class="elevation-desc">Blue ring</div></div></div></section>
+
+<footer class="footer">Generated from <a href="https://miro.com/">miro.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>

design-md/posthog/DESIGN.md

@@ -0,0 +1,256 @@
+# Design System: PostHog
+
+## 1. Visual Theme & Atmosphere
+
+PostHog'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.
+
+The 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."
+
+The 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/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.
+
+**Key Characteristics:**
+- Warm sage/olive color palette instead of conventional blues — earthy and approachable
+- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
+- Hidden brand orange (`#F54E00`) that only appears on hover interactions — a delightful surprise
+- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate
+- Sage-tinted borders (`#bfc1b7`) and backgrounds (`#eeefe9`) creating a unified warm-green system
+- Dark near-black CTAs (`#1e1f23`) with opacity-based hover states
+- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page
+- Tailwind CSS + Radix UI + shadcn/ui component architecture
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Olive Ink** (`#4d4f46`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone
+- **Deep Olive** (`#23251d`): Link text and high-emphasis headings — near-black with green undertone
+- **PostHog Orange** (`#F54E00`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises
+
+### Secondary & Accent
+- **Amber Gold** (`#F7A501`): Secondary hover accent on dark buttons — warm gold that pairs with the orange
+- **Gold Border** (`#b17816`): Special button borders — an amber-gold for featured CTAs
+- **Focus Blue** (`#3b82f6`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility
+
+### Surface & Background
+- **Warm Parchment** (`#fdfdf8`): Primary page background — warm near-white with yellow-green undertone
+- **Sage Cream** (`#eeefe9`): Input backgrounds, secondary surfaces — light sage tint
+- **Light Sage** (`#e5e7e0`): Button backgrounds, tertiary surfaces — muted sage-green
+- **Warm Tan** (`#d4c9b8`): Featured button backgrounds — warm tan/khaki for emphasis
+- **Hover White** (`#f4f4f4`): Universal hover background state
+
+### Neutrals & Text
+- **Olive Ink** (`#4d4f46`): Primary body and UI text
+- **Muted Olive** (`#65675e`): Secondary text, button labels on light backgrounds
+- **Sage Placeholder** (`#9ea096`): Placeholder text, disabled states — warm sage-green
+- **Sage Border** (`#bfc1b7`): Primary border color — olive-tinted gray for all borders
+- **Light Border** (`#b6b7af`): Secondary border, toolbar borders — slightly darker sage
+
+### Semantic & Accent
+- **PostHog Orange** (`#F54E00`): Hover text accent — signals interactivity and brand personality
+- **Amber Gold** (`#F7A501`): Dark button hover accent — warmth signal
+- **Focus Blue** (`#3b82f6` at 50% opacity): Keyboard focus rings — accessibility-only color
+- **Dark Text** (`#111827`): High-contrast link text — near-black for important links
+
+### Gradient System
+- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm
+- Depth is achieved through layered surfaces and border containment, not color transitions
+
+## 3. Typography Rules
+
+### Font Family
+- **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`
+- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` — system monospace stack
+- **Code Display**: `Source Code Pro` — with fallbacks: `Menlo, Consolas, Monaco`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |
+| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |
+| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |
+| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |
+| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |
+| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |
+| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |
+| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |
+| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |
+| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |
+| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |
+| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |
+| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |
+| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |
+| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |
+| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |
+| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |
+
+### Principles
+- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery
+- **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
+- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base
+- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention
+- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes
+
+## 4. Component Stylings
+
+### Buttons
+- **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
+- **Sage Light**: `#e5e7e0` background, Olive Ink (`#4d4f46`) text, 4px radius, `4px` padding. Hover: `#f4f4f4` bg with PostHog Orange text. Compact utility button
+- **Warm Tan Featured**: `#d4c9b8` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions
+- **Input-style**: `#eeefe9` background, Sage Placeholder (`#9ea096`) text, 4px radius, 1px `#b6b7af` border. Looks like a search/filter control
+- **Near-white Ghost**: `#fdfdf8` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence
+- **Hover pattern**: All buttons flash PostHog Orange (`#F54E00`) or Amber Gold (`#F7A501`) text on hover — the brand's signature interaction surprise
+
+### Cards & Containers
+- **Bordered Card**: Warm Parchment (`#fdfdf8`) or white background, 1px `#bfc1b7` border, 4px–6px radius — clean and minimal
+- **Sage Surface Card**: `#eeefe9` background for secondary content containers
+- **Shadow Card**: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` — a single deep shadow for elevated content (modals, dropdowns)
+- **Hover**: Orange text flash on interactive cards — consistent with button behavior
+
+### Inputs & Forms
+- **Default**: `#eeefe9` background, `#9ea096` placeholder text, 1px `#b6b7af` border, 4px radius, `2px 0px 2px 8px` padding
+- **Focus**: `#3b82f6` ring at 50% opacity (Tailwind blue focus ring)
+- **Text color**: `#374151` for input values — darker than primary text for readability
+- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)
+
+### Navigation
+- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600
+- **Dropdown menus**: Rich mega-menu structure with product categories
+- **Link color**: Deep Olive (`#23251d`) for nav links, underline on hover
+- **CTA**: Dark Primary button (#1e1f23) in the nav — "Get started - free"
+- **Mobile**: Collapses to hamburger with simplified menu
+
+### Image Treatment
+- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element
+- **Product screenshots**: UI screenshots embedded in device frames or clean containers
+- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate
+- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar
+- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen
+
+### AI Chat Widget
+- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px
+- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)
+- **Card padding**: 4px–12px internal (notably compact)
+- **Component gaps**: 4px–8px between related elements
+
+### Grid & Container
+- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px
+- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos
+- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px
+
+### Whitespace Philosophy
+- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish
+- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving
+- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally
+
+### Border Radius Scale
+- **2px**: Small inline elements, tags (`span`)
+- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (`button`, `div`, `combobox`)
+- **6px**: Secondary containers — larger buttons, list items, card variants (`button`, `div`, `li`)
+- **9999px**: Pill shape — badges, status indicators, rounded tags (`span`, `div`)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |
+| Level 1 (Border) | `1px solid #bfc1b7` (Sage Border) | Card containment, input borders, section dividers |
+| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |
+| Level 3 (Deep Shadow) | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | Modals, floating elements, mega-menu dropdowns |
+
+### Shadow Philosophy
+PostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:
+- **Border containment**: Sage-tinted borders (`#bfc1b7`) at 1px create gentle warm separation
+- **Surface color shifts**: Moving from `#fdfdf8` to `#eeefe9` to `#e5e7e0` creates layered depth without shadows
+- **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
+
+### Decorative Depth
+- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally
+- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation
+- **No glassmorphism**: Fully opaque surfaces throughout
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand
+- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature
+- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility
+- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability
+- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold
+- Use 4px border-radius for most UI elements — keep corners subtle and functional
+- Include playful, hand-drawn illustration elements — the personality is the differentiator
+- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts
+
+### Don't
+- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage
+- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders
+- Make the design look "polished" or "premium" in a conventional sense — PostHog's charm is its irreverent, scrappy energy
+- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout
+- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional
+- Remove the orange hover flash — it's a core interaction pattern, not decoration
+- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand
+- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <425px | Single column, compact padding, stacked cards |
+| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |
+| Tablet | 640px–768px | 2-column grids begin, nav partially visible |
+| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |
+| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |
+| Large Desktop | 1280px–1536px | Max-width container, generous margins |
+| Extra Large | >1536px | Centered container at max-width |
+
+### Touch Targets
+- Buttons: 4px–6px radius with `4px–12px` padding — compact but usable
+- Nav links: 15px text at weight 600 with adequate padding
+- Mobile: Hamburger menu with simplified navigation
+- Inputs: Generous vertical padding for thumb-friendly forms
+
+### Collapsing Strategy
+- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile
+- **Feature grids**: 3-column → 2-column → single column stacked
+- **Typography**: Display sizes reduce across breakpoints (30px → smaller)
+- **Illustrations**: Scale within containers, some may hide on mobile for space
+- **Section spacing**: Reduces proportionally while maintaining readability
+
+### Image Behavior
+- Illustrations scale responsively within containers
+- Product screenshots maintain aspect ratios
+- Trust logos reflow into multi-row grids on mobile
+- AI chat widget may reposition or simplify on small screens
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Olive Ink (`#4d4f46`)
+- Dark Text: Deep Olive (`#23251d`)
+- Hover Accent: PostHog Orange (`#F54E00`)
+- Dark CTA: Near-Black (`#1e1f23`)
+- Button Surface: Light Sage (`#e5e7e0`)
+- Page Background: Warm Parchment (`#fdfdf8`)
+- Border: Sage Border (`#bfc1b7`)
+- Placeholder: Sage Placeholder (`#9ea096`)
+
+### Example Component Prompts
+- "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)"
+- "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)"
+- "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"
+- "Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover"
+- "Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential
+2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray
+3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this
+4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element
+5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile

design-md/posthog/README.md

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

design-md/posthog/preview-dark.html

@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by PostHog — Dark Mode</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --olive-ink: #4d4f46;
+    --deep-olive: #23251d;
+    --posthog-orange: #F54E00;
+    --amber-gold: #F7A501;
+    --gold-border: #b17816;
+    --focus-blue: #3b82f6;
+    --warm-parchment: #fdfdf8;
+    --sage-cream: #eeefe9;
+    --light-sage: #e5e7e0;
+    --warm-tan: #d4c9b8;
+    --hover-white: #f4f4f4;
+    --muted-olive: #65675e;
+    --sage-placeholder: #9ea096;
+    --sage-border: #bfc1b7;
+    --light-border: #b6b7af;
+    --near-black: #1e1f23;
+    --dark-text: #111827;
+    --white: #ffffff;
+    --font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
+    --mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+    /* Dark mode */
+    --dk-bg: #151614;
+    --dk-surface: #1c1d1a;
+    --dk-surface-elevated: #252621;
+    --dk-border: #3a3b36;
+    --dk-text-primary: #e5e7e0;
+    --dk-text-secondary: #9ea096;
+    --dk-text-muted: #65675e;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font);
+    background: var(--dk-bg);
+    color: var(--dk-text-primary);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* DARK MODE BADGE */
+  .dark-badge {
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 200;
+    background: var(--posthog-orange);
+    color: var(--white);
+    padding: 5px 12px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  /* NAV */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 32px;
+    background: rgba(21, 22, 20, 0.92);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--dk-border);
+  }
+  .nav-brand {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--dk-text-primary);
+    text-decoration: none;
+  }
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--dk-text-secondary);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .nav-links a:hover { color: var(--posthog-orange); }
+  .nav-cta {
+    background: var(--warm-parchment);
+    color: var(--deep-olive);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 700;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.85; }
+
+  /* HERO */
+  .hero {
+    background: var(--dk-bg);
+    padding: 80px 32px 64px;
+    border-bottom: 1px solid var(--dk-border);
+  }
+  .hero-inner { max-width: 800px; margin: 0 auto; }
+  .hero h1 {
+    font-size: 30px;
+    font-weight: 800;
+    line-height: 1.20;
+    letter-spacing: -0.75px;
+    color: var(--dk-text-primary);
+    margin-bottom: 16px;
+  }
+  .hero .subtitle {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.56;
+    color: var(--dk-text-secondary);
+    margin-bottom: 32px;
+  }
+  .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
+  .btn-light {
+    background: var(--warm-parchment);
+    color: var(--deep-olive);
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 700;
+    font-family: var(--font);
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .btn-light:hover { opacity: 0.85; }
+  .btn-outline-dk {
+    background: transparent;
+    color: var(--dk-text-primary);
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: var(--font);
+    border: 1px solid var(--dk-border);
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-outline-dk:hover { color: var(--posthog-orange); }
+
+  /* SECTIONS */
+  .section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
+  .section-title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.33;
+    color: var(--dk-text-primary);
+    margin-bottom: 8px;
+  }
+  .section-subtitle {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    color: var(--dk-text-secondary);
+    margin-bottom: 40px;
+  }
+
+  /* COLORS */
+  .color-category { margin-bottom: 32px; }
+  .color-category h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--dk-text-primary);
+    margin-bottom: 16px;
+    text-transform: uppercase;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 16px;
+  }
+  .color-swatch {
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--dk-border);
+    background: var(--dk-surface);
+  }
+  .swatch-color { height: 80px; width: 100%; }
+  .swatch-info { padding: 10px 12px; }
+  .swatch-name { font-size: 13px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 2px; }
+  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); margin-bottom: 4px; }
+  .swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
+
+  /* TYPOGRAPHY */
+  .type-sample {
+    padding: 20px 0;
+    border-bottom: 1px solid var(--dk-border);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text { color: var(--dk-text-primary); margin-bottom: 6px; }
+  .type-sample .type-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--posthog-orange);
+    font-family: var(--mono);
+    line-height: 1.4;
+  }
+
+  /* BUTTONS */
+  .button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
+  .button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
+  .btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); }
+  .btn-dk-primary {
+    background: var(--warm-parchment);
+    color: var(--deep-olive);
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 700;
+    font-family: var(--font);
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .btn-dk-primary:hover { opacity: 0.85; }
+  .btn-dk-sage {
+    background: var(--dk-surface-elevated);
+    color: var(--dk-text-primary);
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: var(--font);
+    border: 1px solid var(--dk-border);
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-dk-sage:hover { color: var(--posthog-orange); }
+  .btn-dk-tan {
+    background: #4a3f30;
+    color: var(--warm-tan);
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: var(--font);
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-dk-tan:hover { color: var(--posthog-orange); }
+  .btn-dk-input {
+    background: var(--dk-surface);
+    color: var(--dk-text-muted);
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: var(--font);
+    border: 1px solid var(--dk-border);
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-dk-input:hover { color: var(--posthog-orange); }
+  .btn-dk-ghost {
+    background: transparent;
+    color: var(--dk-text-secondary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-dk-ghost:hover { color: var(--posthog-orange); }
+
+  /* CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  .card { border-radius: 6px; padding: 24px; transition: transform 0.15s; }
+  .card-dk-bordered { background: var(--dk-surface); border: 1px solid var(--dk-border); }
+  .card-dk-elevated { background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
+  .card-dk-shadow {
+    background: var(--dk-surface);
+    border: 1px solid var(--dk-border);
+    box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.5);
+  }
+  .card-hover:hover { transform: translateY(-2px); }
+  .card h4 { font-size: 20px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 8px; line-height: 1.40; }
+  .card .card-desc { font-size: 15px; font-weight: 400; line-height: 1.71; color: var(--dk-text-secondary); }
+  .card .card-label { font-size: 11px; font-weight: 500; color: var(--posthog-orange); font-family: var(--mono); margin-top: 12px; }
+
+  /* FORMS */
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text-primary); }
+  .form-group input, .form-group textarea {
+    font-family: var(--font);
+    font-size: 15px;
+    font-weight: 400;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--dk-border);
+    background: var(--dk-surface);
+    color: var(--dk-text-primary);
+    outline: none;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
+  .form-group input:focus, .form-group textarea:focus {
+    border-color: var(--focus-blue);
+    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
+  }
+  .form-group input.error { border-color: var(--posthog-orange); }
+  .form-group textarea { resize: vertical; min-height: 80px; }
+  .form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--mono); }
+  .form-error-text { font-size: 11px; color: var(--posthog-orange); }
+
+  /* SPACING */
+  .spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
+  .spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+  .spacing-box { background: var(--posthog-orange); border-radius: 2px; height: 40px; opacity: 0.6; }
+  .spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--mono); }
+
+  /* RADIUS */
+  .radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
+  .radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+  .radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
+  .radius-label { font-size: 12px; font-weight: 700; color: var(--dk-text-primary); font-family: var(--mono); }
+  .radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; }
+
+  /* ELEVATION */
+  .elevation-section {
+    background: var(--dk-surface);
+    border-radius: 6px;
+    padding: 40px;
+    border: 1px solid var(--dk-border);
+  }
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
+  .elevation-card {
+    background: var(--dk-surface-elevated);
+    border-radius: 6px;
+    padding: 24px;
+    min-height: 120px;
+  }
+  .elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 6px; }
+  .elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
+  .elev-flat { box-shadow: none; border: none; }
+  .elev-border { box-shadow: none; border: 1px solid var(--dk-border); }
+  .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); }
+  .elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.6); border: none; }
+
+  /* FOOTER */
+  footer {
+    text-align: center;
+    padding: 40px 32px;
+    border-top: 1px solid var(--dk-border);
+    font-size: 13px;
+    color: var(--dk-text-muted);
+  }
+
+  @media (max-width: 768px) {
+    nav { padding: 10px 16px; }
+    .nav-links { display: none; }
+    .hero { padding: 48px 16px 40px; }
+    .hero h1 { font-size: 24px; }
+    .section { padding: 40px 16px; }
+    .section-title { font-size: 20px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 20px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+    .dark-badge { top: 10px; right: 10px; font-size: 10px; }
+  }
+</style>
+</head>
+<body>
+
+<!-- DARK MODE BADGE -->
+<div class="dark-badge">Dark Mode</div>
+
+<!-- NAV -->
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get started - free</a>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-inner">
+    <h1>Design System Inspired by PostHog</h1>
+    <p class="subtitle">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.</p>
+    <div class="hero-buttons">
+      <button class="btn-light">Explore Tokens</button>
+      <button class="btn-outline-dk">View DESIGN.md</button>
+    </div>
+  </div>
+</section>
+
+<!-- 1. COLORS -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">PostHog's warm olive/sage palette on dark surfaces.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#4d4f46;"></div><div class="swatch-info"><div class="swatch-name">Olive Ink</div><div class="swatch-hex">#4d4f46</div><div class="swatch-role">Primary text color</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#23251d;"></div><div class="swatch-info"><div class="swatch-name">Deep Olive</div><div class="swatch-hex">#23251d</div><div class="swatch-role">Links and headings</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#F54E00;"></div><div class="swatch-info"><div class="swatch-name">PostHog Orange</div><div class="swatch-hex">#F54E00</div><div class="swatch-role">Hidden hover accent</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#F7A501;"></div><div class="swatch-info"><div class="swatch-name">Amber Gold</div><div class="swatch-hex">#F7A501</div><div class="swatch-role">Dark button hover accent</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#b17816;"></div><div class="swatch-info"><div class="swatch-name">Gold Border</div><div class="swatch-hex">#b17816</div><div class="swatch-role">Featured button borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#fdfdf8;"></div><div class="swatch-info"><div class="swatch-name">Warm Parchment</div><div class="swatch-hex">#fdfdf8</div><div class="swatch-role">Page background (light)</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#eeefe9;"></div><div class="swatch-info"><div class="swatch-name">Sage Cream</div><div class="swatch-hex">#eeefe9</div><div class="swatch-role">Input & secondary surfaces</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Light Sage</div><div class="swatch-hex">#e5e7e0</div><div class="swatch-role">Button backgrounds</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#d4c9b8;"></div><div class="swatch-info"><div class="swatch-name">Warm Tan</div><div class="swatch-hex">#d4c9b8</div><div class="swatch-role">Featured button background</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#f4f4f4;"></div><div class="swatch-info"><div class="swatch-name">Hover White</div><div class="swatch-hex">#f4f4f4</div><div class="swatch-role">Hover background state</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#65675e;"></div><div class="swatch-info"><div class="swatch-name">Muted Olive</div><div class="swatch-hex">#65675e</div><div class="swatch-role">Secondary text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#9ea096;"></div><div class="swatch-info"><div class="swatch-name">Sage Placeholder</div><div class="swatch-hex">#9ea096</div><div class="swatch-role">Placeholder text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#bfc1b7;"></div><div class="swatch-info"><div class="swatch-name">Sage Border</div><div class="swatch-hex">#bfc1b7</div><div class="swatch-role">Primary borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#b6b7af;"></div><div class="swatch-info"><div class="swatch-name">Light Border</div><div class="swatch-hex">#b6b7af</div><div class="swatch-role">Toolbar borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#1e1f23;"></div><div class="swatch-info"><div class="swatch-name">Near-Black</div><div class="swatch-hex">#1e1f23</div><div class="swatch-role">Dark CTA button</div></div></div>
+    </div>
+  </div>
+</section>
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">IBM Plex Sans Variable with bold headings and generous body line-heights.</p>
+
+  <div class="type-sample">
+    <div class="type-text" style="font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;">Display Hero</div>
+    <div class="type-label">Display Hero — 30px / 800 / 1.20 / -0.75px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:36px; font-weight:700; line-height:1.50;">Section Heading</div>
+    <div class="type-label">Section Heading — 36px / 700 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:24px; font-weight:700; line-height:1.33;">Feature Heading</div>
+    <div class="type-label">Feature Heading — 24px / 700 / 1.33 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;">Sub-heading</div>
+    <div class="type-label">Sub-heading — 20px / 700 / 1.40 / -0.5px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;">Sub-heading Uppercase</div>
+    <div class="type-label">Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:18px; font-weight:600; line-height:1.56;">Body Semi — Semi-bold body text for callouts and emphasis</div>
+    <div class="type-label">Body Semi — 18px / 600 / 1.56 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body — 16px / 400 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body Relaxed — 15px / 400 / 1.71 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:15px; font-weight:600; line-height:1.50;">Nav / UI Label</div>
+    <div class="type-label">Nav / UI — 15px / 600 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:600; line-height:1.43;">Caption Semi — Emphasized captions</div>
+    <div class="type-label">Caption Semi — 14px / 600 / 1.43 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:13px; font-weight:700; line-height:1.50;">Small Label Bold</div>
+    <div class="type-label">Small Label — 13px / 700 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;">Micro Uppercase</div>
+    <div class="type-label">Micro Uppercase — 12px / 700 / 1.33 / uppercase</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);">Code — Source Code Pro monospace</div>
+    <div class="type-label">Code — 14px / 500 / 1.43 / Source Code Pro</div>
+  </div>
+</section>
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Inverted for dark surfaces — orange hover flash preserved.</p>
+
+  <div class="button-grid">
+    <div class="button-item">
+      <button class="btn-dk-primary">Light Primary</button>
+      <span class="btn-label">#fdfdf8 / #23251d / 6px</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-dk-sage">Sage Outline</button>
+      <span class="btn-label">#252621 / border / 4px</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-dk-tan">Warm Tan</button>
+      <span class="btn-label">dark tan bg / tan text / 4px</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-dk-input">Input Style</button>
+      <span class="btn-label">dark surface / muted / 4px</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-dk-ghost">Ghost</button>
+      <span class="btn-label">transparent / secondary / 4px</span>
+    </div>
+  </div>
+</section>
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Dark surface cards with olive-tinted borders.</p>
+
+  <div class="card-grid">
+    <div class="card card-dk-bordered card-hover">
+      <h4>Bordered Card</h4>
+      <p class="card-desc">Dark surface with subtle olive border. Hover to see lift effect.</p>
+      <p class="card-label">bg: #1c1d1a / border: 1px #3a3b36 / radius: 6px</p>
+    </div>
+    <div class="card card-dk-elevated">
+      <h4>Elevated Card</h4>
+      <p class="card-desc">Slightly lighter surface for secondary content groupings.</p>
+      <p class="card-label">bg: #252621 / border: 1px #3a3b36 / radius: 6px</p>
+    </div>
+    <div class="card card-dk-shadow">
+      <h4>Deep Shadow Card</h4>
+      <p class="card-desc">Dramatic shadow for modals and floating elements on dark backgrounds.</p>
+      <p class="card-label">shadow: 0 25px 50px -12px rgba(0,0,0,0.5)</p>
+    </div>
+  </div>
+</section>
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Dark surface inputs with blue focus rings.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label>Default Input</label>
+      <input type="text" placeholder="Search or ask a question...">
+      <span class="form-hint">bg: #1c1d1a / border: #3a3b36 / radius: 4px</span>
+    </div>
+    <div class="form-group">
+      <label>Focus State</label>
+      <input type="text" placeholder="Focused input" style="border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
+      <span class="form-hint">focus: blue ring rgba(59,130,246,0.3)</span>
+    </div>
+    <div class="form-group">
+      <label>Error State</label>
+      <input type="text" class="error" placeholder="Invalid" value="bad input">
+      <span class="form-error-text">Validation error — PostHog Orange border</span>
+    </div>
+    <div class="form-group">
+      <label>Textarea</label>
+      <textarea placeholder="Type your message..."></textarea>
+      <span class="form-hint">Same styles as input, resizable</span>
+    </div>
+  </div>
+</section>
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base unit system.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:10px;"></div><span class="spacing-label">10</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:18px;"></div><span class="spacing-label">18</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:32px;"></div><span class="spacing-label">32</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:34px;"></div><span class="spacing-label">34</span></div>
+  </div>
+</section>
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Tight and functional — 2px to pill (9999px).</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:2px;"></div>
+      <span class="radius-label">2px</span>
+      <span class="radius-context">Tags, inline</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:4px;"></div>
+      <span class="radius-label">4px</span>
+      <span class="radius-context">Buttons, inputs</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:6px;"></div>
+      <span class="radius-label">6px</span>
+      <span class="radius-context">Cards, containers</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div>
+      <span class="radius-label">9999px</span>
+      <span class="radius-context">Pill badges</span>
+    </div>
+  </div>
+</section>
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Minimal shadows — borders and surface colors do the heavy lifting.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat">
+        <h4>Level 0 — Flat</h4>
+        <p>No shadow, dark surface. Default canvas for most elements.</p>
+      </div>
+      <div class="elevation-card elev-border">
+        <h4>Level 1 — Border</h4>
+        <p>1px solid olive-tinted border. Card containment and dividers.</p>
+      </div>
+      <div class="elevation-card elev-compound">
+        <h4>Level 2 — Compound</h4>
+        <p>Multiple borders on different sides. Toolbar and input groupings.</p>
+      </div>
+      <div class="elevation-card elev-deep">
+        <h4>Level 3 — Deep Shadow</h4>
+        <p>Dramatic shadow for modals, dropdowns, and floating elements.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  Generated from DESIGN.md — PostHog Design System Catalog (Dark Mode)
+</footer>
+
+</body>
+</html>

design-md/posthog/preview.html

@@ -0,0 +1,751 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by PostHog</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --olive-ink: #4d4f46;
+    --deep-olive: #23251d;
+    --posthog-orange: #F54E00;
+    --amber-gold: #F7A501;
+    --gold-border: #b17816;
+    --focus-blue: #3b82f6;
+    --warm-parchment: #fdfdf8;
+    --sage-cream: #eeefe9;
+    --light-sage: #e5e7e0;
+    --warm-tan: #d4c9b8;
+    --hover-white: #f4f4f4;
+    --muted-olive: #65675e;
+    --sage-placeholder: #9ea096;
+    --sage-border: #bfc1b7;
+    --light-border: #b6b7af;
+    --near-black: #1e1f23;
+    --dark-text: #111827;
+    --white: #ffffff;
+    --font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
+    --mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font);
+    background: var(--warm-parchment);
+    color: var(--olive-ink);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* NAV */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 32px;
+    background: var(--warm-parchment);
+    border-bottom: 1px solid var(--sage-border);
+  }
+  .nav-brand {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--deep-olive);
+    text-decoration: none;
+  }
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--olive-ink);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .nav-links a:hover { color: var(--posthog-orange); }
+  .nav-cta {
+    background: var(--near-black);
+    color: var(--white);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 700;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .nav-cta:hover { opacity: 0.7; }
+
+  /* HERO */
+  .hero {
+    background: var(--warm-parchment);
+    padding: 80px 32px 64px;
+    border-bottom: 1px solid var(--sage-border);
+  }
+  .hero-inner {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .hero h1 {
+    font-size: 30px;
+    font-weight: 800;
+    line-height: 1.20;
+    letter-spacing: -0.75px;
+    color: var(--deep-olive);
+    margin-bottom: 16px;
+  }
+  .hero .subtitle {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.56;
+    color: var(--muted-olive);
+    margin-bottom: 32px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  .btn-dark {
+    background: var(--near-black);
+    color: var(--white);
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 700;
+    font-family: var(--font);
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .btn-dark:hover { opacity: 0.7; }
+  .btn-sage {
+    background: var(--light-sage);
+    color: var(--olive-ink);
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: var(--font);
+    text-decoration: none;
+    border: 1px solid var(--sage-border);
+    cursor: pointer;
+    transition: color 0.15s, background 0.15s;
+  }
+  .btn-sage:hover { color: var(--posthog-orange); background: var(--hover-white); }
+
+  /* SECTIONS */
+  .section {
+    padding: 64px 32px;
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+  .section-title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.33;
+    color: var(--deep-olive);
+    margin-bottom: 8px;
+  }
+  .section-subtitle {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.50;
+    color: var(--muted-olive);
+    margin-bottom: 40px;
+  }
+
+  /* COLORS */
+  .color-category { margin-bottom: 32px; }
+  .color-category h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--deep-olive);
+    margin-bottom: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 16px;
+  }
+  .color-swatch {
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--sage-border);
+    background: var(--white);
+  }
+  .swatch-color { height: 80px; width: 100%; }
+  .swatch-info { padding: 10px 12px; }
+  .swatch-name { font-size: 13px; font-weight: 700; color: var(--deep-olive); margin-bottom: 2px; }
+  .swatch-hex { font-size: 12px; font-weight: 500; color: var(--sage-placeholder); font-family: var(--mono); margin-bottom: 4px; }
+  .swatch-role { font-size: 11px; color: var(--muted-olive); line-height: 1.4; }
+
+  /* TYPOGRAPHY */
+  .type-sample {
+    padding: 20px 0;
+    border-bottom: 1px solid var(--sage-border);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text { color: var(--deep-olive); margin-bottom: 6px; }
+  .type-sample .type-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--posthog-orange);
+    font-family: var(--mono);
+    line-height: 1.4;
+  }
+
+  /* BUTTONS */
+  .button-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: flex-start;
+  }
+  .button-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .btn-label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--sage-placeholder);
+    font-family: var(--mono);
+  }
+  .btn-tan {
+    background: var(--warm-tan);
+    color: #000;
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+    font-family: var(--font);
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-tan:hover { color: var(--posthog-orange); }
+  .btn-ghost-parchment {
+    background: var(--warm-parchment);
+    color: var(--olive-ink);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-ghost-parchment:hover { color: var(--posthog-orange); }
+  .btn-input {
+    background: var(--sage-cream);
+    color: var(--sage-placeholder);
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: var(--font);
+    border: 1px solid var(--light-border);
+    cursor: pointer;
+    transition: color 0.15s;
+  }
+  .btn-input:hover { color: var(--posthog-orange); }
+
+  /* CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  .card {
+    border-radius: 6px;
+    padding: 24px;
+    transition: transform 0.15s;
+  }
+  .card-bordered {
+    background: var(--white);
+    border: 1px solid var(--sage-border);
+  }
+  .card-sage {
+    background: var(--sage-cream);
+    border: 1px solid var(--sage-border);
+  }
+  .card-shadow {
+    background: var(--white);
+    border: 1px solid var(--sage-border);
+    box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);
+  }
+  .card-hover:hover { transform: translateY(-2px); }
+  .card h4 {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--deep-olive);
+    margin-bottom: 8px;
+    line-height: 1.40;
+  }
+  .card .card-desc {
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.71;
+    color: var(--muted-olive);
+  }
+  .card .card-label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--posthog-orange);
+    font-family: var(--mono);
+    margin-top: 12px;
+  }
+
+  /* FORMS */
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-group label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--deep-olive);
+  }
+  .form-group input,
+  .form-group textarea {
+    font-family: var(--font);
+    font-size: 15px;
+    font-weight: 400;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--light-border);
+    background: var(--sage-cream);
+    color: var(--deep-olive);
+    outline: none;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .form-group input::placeholder,
+  .form-group textarea::placeholder { color: var(--sage-placeholder); }
+  .form-group input:focus,
+  .form-group textarea:focus {
+    border-color: var(--focus-blue);
+    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
+  }
+  .form-group input.error { border-color: var(--posthog-orange); }
+  .form-group textarea { resize: vertical; min-height: 80px; }
+  .form-hint { font-size: 11px; color: var(--sage-placeholder); font-family: var(--mono); }
+  .form-error-text { font-size: 11px; color: var(--posthog-orange); }
+
+  /* SPACING */
+  .spacing-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: flex-end;
+  }
+  .spacing-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+  .spacing-box {
+    background: var(--posthog-orange);
+    border-radius: 2px;
+    height: 40px;
+    opacity: 0.7;
+  }
+  .spacing-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--muted-olive);
+    font-family: var(--mono);
+  }
+
+  /* RADIUS */
+  .radius-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: center;
+  }
+  .radius-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  .radius-box {
+    width: 80px;
+    height: 80px;
+    background: var(--light-sage);
+    border: 1px solid var(--sage-border);
+  }
+  .radius-label { font-size: 12px; font-weight: 700; color: var(--deep-olive); font-family: var(--mono); }
+  .radius-context { font-size: 10px; color: var(--sage-placeholder); text-align: center; }
+
+  /* ELEVATION */
+  .elevation-section {
+    background: var(--sage-cream);
+    border-radius: 6px;
+    padding: 40px;
+    border: 1px solid var(--sage-border);
+  }
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+  }
+  .elevation-card {
+    background: var(--white);
+    border-radius: 6px;
+    padding: 24px;
+    min-height: 120px;
+  }
+  .elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--deep-olive); margin-bottom: 6px; }
+  .elevation-card p { font-size: 12px; color: var(--muted-olive); line-height: 1.5; }
+  .elev-flat { box-shadow: none; border: none; }
+  .elev-border { box-shadow: none; border: 1px solid var(--sage-border); }
+  .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); }
+  .elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25); border: none; }
+
+  /* FOOTER */
+  footer {
+    text-align: center;
+    padding: 40px 32px;
+    border-top: 1px solid var(--sage-border);
+    font-size: 13px;
+    color: var(--sage-placeholder);
+  }
+
+  @media (max-width: 768px) {
+    nav { padding: 10px 16px; }
+    .nav-links { display: none; }
+    .hero { padding: 48px 16px 40px; }
+    .hero h1 { font-size: 24px; }
+    .section { padding: 40px 16px; }
+    .section-title { font-size: 20px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 20px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get started - free</a>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-inner">
+    <h1>Design System Inspired by PostHog</h1>
+    <p class="subtitle">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.</p>
+    <div class="hero-buttons">
+      <button class="btn-dark">Explore Tokens</button>
+      <button class="btn-sage">View DESIGN.md</button>
+    </div>
+  </div>
+</section>
+
+<!-- 1. COLORS -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">PostHog's warm olive/sage palette — no blues, no purples, just earthy warmth.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#4d4f46;"></div><div class="swatch-info"><div class="swatch-name">Olive Ink</div><div class="swatch-hex">#4d4f46</div><div class="swatch-role">Primary text color</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#23251d;"></div><div class="swatch-info"><div class="swatch-name">Deep Olive</div><div class="swatch-hex">#23251d</div><div class="swatch-role">Links and headings</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#F54E00;"></div><div class="swatch-info"><div class="swatch-name">PostHog Orange</div><div class="swatch-hex">#F54E00</div><div class="swatch-role">Hidden hover accent</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#F7A501;"></div><div class="swatch-info"><div class="swatch-name">Amber Gold</div><div class="swatch-hex">#F7A501</div><div class="swatch-role">Dark button hover accent</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#b17816;"></div><div class="swatch-info"><div class="swatch-name">Gold Border</div><div class="swatch-hex">#b17816</div><div class="swatch-role">Featured button borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#fdfdf8; border-bottom: 1px solid #e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Warm Parchment</div><div class="swatch-hex">#fdfdf8</div><div class="swatch-role">Page background</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#eeefe9;"></div><div class="swatch-info"><div class="swatch-name">Sage Cream</div><div class="swatch-hex">#eeefe9</div><div class="swatch-role">Input & secondary surfaces</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Light Sage</div><div class="swatch-hex">#e5e7e0</div><div class="swatch-role">Button backgrounds</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#d4c9b8;"></div><div class="swatch-info"><div class="swatch-name">Warm Tan</div><div class="swatch-hex">#d4c9b8</div><div class="swatch-role">Featured button background</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#f4f4f4;"></div><div class="swatch-info"><div class="swatch-name">Hover White</div><div class="swatch-hex">#f4f4f4</div><div class="swatch-role">Hover background state</div></div></div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch"><div class="swatch-color" style="background:#65675e;"></div><div class="swatch-info"><div class="swatch-name">Muted Olive</div><div class="swatch-hex">#65675e</div><div class="swatch-role">Secondary text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#9ea096;"></div><div class="swatch-info"><div class="swatch-name">Sage Placeholder</div><div class="swatch-hex">#9ea096</div><div class="swatch-role">Placeholder text</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#bfc1b7;"></div><div class="swatch-info"><div class="swatch-name">Sage Border</div><div class="swatch-hex">#bfc1b7</div><div class="swatch-role">Primary borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#b6b7af;"></div><div class="swatch-info"><div class="swatch-name">Light Border</div><div class="swatch-hex">#b6b7af</div><div class="swatch-role">Toolbar borders</div></div></div>
+      <div class="color-swatch"><div class="swatch-color" style="background:#1e1f23;"></div><div class="swatch-info"><div class="swatch-name">Near-Black</div><div class="swatch-hex">#1e1f23</div><div class="swatch-role">Dark CTA button</div></div></div>
+    </div>
+  </div>
+</section>
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">IBM Plex Sans Variable with bold headings and generous body line-heights.</p>
+
+  <div class="type-sample">
+    <div class="type-text" style="font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;">Display Hero</div>
+    <div class="type-label">Display Hero — 30px / 800 / 1.20 / -0.75px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:36px; font-weight:700; line-height:1.50;">Section Heading</div>
+    <div class="type-label">Section Heading — 36px / 700 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:24px; font-weight:700; line-height:1.33;">Feature Heading</div>
+    <div class="type-label">Feature Heading — 24px / 700 / 1.33 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;">Sub-heading</div>
+    <div class="type-label">Sub-heading — 20px / 700 / 1.40 / -0.5px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;">Sub-heading Uppercase</div>
+    <div class="type-label">Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:18px; font-weight:600; line-height:1.56;">Body Semi — Semi-bold body text for callouts and emphasis</div>
+    <div class="type-label">Body Semi — 18px / 600 / 1.56 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body — 16px / 400 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body Relaxed — 15px / 400 / 1.71 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:15px; font-weight:600; line-height:1.50;">Nav / UI Label</div>
+    <div class="type-label">Nav / UI — 15px / 600 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:600; line-height:1.43;">Caption Semi — Emphasized captions</div>
+    <div class="type-label">Caption Semi — 14px / 600 / 1.43 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:13px; font-weight:700; line-height:1.50;">Small Label Bold</div>
+    <div class="type-label">Small Label — 13px / 700 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;">Micro Uppercase</div>
+    <div class="type-label">Micro Uppercase — 12px / 700 / 1.33 / uppercase</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);">Code — Source Code Pro monospace</div>
+    <div class="type-label">Code — 14px / 500 / 1.43 / Source Code Pro</div>
+  </div>
+</section>
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">All buttons flash PostHog Orange on hover — the brand's signature surprise.</p>
+
+  <div class="button-grid">
+    <div class="button-item">
+      <button class="btn-dark">Dark Primary</button>
+      <span class="btn-label">#1e1f23 / white / 6px / opacity hover</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-sage">Sage Light</button>
+      <span class="btn-label">#e5e7e0 / #4d4f46 / 4px / orange hover</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-tan">Warm Tan</button>
+      <span class="btn-label">#d4c9b8 / black / 4px / featured</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-input">Input Style</button>
+      <span class="btn-label">#eeefe9 / #9ea096 / 4px / bordered</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-ghost-parchment">Ghost</button>
+      <span class="btn-label">#fdfdf8 / #4d4f46 / 4px / minimal</span>
+    </div>
+  </div>
+</section>
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Bordered, sage-surface, and deep-shadow card variants.</p>
+
+  <div class="card-grid">
+    <div class="card card-bordered card-hover">
+      <h4>Bordered Card</h4>
+      <p class="card-desc">White background with sage border. Hover to see lift. The standard container pattern.</p>
+      <p class="card-label">bg: #fff / border: 1px #bfc1b7 / radius: 6px</p>
+    </div>
+    <div class="card card-sage">
+      <h4>Sage Surface Card</h4>
+      <p class="card-desc">Sage cream background for secondary content areas and grouped information.</p>
+      <p class="card-label">bg: #eeefe9 / border: 1px #bfc1b7 / radius: 6px</p>
+    </div>
+    <div class="card card-shadow">
+      <h4>Deep Shadow Card</h4>
+      <p class="card-desc">The single dramatic shadow — reserved for modals, dropdowns, and floating elements.</p>
+      <p class="card-label">shadow: 0 25px 50px -12px rgba(0,0,0,0.25)</p>
+    </div>
+  </div>
+</section>
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Sage-tinted inputs with blue focus rings.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label>Default Input</label>
+      <input type="text" placeholder="Search or ask a question...">
+      <span class="form-hint">bg: #eeefe9 / border: #b6b7af / radius: 4px</span>
+    </div>
+    <div class="form-group">
+      <label>Focus State</label>
+      <input type="text" placeholder="Focused input" style="border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
+      <span class="form-hint">focus: blue ring rgba(59,130,246,0.3)</span>
+    </div>
+    <div class="form-group">
+      <label>Error State</label>
+      <input type="text" class="error" placeholder="Invalid" value="bad input">
+      <span class="form-error-text">Validation error — border turns PostHog Orange</span>
+    </div>
+    <div class="form-group">
+      <label>Textarea</label>
+      <textarea placeholder="Type your message..."></textarea>
+      <span class="form-hint">Same styles as input, resizable</span>
+    </div>
+  </div>
+</section>
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base unit system.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:10px;"></div><span class="spacing-label">10</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:18px;"></div><span class="spacing-label">18</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:32px;"></div><span class="spacing-label">32</span></div>
+    <div class="spacing-item"><div class="spacing-box" style="width:34px;"></div><span class="spacing-label">34</span></div>
+  </div>
+</section>
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Tight and functional — 2px to pill (9999px).</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:2px;"></div>
+      <span class="radius-label">2px</span>
+      <span class="radius-context">Tags, inline</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:4px;"></div>
+      <span class="radius-label">4px</span>
+      <span class="radius-context">Buttons, inputs</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:6px;"></div>
+      <span class="radius-label">6px</span>
+      <span class="radius-context">Cards, containers</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div>
+      <span class="radius-label">9999px</span>
+      <span class="radius-context">Pill badges</span>
+    </div>
+  </div>
+</section>
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Minimal shadows — borders and surface colors do the heavy lifting.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat">
+        <h4>Level 0 — Flat</h4>
+        <p>No shadow, warm parchment background. The default for most surfaces.</p>
+      </div>
+      <div class="elevation-card elev-border">
+        <h4>Level 1 — Border</h4>
+        <p>1px solid Sage Border (#bfc1b7). Card containment, input borders, section dividers.</p>
+      </div>
+      <div class="elevation-card elev-compound">
+        <h4>Level 2 — Compound</h4>
+        <p>Multiple 1px borders on different sides. Input groupings and toolbar elements.</p>
+      </div>
+      <div class="elevation-card elev-deep">
+        <h4>Level 3 — Deep Shadow</h4>
+        <p>0px 25px 50px -12px rgba(0,0,0,0.25). Reserved for modals, dropdowns, floating elements.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  Generated from DESIGN.md — PostHog Design System Catalog
+</footer>
+
+</body>
+</html>

design-md/raycast/DESIGN.md

@@ -0,0 +1,268 @@
+# Design System: Raycast
+
+## 1. Visual Theme & Atmosphere
+
+Raycast'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.
+
+The 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.
+
+Inter 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.
+
+**Key Characteristics:**
+- Near-black blue-tinted background (`#07080a`) — not pure black, subtly blue-shifted
+- macOS-native shadow system with multi-layer inset highlights simulating physical depth
+- Raycast Red (`#FF6363`) as a punctuation color — hero stripes, not pervasive
+- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience
+- Radix UI component primitives powering the interaction layer
+- Subtle rgba white borders (0.06–0.1 opacity) for containment on dark surfaces
+- Keyboard shortcut styling with gradient key caps and heavy shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near-Black Blue** (`#07080a`): Primary page background — the foundational void with a subtle blue-cold undertone
+- **Pure White** (`#ffffff`): Primary heading text, high-emphasis elements
+- **Raycast Red** (`#FF6363` / `hsl(0, 100%, 69%)`): Brand accent — hero stripes, danger states, critical highlights
+
+### Secondary & Accent
+- **Raycast Blue** (`hsl(202, 100%, 67%)` / ~`#55b3ff`): Interactive accent — links, focus states, selected items
+- **Raycast Green** (`hsl(151, 59%, 59%)` / ~`#5fc992`): Success states, positive indicators
+- **Raycast Yellow** (`hsl(43, 100%, 60%)` / ~`#ffbc33`): Warning accents, highlights
+- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`): Blue tint overlay for interactive surfaces
+- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`): Red tint overlay for danger/error surfaces
+
+### Surface & Background
+- **Deep Background** (`#07080a`): Page canvas, the darkest surface
+- **Surface 100** (`#101111`): Elevated surface, card backgrounds
+- **Key Start** (`#121212`): Keyboard key gradient start
+- **Key End** (`#0d0d0d`): Keyboard key gradient end
+- **Card Surface** (`#1b1c1e`): Badge backgrounds, tag fills, elevated containers
+- **Button Foreground** (`#18191a`): Dark surface for button text on light backgrounds
+
+### Neutrals & Text
+- **Near White** (`#f9f9f9` / `hsl(240, 11%, 96%)`): Primary body text, high-emphasis content
+- **Light Gray** (`#cecece` / `#cdcdce`): Secondary body text, descriptions
+- **Silver** (`#c0c0c0`): Tertiary text, subdued labels
+- **Medium Gray** (`#9c9c9d`): Link default color, secondary navigation
+- **Dim Gray** (`#6a6b6c`): Disabled text, low-emphasis labels
+- **Dark Gray** (`#434345`): Muted borders, inactive navigation links
+- **Border** (`hsl(195, 5%, 15%)` / ~`#252829`): Standard border color for cards and dividers
+- **Dark Border** (`#2f3031`): Separator lines, table borders
+
+### Semantic & Accent
+- **Error Red** (`hsl(0, 100%, 69%)`): Error states, destructive actions
+- **Success Green** (`hsl(151, 59%, 59%)`): Success confirmations, positive states
+- **Warning Yellow** (`hsl(43, 100%, 60%)`): Warnings, attention-needed states
+- **Info Blue** (`hsl(202, 100%, 67%)`): Informational highlights, links
+
+### Gradient System
+- **Keyboard Key Gradient**: Linear gradient from `#121212` (top) to `#0d0d0d` (bottom) — simulates physical key depth
+- **Warm Glow**: `rgba(215, 201, 175, 0.05)` radial spread — subtle warm ambient glow behind featured elements
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` — humanist sans-serif, used everywhere. Fallbacks: `Inter Fallback`, system sans-serif
+- **System**: `SF Pro Text` — Apple system font for select macOS-native UI elements. Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`
+- **Monospace**: `GeistMono` — Vercel's monospace font for code elements. Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`
+- **OpenType features**: `calt`, `kern`, `liga`, `ss03` enabled globally; `ss02`, `ss08` on display text; `liga` disabled (`"liga" 0`) on hero headings
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |
+| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |
+| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |
+| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |
+| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |
+| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |
+| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |
+| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |
+| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |
+| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |
+| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |
+| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |
+| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |
+
+### Principles
+- **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
+- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) — subtle extra heft improves legibility on dark surfaces
+- **Display restraint**: Hero text at 64px/600 is confident but not oversized — Raycast avoids typographic spectacle in favor of functional elegance
+- **OpenType everywhere**: `ss03` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality
+
+## 4. Component Stylings
+
+### Buttons
+- **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
+- **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
+- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white
+- **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%)`)
+- **Transition**: All buttons use opacity transition for hover rather than background-color change — a signature Raycast interaction pattern
+
+### Cards & Containers
+- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px–16px border-radius
+- **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
+- **Feature Card**: 16px–20px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements
+- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement
+
+### Inputs & Forms
+- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius
+- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears
+- Text: `#f9f9f9` input color, `#6a6b6c` placeholder
+- Labels: `#9c9c9d` at 14px weight 500
+
+### Navigation
+- **Top nav**: Dark background blending with page, white text links at 16px weight 500
+- **Nav links**: Gray text (`#9c9c9d`) → white on hover, underline decoration on hover
+- **CTA button**: Semi-transparent white pill at nav end
+- **Mobile**: Collapses to hamburger, maintains dark theme
+- **Sticky**: Nav fixed at top with subtle border separator
+
+### Image Treatment
+- **Product screenshots**: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows
+- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background
+- **Hero illustration**: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining
+- **App UI embeds**: Showing actual Raycast command palette and extensions — product as content
+
+### Keyboard Shortcut Keys
+- **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
+- Border-radius: 4px–6px for individual keys
+
+### Badges & Tags
+- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding
+- Compact, pill-like treatment for categorization
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px
+- **Section padding**: 80px–120px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container (breakpoint at 1204px), centered
+- **Column patterns**: Single-column hero, 2–3 column feature grids, full-width showcase sections
+- **App showcase**: Product UI presented in centered window frames
+
+### Whitespace Philosophy
+- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features
+- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing
+- **Vertical rhythm**: Consistent 24px–32px gaps between elements within sections
+
+### Border Radius Scale
+- **2px–3px**: Micro-elements, code spans, tiny indicators
+- **4px–5px**: Keyboard keys, small interactive elements
+- **6px**: Buttons, badges, tags — the workhorse radius
+- **8px**: Input fields, inline components
+- **9px–11px**: Images, medium containers
+- **12px**: Standard cards, product screenshots
+- **16px**: Large cards, feature sections
+- **20px**: Hero cards, prominent containers
+- **86px+**: Pill buttons, nav CTAs — full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Void) | No shadow, `#07080a` surface | Page background |
+| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | Minimal lift, inline elements |
+| 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 |
+| 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 |
+| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps — physical 3D appearance |
+| 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 |
+
+### Shadow Philosophy
+Raycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:
+- **Outer rings** for containment (replacing traditional borders)
+- **Inset top highlights** (`rgba(255, 255, 255, 0.05–0.25)`) simulating light source from above
+- **Inset bottom darks** (`rgba(0, 0, 0, 0.2)`) simulating shadow underneath
+- The effect is physical: elements feel like glass or brushed metal, not flat rectangles
+
+### Decorative Depth
+- **Warm glow**: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` behind featured elements — a subtle warm aura on the cold dark canvas
+- **Blue info glow**: `rgba(0, 153, 255, 0.15)` for interactive state emphasis
+- **Red danger glow**: `rgba(255, 99, 99, 0.15)` for error/destructive state emphasis
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#07080a` (not pure black) as the background — the blue-cold tint is essential to the Raycast feel
+- Apply positive letter-spacing (+0.2px) on body text — this is deliberately different from most dark UIs
+- Use multi-layer shadows with inset highlights for interactive elements — the macOS-native depth is signature
+- Keep Raycast Red (`#FF6363`) as punctuation, not pervasive — reserve it for hero moments and error states
+- Use `rgba(255, 255, 255, 0.06)` borders for card containment — barely visible, structurally essential
+- Apply weight 500 as the body text baseline — medium weight improves dark-mode legibility
+- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px–8px) for secondary actions
+- Enable OpenType features `calt`, `kern`, `liga`, `ss03` on all Inter text
+- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes
+
+### Don't
+- Use pure black (`#000000`) as the background — the blue tint differentiates Raycast from generic dark themes
+- Apply negative letter-spacing on body text — Raycast deliberately uses positive spacing for readability
+- Use Raycast Blue as the primary accent for everything — blue is for interactive/info, red is the brand color
+- Create single-layer flat shadows — the multi-layer inset system is core to the macOS-native aesthetic
+- Use regular weight (400) for body text when 500 is available — the extra weight prevents dark-mode text from feeling thin
+- Mix warm and cool borders — stick to the cool gray (`hsl(195, 5%, 15%)`) border palette
+- Apply heavy drop shadows without inset companions — shadows always come in pairs (outer + inset)
+- Use decorative elements, gradients, or colorful backgrounds — the dark void is the stage, content is the performer
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |
+| Small Tablet | 600px–768px | 2-column grid begins, nav partially visible |
+| Tablet | 768px–1024px | 2–3 column features, nav expanding, screenshots scale |
+| Desktop | 1024px–1200px | Full layout, all nav links visible, 64px hero display |
+| Large Desktop | >1200px | Max-width container centered, generous side margins |
+
+### Touch Targets
+- Pill buttons: 86px radius with 20px padding — well above 44px minimum
+- Secondary buttons: 8px padding minimum, but border provides visual target expansion
+- Nav links: 16px text with surrounding padding for accessible touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger at mobile with slide-out menu
+- **Hero**: 64px display → 48px → 36px across breakpoints
+- **Feature grids**: 3-column → 2-column → single-column stack
+- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions
+- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant
+
+### Image Behavior
+- Product screenshots scale responsively within fixed-ratio containers
+- Hero diagonal stripe pattern scales proportionally
+- macOS window chrome rounded corners maintained at all sizes
+- No lazy-loading artifacts — images are critical to the product narrative
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Near-Black Blue (`#07080a`)
+- Primary Text: Near White (`#f9f9f9`)
+- Brand Accent: Raycast Red (`#FF6363`)
+- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` / ~`#55b3ff`)
+- Secondary Text: Medium Gray (`#9c9c9d`)
+- Card Surface: Surface 100 (`#101111`)
+- Border: Dark Border (`hsl(195, 5%, 15%)` / ~`#252829`)
+
+### Example Component Prompts
+- "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)"
+- "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"
+- "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"
+- "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"
+- "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"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Check the background is `#07080a` not pure black — the blue tint is critical
+2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic
+3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong
+4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled
+5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern

design-md/raycast/README.md

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

design-md/raycast/preview-dark.html

@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Raycast — Dark Mode</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #040506;
+    --bg-100: #0c0d0e;
+    --bg-card: #151617;
+    --white: #ffffff;
+    --fg: #f4f4f6;
+    --light-gray: #c8c8ca;
+    --silver: #b0b0b2;
+    --med-gray: #8e8e90;
+    --dim-gray: #5e5f61;
+    --dark-gray: #3a3b3d;
+    --border: #1e1f21;
+    --dark-border: #262728;
+    --button-fg: #121314;
+    --red: #ff6363;
+    --blue: #55b3ff;
+    --green: #5fc992;
+    --yellow: #ffbc33;
+    --red-t: rgba(255, 99, 99, 0.15);
+    --blue-t: rgba(85, 179, 255, 0.15);
+    --border-subtle: rgba(255, 255, 255, 0.04);
+    --border-med: rgba(255, 255, 255, 0.08);
+    --button-bg: hsla(0, 0%, 100%, 0.815);
+    --shadow-ring: rgb(22, 23, 25) 0px 0px 0px 1px, rgb(4, 5, 6) 0px 0px 0px 1px inset;
+    --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;
+    --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;
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--fg);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: "calt", "kern", "liga", "ss03";
+  }
+
+  .dark-badge {
+    position: fixed; top: 14px; right: 14px; z-index: 200;
+    background: var(--white); color: var(--bg);
+    padding: 5px 12px; border-radius: 86px;
+    font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
+  }
+
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 32px;
+    background: rgba(4, 5, 6, 0.9);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .nav-brand { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: 0.2px; }
+  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
+  .nav-links a {
+    color: var(--med-gray); text-decoration: none; font-size: 14px; font-weight: 500;
+    letter-spacing: 0.2px; transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--white); }
+  .nav-cta {
+    background: var(--button-bg); color: var(--button-fg) !important;
+    padding: 8px 20px; border-radius: 86px; font-weight: 600; font-size: 14px;
+    transition: background 0.2s; letter-spacing: 0.2px;
+  }
+  .nav-cta:hover { background: var(--white); }
+
+  .hero {
+    padding: 120px 32px 100px; text-align: center;
+    max-width: 1200px; margin: 0 auto;
+    position: relative; overflow: hidden;
+  }
+  .hero::before {
+    content: '';
+    position: absolute; top: -40px; right: -60px;
+    width: 400px; height: 400px;
+    background: repeating-linear-gradient(-45deg, var(--red) 0px, var(--red) 18px, transparent 18px, transparent 36px);
+    opacity: 0.1; filter: blur(1px);
+    border-radius: 20px; transform: rotate(12deg);
+  }
+  .hero h1 {
+    font-size: 72px; font-weight: 600; letter-spacing: 0px; line-height: 1.1;
+    color: var(--white); margin-bottom: 20px; position: relative;
+    font-feature-settings: 'liga' 0, 'ss02', 'ss08';
+  }
+  .hero .subtitle {
+    font-size: 18px; color: var(--med-gray); letter-spacing: 0.2px;
+    line-height: 1.5; max-width: 520px; margin: 0 auto 40px; position: relative;
+  }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
+
+  .btn-primary {
+    display: inline-flex; align-items: center;
+    background: var(--button-bg); color: var(--button-fg);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 600; text-decoration: none;
+    border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s;
+    letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-primary:hover { background: var(--white); }
+  .btn-secondary {
+    display: inline-flex; align-items: center;
+    background: transparent; color: var(--white);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 500; text-decoration: none;
+    border: 1px solid var(--border-med); cursor: pointer;
+    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-secondary:hover { opacity: 0.6; }
+
+  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
+  .section-title {
+    font-size: 44px; font-weight: 600; letter-spacing: 0px; line-height: 1.1; margin-bottom: 12px;
+    font-feature-settings: 'liga' 0, 'ss02', 'ss08';
+  }
+  .section-desc { font-size: 16px; color: var(--med-gray); margin-bottom: 48px; letter-spacing: 0.2px; }
+  .section-divider {
+    border: none; border-top: 1px solid var(--border-subtle);
+    max-width: 1136px; margin: 0 auto;
+  }
+
+  .color-group { margin-bottom: 40px; }
+  .color-group-title {
+    font-size: 12px; font-weight: 600; color: var(--dim-gray);
+    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 16px;
+  }
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
+  .color-swatch {
+    border-radius: 12px; overflow: hidden;
+    background: var(--bg-100); box-shadow: var(--shadow-ring);
+  }
+  .color-swatch-preview { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 10px 12px; }
+  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0.1px; }
+  .color-swatch-hex { font-size: 11px; color: var(--dim-gray); font-family: var(--font-mono); letter-spacing: 0.2px; }
+  .color-swatch-role { font-size: 11px; color: var(--med-gray); margin-top: 3px; line-height: 1.4; }
+
+  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label { font-size: 11px; color: var(--blue); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
+  .type-spec { font-size: 12px; color: var(--dim-gray); margin-top: 8px; letter-spacing: 0.2px; }
+
+  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
+  .btn-ghost {
+    background: transparent; color: var(--dim-gray);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 500; border: none; cursor: pointer;
+    box-shadow: var(--shadow-button); transition: opacity 0.2s;
+    letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-ghost:hover { opacity: 0.6; }
+  .btn-rect {
+    background: transparent; color: var(--white);
+    padding: 10px 20px; border-radius: 6px;
+    font-size: 14px; font-weight: 500;
+    border: 1px solid var(--border-med); cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 7px 3px 0px, rgba(0, 0, 0, 0.3) 0px 4px 4px 0px;
+    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-rect:hover { opacity: 0.6; }
+  .btn-label { display: block; font-size: 11px; color: var(--dim-gray); margin-top: 8px; text-align: center; letter-spacing: 0.2px; }
+  .btn-item { text-align: center; }
+
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+  .card {
+    background: var(--bg-100); border-radius: 16px; padding: 28px;
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-ring); transition: border-color 0.3s;
+  }
+  .card:hover { border-color: rgba(255, 255, 255, 0.1); }
+  .card-float { box-shadow: var(--shadow-float); border: none; }
+  .card-title { font-size: 20px; font-weight: 600; letter-spacing: 0px; margin-bottom: 8px; line-height: 1.2; }
+  .card-text { font-size: 14px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }
+  .card-tag {
+    display: inline-block; padding: 2px 8px;
+    background: var(--bg-card); border-radius: 6px;
+    font-size: 12px; font-weight: 600; color: var(--light-gray);
+    margin-bottom: 12px; letter-spacing: 0.1px;
+  }
+
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label { font-size: 14px; font-weight: 500; color: var(--med-gray); letter-spacing: 0.2px; }
+  .form-input {
+    background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px; padding: 12px 14px; color: var(--fg);
+    font-size: 14px; font-family: var(--font); outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s; letter-spacing: 0.2px;
+  }
+  .form-input::placeholder { color: var(--dim-gray); }
+  .form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t); }
+  .form-input-error { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-t); }
+  .form-error-text { font-size: 12px; color: var(--red); letter-spacing: 0.2px; }
+  textarea.form-input { min-height: 100px; resize: vertical; }
+
+  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
+  .spacing-box { height: 28px; background: var(--blue); border-radius: 4px; opacity: 0.4; }
+  .spacing-label { font-size: 12px; color: var(--dim-gray); min-width: 50px; text-align: right; letter-spacing: 0.2px; }
+
+  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 64px; height: 64px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-subtle); margin-bottom: 8px;
+  }
+  .radius-value { font-size: 11px; color: var(--dim-gray); letter-spacing: 0.2px; }
+  .radius-context { font-size: 10px; color: var(--dark-gray); margin-top: 2px; }
+
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
+  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-100); min-height: 110px; }
+  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.1px; }
+  .elevation-desc { font-size: 12px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }
+
+  .footer {
+    text-align: center; padding: 48px 32px;
+    border-top: 1px solid var(--border-subtle); margin-top: 40px;
+  }
+  .footer p { font-size: 13px; color: var(--dim-gray); letter-spacing: 0.2px; }
+  .footer a { color: var(--blue); text-decoration: none; }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 44px; }
+    .hero .subtitle { font-size: 16px; }
+    .section-title { font-size: 32px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+    .hero::before { width: 250px; height: 250px; top: -20px; right: -40px; }
+  }
+</style>
+</head>
+<body>
+
+<div class="dark-badge">Dark Mode</div>
+
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Download</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <h1>Design System<br>Inspired by Raycast</h1>
+  <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Raycast's marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Near-black blue-tinted backgrounds, precision grays, and bold semantic accents.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #07080a; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near-Black Blue</div>
+          <div class="color-swatch-hex">#07080a</div>
+          <div class="color-swatch-role">Page background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #f9f9f9;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near White</div>
+          <div class="color-swatch-hex">#f9f9f9</div>
+          <div class="color-swatch-role">Primary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ff6363;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Red</div>
+          <div class="color-swatch-hex">#ff6363</div>
+          <div class="color-swatch-role">Brand accent, hero stripes</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Secondary & Semantic</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #55b3ff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Blue</div>
+          <div class="color-swatch-hex">#55b3ff</div>
+          <div class="color-swatch-role">Links, interactive accent</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #5fc992;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Green</div>
+          <div class="color-swatch-hex">#5fc992</div>
+          <div class="color-swatch-role">Success states</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ffbc33;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Yellow</div>
+          <div class="color-swatch-hex">#ffbc33</div>
+          <div class="color-swatch-role">Warning, highlights</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #101111; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Surface 100</div>
+          <div class="color-swatch-hex">#101111</div>
+          <div class="color-swatch-role">Card backgrounds</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #1b1c1e; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Card Surface</div>
+          <div class="color-swatch-hex">#1b1c1e</div>
+          <div class="color-swatch-role">Badge fills, containers</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: hsla(0,0%,100%,0.815);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Button White</div>
+          <div class="color-swatch-hex">hsla(0,0%,100%,0.815)</div>
+          <div class="color-swatch-role">Primary CTA background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #cecece;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Light Gray</div>
+          <div class="color-swatch-hex">#cecece</div>
+          <div class="color-swatch-role">Secondary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #9c9c9d;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Medium Gray</div>
+          <div class="color-swatch-hex">#9c9c9d</div>
+          <div class="color-swatch-role">Links, nav, descriptions</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #6a6b6c;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Dim Gray</div>
+          <div class="color-swatch-hex">#6a6b6c</div>
+          <div class="color-swatch-role">Disabled, low-emphasis</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #434345;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Dark Gray</div>
+          <div class="color-swatch-hex">#434345</div>
+          <div class="color-swatch-role">Muted borders</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #252829; border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Border</div>
+          <div class="color-swatch-hex">#252829</div>
+          <div class="color-swatch-role">Card borders, dividers</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">Inter with positive letter-spacing for airy dark-mode readability. GeistMono for code.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 64px / 600 / 1.10 / 0px</div>
+    <div style="font-size: 64px; font-weight: 600; line-height: 1.1; font-feature-settings: 'liga' 0, 'ss02', 'ss08';">Your shortcut to everything</div>
+    <div class="type-spec">Inter — OpenType: liga 0, ss02, ss08</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 56px / 400 / 1.17 / +0.2px</div>
+    <div style="font-size: 48px; font-weight: 400; line-height: 1.17; letter-spacing: 0.2px;">Supercharged productivity</div>
+    <div class="type-spec">Inter — OpenType: calt, kern, liga, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Heading — 24px / 500 / normal / +0.2px</div>
+    <div style="font-size: 24px; font-weight: 500; letter-spacing: 0.2px;">Built for speed, designed for flow</div>
+    <div class="type-spec">Inter — OpenType: calt, kern, liga, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 16px / 500 / 1.60 / +0.2px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter — weight 500 baseline for dark-mode legibility</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Caption — 14px / 500 / 1.14 / +0.2px</div>
+    <div 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</div>
+    <div class="type-spec">Inter — small labels, metadata</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Code — 14px / 500 / 1.60 / +0.3px</div>
+    <div 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</div>
+    <div class="type-spec">GeistMono — code blocks, terminal output</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">Pill CTAs with translucent white, ghost variants with macOS-native inset shadows.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Download Raycast</a>
+      <span class="btn-label">Primary / White Pill</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Secondary / Outline Pill</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">Explore Store</button>
+      <span class="btn-label">Ghost / Inset Shadow</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-rect">View Extension</button>
+      <span class="btn-label">Rectangular / 6px</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Dark surface cards with double-ring shadows and subtle border containment.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Extensions</div>
+      <h3 class="card-title">Store Ecosystem</h3>
+      <p class="card-text">Browse thousands of extensions built by the community. Install with one click and customize to fit your workflow.</p>
+    </div>
+    <div class="card card-float">
+      <div class="card-tag">AI</div>
+      <h3 class="card-title">Raycast AI</h3>
+      <p class="card-text">Chat with AI, generate text, translate, summarize — all from your command bar without switching context.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Productivity</div>
+      <h3 class="card-title">Clipboard History</h3>
+      <p class="card-text">Never lose copied text again. Search your entire clipboard history and paste anything from the past.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Dark inputs with blue focus rings and red error glows.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email (Focus State)</label>
+      <input type="email" class="form-input" placeholder="you@raycast.com" style="border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">API Key (Error State)</label>
+      <input type="text" class="form-input form-input-error" value="invalid-key-123">
+      <span class="form-error-text">Invalid API key format</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your extension..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit with precise sub-values for fine-tuned layout.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 64px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 88px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 120px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 152px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 200px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">40px</span><div class="spacing-box" style="width: 260px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From micro 2px spans to full 86px+ pill buttons.</p>
+
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius: 2px;"></div><div class="radius-value">2px</div><div class="radius-context">Micro</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Keys</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Inputs</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-value">16px</div><div class="radius-context">Large cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 20px;"></div><div class="radius-value">20px</div><div class="radius-context">Hero</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 86px; width: 64px; height: 40px;"></div><div class="radius-value">86px</div><div class="radius-context">Pill</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">macOS-native shadow system with multi-layer inset highlights.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 0 — Void</div>
+      <div class="elevation-desc">No shadow. The baseline void.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 1.189px 2.377px 0px;">
+      <div class="elevation-label">Level 1 — Subtle</div>
+      <div class="elevation-desc">Minimal lift for inline elements.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-ring);">
+      <div class="elevation-label">Level 2 — Ring</div>
+      <div class="elevation-desc">Double-ring containment. Standard card.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-button);">
+      <div class="elevation-label">Level 3 — Button</div>
+      <div class="elevation-desc">macOS press effect. White top, dark inset.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-float);">
+      <div class="elevation-label">Level 4 — Floating</div>
+      <div class="elevation-desc">Command palette depth. Maximum presence.</div>
+    </div>
+  </div>
+</section>
+
+<footer class="footer">
+  <p>Design system extracted from <a href="https://raycast.com">raycast.com</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/raycast/preview.html

@@ -0,0 +1,690 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Raycast</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #07080a;
+    --bg-100: #101111;
+    --bg-card: #1b1c1e;
+    --white: #ffffff;
+    --fg: #f9f9f9;
+    --light-gray: #cecece;
+    --silver: #c0c0c0;
+    --med-gray: #9c9c9d;
+    --dim-gray: #6a6b6c;
+    --dark-gray: #434345;
+    --border: #252829;
+    --dark-border: #2f3031;
+    --button-fg: #18191a;
+    --red: #ff6363;
+    --blue: #55b3ff;
+    --green: #5fc992;
+    --yellow: #ffbc33;
+    --red-t: rgba(255, 99, 99, 0.15);
+    --blue-t: rgba(85, 179, 255, 0.15);
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-med: rgba(255, 255, 255, 0.1);
+    --button-bg: hsla(0, 0%, 100%, 0.815);
+    --shadow-ring: rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;
+    --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;
+    --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;
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--fg);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: "calt", "kern", "liga", "ss03";
+  }
+
+  /* NAV */
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 32px;
+    background: rgba(7, 8, 10, 0.88);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .nav-brand { font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: 0.2px; }
+  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
+  .nav-links a {
+    color: var(--med-gray); text-decoration: none; font-size: 14px; font-weight: 500;
+    letter-spacing: 0.2px; transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--white); }
+  .nav-cta {
+    background: var(--button-bg); color: var(--button-fg) !important;
+    padding: 8px 20px; border-radius: 86px; font-weight: 600; font-size: 14px;
+    transition: background 0.2s; letter-spacing: 0.2px;
+  }
+  .nav-cta:hover { background: var(--white); }
+
+  /* HERO */
+  .hero {
+    padding: 120px 32px 100px; text-align: center;
+    max-width: 1200px; margin: 0 auto;
+    position: relative; overflow: hidden;
+  }
+  .hero::before {
+    content: '';
+    position: absolute; top: -40px; right: -60px;
+    width: 400px; height: 400px;
+    background: repeating-linear-gradient(
+      -45deg,
+      var(--red) 0px, var(--red) 18px,
+      transparent 18px, transparent 36px
+    );
+    opacity: 0.15; filter: blur(1px);
+    border-radius: 20px;
+    transform: rotate(12deg);
+  }
+  .hero h1 {
+    font-size: 72px; font-weight: 600; letter-spacing: 0px; line-height: 1.1;
+    color: var(--white); margin-bottom: 20px; position: relative;
+    font-feature-settings: "liga" 0, "ss02", "ss08";
+  }
+  .hero .subtitle {
+    font-size: 18px; color: var(--med-gray); letter-spacing: 0.2px;
+    line-height: 1.5; max-width: 520px; margin: 0 auto 40px; position: relative;
+  }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
+
+  .btn-primary {
+    display: inline-flex; align-items: center;
+    background: var(--button-bg); color: var(--button-fg);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 600; text-decoration: none;
+    border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s;
+    letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-primary:hover { background: var(--white); }
+  .btn-secondary {
+    display: inline-flex; align-items: center;
+    background: transparent; color: var(--white);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 500; text-decoration: none;
+    border: 1px solid var(--border-med); cursor: pointer;
+    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-secondary:hover { opacity: 0.6; }
+
+  /* SECTIONS */
+  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
+  .section-title {
+    font-size: 44px; font-weight: 600; letter-spacing: 0px; line-height: 1.1; margin-bottom: 12px;
+    font-feature-settings: "liga" 0, "ss02", "ss08";
+  }
+  .section-desc { font-size: 16px; color: var(--med-gray); margin-bottom: 48px; letter-spacing: 0.2px; }
+  .section-divider {
+    border: none; border-top: 1px solid var(--border-subtle);
+    max-width: 1136px; margin: 0 auto;
+  }
+
+  /* COLORS */
+  .color-group { margin-bottom: 40px; }
+  .color-group-title {
+    font-size: 12px; font-weight: 600; color: var(--dim-gray);
+    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 16px;
+  }
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
+  .color-swatch {
+    border-radius: 12px; overflow: hidden;
+    background: var(--bg-100); box-shadow: var(--shadow-ring);
+  }
+  .color-swatch-preview { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 10px 12px; }
+  .color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0.1px; }
+  .color-swatch-hex { font-size: 11px; color: var(--dim-gray); font-family: var(--font-mono); letter-spacing: 0.2px; }
+  .color-swatch-role { font-size: 11px; color: var(--med-gray); margin-top: 3px; line-height: 1.4; }
+
+  /* TYPOGRAPHY */
+  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label {
+    font-size: 11px; color: var(--blue); letter-spacing: 0.4px;
+    text-transform: uppercase; margin-bottom: 8px; font-weight: 600;
+  }
+  .type-spec { font-size: 12px; color: var(--dim-gray); margin-top: 8px; letter-spacing: 0.2px; }
+
+  /* BUTTONS */
+  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
+  .btn-ghost {
+    background: transparent; color: var(--dim-gray);
+    padding: 12px 28px; border-radius: 86px;
+    font-size: 16px; font-weight: 500; border: none; cursor: pointer;
+    box-shadow: var(--shadow-button); transition: opacity 0.2s;
+    letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-ghost:hover { opacity: 0.6; }
+  .btn-rect {
+    background: transparent; color: var(--white);
+    padding: 10px 20px; border-radius: 6px;
+    font-size: 14px; font-weight: 500;
+    border: 1px solid var(--border-med); cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
+    transition: opacity 0.2s; letter-spacing: 0.2px; font-family: var(--font);
+  }
+  .btn-rect:hover { opacity: 0.6; }
+  .btn-label { display: block; font-size: 11px; color: var(--dim-gray); margin-top: 8px; text-align: center; letter-spacing: 0.2px; }
+  .btn-item { text-align: center; }
+
+  /* CARDS */
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+  .card {
+    background: var(--bg-100); border-radius: 16px; padding: 28px;
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-ring); transition: border-color 0.3s;
+  }
+  .card:hover { border-color: rgba(255, 255, 255, 0.12); }
+  .card-float { box-shadow: var(--shadow-float); border: none; }
+  .card-title { font-size: 20px; font-weight: 600; letter-spacing: 0px; margin-bottom: 8px; line-height: 1.2; }
+  .card-text { font-size: 14px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }
+  .card-tag {
+    display: inline-block; padding: 2px 8px;
+    background: var(--bg-card); border-radius: 6px;
+    font-size: 12px; font-weight: 600; color: var(--light-gray);
+    margin-bottom: 12px; letter-spacing: 0.1px;
+  }
+
+  /* FORMS */
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label { font-size: 14px; font-weight: 500; color: var(--med-gray); letter-spacing: 0.2px; }
+  .form-input {
+    background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px; padding: 12px 14px; color: var(--fg);
+    font-size: 14px; font-family: var(--font); outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s; letter-spacing: 0.2px;
+  }
+  .form-input::placeholder { color: var(--dim-gray); }
+  .form-input:focus {
+    border-color: var(--blue);
+    box-shadow: 0 0 0 3px var(--blue-t);
+  }
+  .form-input-error {
+    border-color: var(--red);
+    box-shadow: 0 0 0 3px var(--red-t);
+  }
+  .form-error-text { font-size: 12px; color: var(--red); letter-spacing: 0.2px; }
+  textarea.form-input { min-height: 100px; resize: vertical; }
+
+  /* SPACING */
+  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
+  .spacing-box { height: 28px; background: var(--blue); border-radius: 4px; opacity: 0.5; }
+  .spacing-label { font-size: 12px; color: var(--dim-gray); min-width: 50px; text-align: right; letter-spacing: 0.2px; }
+
+  /* RADIUS */
+  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 64px; height: 64px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-subtle); margin-bottom: 8px;
+  }
+  .radius-value { font-size: 11px; color: var(--dim-gray); letter-spacing: 0.2px; }
+  .radius-context { font-size: 10px; color: var(--dark-gray); margin-top: 2px; }
+
+  /* ELEVATION */
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
+  .elevation-card {
+    padding: 24px; border-radius: 12px; background: var(--bg-100); min-height: 110px;
+  }
+  .elevation-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.1px; }
+  .elevation-desc { font-size: 12px; color: var(--med-gray); line-height: 1.5; letter-spacing: 0.2px; }
+
+  /* FOOTER */
+  .footer {
+    text-align: center; padding: 48px 32px;
+    border-top: 1px solid var(--border-subtle); margin-top: 40px;
+  }
+  .footer p { font-size: 13px; color: var(--dim-gray); letter-spacing: 0.2px; }
+  .footer a { color: var(--blue); text-decoration: none; }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 44px; }
+    .hero .subtitle { font-size: 16px; }
+    .section-title { font-size: 32px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+    .hero::before { width: 250px; height: 250px; top: -20px; right: -40px; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Download</a></li>
+  </ul>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <h1>Design System<br>Inspired by Raycast</h1>
+  <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Raycast's marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- COLORS -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Near-black blue-tinted backgrounds, precision grays, and bold semantic accents.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #07080a; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near-Black Blue</div>
+          <div class="color-swatch-hex">#07080a</div>
+          <div class="color-swatch-role">Page background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #f9f9f9;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Near White</div>
+          <div class="color-swatch-hex">#f9f9f9</div>
+          <div class="color-swatch-role">Primary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ff6363;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Red</div>
+          <div class="color-swatch-hex">#ff6363</div>
+          <div class="color-swatch-role">Brand accent, hero stripes</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Secondary & Semantic</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #55b3ff;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Blue</div>
+          <div class="color-swatch-hex">#55b3ff</div>
+          <div class="color-swatch-role">Links, interactive accent</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #5fc992;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Green</div>
+          <div class="color-swatch-hex">#5fc992</div>
+          <div class="color-swatch-role">Success states</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #ffbc33;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Raycast Yellow</div>
+          <div class="color-swatch-hex">#ffbc33</div>
+          <div class="color-swatch-role">Warning, highlights</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #101111; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Surface 100</div>
+          <div class="color-swatch-hex">#101111</div>
+          <div class="color-swatch-role">Card backgrounds</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #1b1c1e; border-bottom: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Card Surface</div>
+          <div class="color-swatch-hex">#1b1c1e</div>
+          <div class="color-swatch-role">Badge fills, elevated containers</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: hsla(0,0%,100%,0.815);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Button White</div>
+          <div class="color-swatch-hex">hsla(0,0%,100%,0.815)</div>
+          <div class="color-swatch-role">Primary CTA background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #cecece;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Light Gray</div>
+          <div class="color-swatch-hex">#cecece</div>
+          <div class="color-swatch-role">Secondary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #9c9c9d;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Medium Gray</div>
+          <div class="color-swatch-hex">#9c9c9d</div>
+          <div class="color-swatch-role">Links, nav, descriptions</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #6a6b6c;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Dim Gray</div>
+          <div class="color-swatch-hex">#6a6b6c</div>
+          <div class="color-swatch-role">Disabled, low-emphasis</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #434345;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Dark Gray</div>
+          <div class="color-swatch-hex">#434345</div>
+          <div class="color-swatch-role">Muted borders, inactive</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #252829; border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Border</div>
+          <div class="color-swatch-hex">#252829</div>
+          <div class="color-swatch-role">Card borders, dividers</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">Inter with positive letter-spacing for airy dark-mode readability. GeistMono for code.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 64px / 600 / 1.10 / 0px</div>
+    <div style="font-size: 64px; font-weight: 600; line-height: 1.1; font-feature-settings: 'liga' 0, 'ss02', 'ss08';">Your shortcut to everything</div>
+    <div class="type-spec">Inter — OpenType: liga 0, ss02, ss08</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 56px / 400 / 1.17 / +0.2px</div>
+    <div style="font-size: 48px; font-weight: 400; line-height: 1.17; letter-spacing: 0.2px;">Supercharged productivity</div>
+    <div class="type-spec">Inter — OpenType: calt, kern, liga, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Heading — 24px / 500 / normal / +0.2px</div>
+    <div style="font-size: 24px; font-weight: 500; letter-spacing: 0.2px;">Built for speed, designed for flow</div>
+    <div class="type-spec">Inter — OpenType: calt, kern, liga, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Card Heading — 22px / 400 / 1.15</div>
+    <div style="font-size: 22px; font-weight: 400; line-height: 1.15;">Extensions that transform your workflow</div>
+    <div class="type-spec">Inter — OpenType: calt, kern, liga, ss03</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 16px / 500 / 1.60 / +0.2px</div>
+    <div 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.</div>
+    <div class="type-spec">Inter — weight 500 baseline for dark-mode legibility</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Button — 16px / 600 / 1.15 / +0.3px</div>
+    <div style="font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: 0.3px;">Download for Free</div>
+    <div class="type-spec">Inter — semibold with wider tracking for CTAs</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Caption — 14px / 500 / 1.14 / +0.2px</div>
+    <div 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</div>
+    <div class="type-spec">Inter — small labels, metadata</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Small — 12px / 600 / 1.33</div>
+    <div style="font-size: 12px; font-weight: 600; line-height: 1.33; color: var(--light-gray);">NEW EXTENSION</div>
+    <div class="type-spec">Inter — badges, micro-labels</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Code — 14px / 500 / 1.60 / +0.3px</div>
+    <div 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</div>
+    <div class="type-spec">GeistMono — code blocks, terminal output</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">Pill CTAs with translucent white, ghost variants with macOS-native inset shadows, rectangular for secondary.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Download Raycast</a>
+      <span class="btn-label">Primary / White Pill</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Secondary / Outline Pill</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">Explore Store</button>
+      <span class="btn-label">Ghost / Inset Shadow</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-rect">View Extension</button>
+      <span class="btn-label">Rectangular / 6px</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-primary" style="padding: 8px 20px; font-size: 14px;">Sign Up</a>
+      <span class="btn-label">Small / Nav CTA</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Dark surface cards with double-ring shadows and subtle white border containment.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Extensions</div>
+      <h3 class="card-title">Store Ecosystem</h3>
+      <p class="card-text">Browse thousands of extensions built by the community. Install with one click and customize to fit your workflow.</p>
+    </div>
+    <div class="card card-float">
+      <div class="card-tag">AI</div>
+      <h3 class="card-title">Raycast AI</h3>
+      <p class="card-text">Chat with AI, generate text, translate, summarize — all from your command bar without switching context.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Productivity</div>
+      <h3 class="card-title">Clipboard History</h3>
+      <p class="card-text">Never lose copied text again. Search your entire clipboard history and paste anything from the past.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Dark inputs with blue focus rings and red error glows — matching the semantic accent system.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email (Focus State)</label>
+      <input type="email" class="form-input" placeholder="you@raycast.com" style="border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-t);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">API Key (Error State)</label>
+      <input type="text" class="form-input form-input-error" value="invalid-key-123">
+      <span class="form-error-text">Invalid API key format</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your extension..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit with precise sub-values for fine-tuned layout control.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">2px</span><div class="spacing-box" style="width: 8px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 40px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 64px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 88px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">20px</span><div class="spacing-box" style="width: 120px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 152px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 200px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">40px</span><div class="spacing-box" style="width: 260px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From micro 2px spans to full 86px+ pill buttons — radius signals interaction importance.</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 2px;"></div>
+      <div class="radius-value">2px</div>
+      <div class="radius-context">Micro</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 4px;"></div>
+      <div class="radius-value">4px</div>
+      <div class="radius-context">Keys</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 6px;"></div>
+      <div class="radius-value">6px</div>
+      <div class="radius-context">Buttons/Tags</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 8px;"></div>
+      <div class="radius-value">8px</div>
+      <div class="radius-context">Inputs</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 12px;"></div>
+      <div class="radius-value">12px</div>
+      <div class="radius-context">Cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 16px;"></div>
+      <div class="radius-value">16px</div>
+      <div class="radius-context">Large cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 20px;"></div>
+      <div class="radius-value">20px</div>
+      <div class="radius-context">Hero cards</div>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius: 86px; width: 64px; height: 40px;"></div>
+      <div class="radius-value">86px</div>
+      <div class="radius-context">Pill CTA</div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<!-- ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">macOS-native shadow system — multi-layer inset highlights simulating physical glass and metal depth.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 0 — Void</div>
+      <div class="elevation-desc">No shadow, flat on the dark canvas. The baseline everything rises from.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px;">
+      <div class="elevation-label">Level 1 — Subtle</div>
+      <div class="elevation-desc">Minimal lift. Fine drop shadow for inline elements.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-ring);">
+      <div class="elevation-label">Level 2 — Ring</div>
+      <div class="elevation-desc">Double-ring containment — outer + inset. The standard card treatment.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-button);">
+      <div class="elevation-label">Level 3 — Button</div>
+      <div class="elevation-desc">macOS-native press — white top highlight, dark bottom inset, outer ring.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: var(--shadow-float);">
+      <div class="elevation-label">Level 4 — Floating</div>
+      <div class="elevation-desc">Command palette depth — heavy ring + white glow + double inset. Maximum presence.</div>
+    </div>
+  </div>
+</section>
+
+<footer class="footer">
+  <p>Design system extracted from <a href="https://raycast.com">raycast.com</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/superhuman/DESIGN.md

@@ -0,0 +1,252 @@
+# Design System: Superhuman
+
+## 1. Visual Theme & Atmosphere
+
+Superhuman'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.
+
+The 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.
+
+The 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.
+
+**Key Characteristics:**
+- Deep purple gradient hero (`#1b1938`) contrasting against a predominantly white content body
+- Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) — sits between conventional weight categories
+- Ultra-tight display line-height (0.96) creating compressed, powerful headlines
+- Warm Cream (`#e9e5dd`) buttons instead of bright/saturated CTAs — understated luxury
+- Lavender Purple (`#cbb7fb`) as the singular accent color — a soft, approachable purple
+- Minimal border-radius scale: only 8px and 16px — no micro-rounding, no pill shapes
+- Product screenshots dominate the content — the UI sells itself with minimal surrounding decoration
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Mysteria Purple** (`#1b1938`): Hero gradient background, deep purple that straddles blue-purple — the darkest expression of the brand
+- **Lavender Glow** (`#cbb7fb`): Primary accent and highlight color — soft purple used for emphasis, decorative elements, and interactive highlights
+- **Charcoal Ink** (`#292827`): Primary text and heading color on light surfaces — warm near-black with faint brown undertone
+
+### Secondary & Accent
+- **Amethyst Link** (`#714cb6`): Underlined link text — mid-range purple that connects to the brand palette while signaling interactivity
+- **Translucent White** (`color(srgb 1 1 1 / 0.95)`): Hero overlay text — near-white at 95% opacity for depth layering on dark surfaces
+- **Misted White** (`color(srgb 1 1 1 / 0.8)`): Secondary text on dark surfaces — 80% opacity white for hierarchy on the hero gradient
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background — the dominant canvas color for all content sections
+- **Warm Cream** (`#e9e5dd`): Button background — a warm, neutral cream that avoids the coldness of pure gray
+- **Parchment Border** (`#dcd7d3`): Card and divider borders — warm light gray with slight pink undertone
+
+### Neutrals & Text
+- **Charcoal Ink** (`#292827`): Primary heading and body text on white surfaces
+- **Amethyst Link** (`#714cb6`): In-content links with underline decoration
+- **Translucent White 95%** (`color(srgb 1 1 1 / 0.95)`): Primary text on dark/purple surfaces
+- **Translucent White 80%** (`color(srgb 1 1 1 / 0.8)`): Secondary text on dark/purple surfaces
+
+### Semantic & Accent
+- Superhuman operates with extreme color restraint — Lavender Glow (`#cbb7fb`) is the only true accent
+- Interactive states are communicated through opacity shifts and underline decorations rather than color changes
+- The warm cream button palette avoids any saturated semantic colors (no red errors, green success visible on marketing)
+
+### Gradient System
+- **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
+- **Content Transition**: The gradient dissolves into the white content area, creating a cinematic curtain-lift effect as the user scrolls
+- No other gradients on the marketing site — the hero gradient is a singular dramatic gesture
+
+## 3. Typography Rules
+
+### Font Family
+- **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`
+- **Product UI** (referenced in brand): `Messina Sans` / `Messina Serif` / `Messina Mono` from Luzi Type — used in the product itself for sans-serif-to-serif transitions
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Super Sans VF | 64px | 540 | 0.96 | 0px | Maximum compression, powerful block headlines |
+| Section Display | Super Sans VF | 48px | 460 | 0.96 | -1.32px | Lighter weight for section introductions |
+| Section Heading | Super Sans VF | 48px | 460 | 0.96 | 0px | Alternate section heading without tracking |
+| Feature Title | Super Sans VF | 28px | 540 | 1.14 | -0.63px | Feature block headlines, tighter |
+| Sub-heading Large | Super Sans VF | 26px | 460 | 1.30 | 0px | Content sub-sections |
+| Card Heading | Super Sans VF | 22px | 460 | 0.76 | -0.315px | Card title with extreme compression |
+| Body Heading | Super Sans VF | 20px | 460 | 1.20 | 0px | Bold content intros |
+| Body Heading Alt | Super Sans VF | 20px | 460 | 1.10 | -0.55px | Tighter variant for emphasis |
+| Body Heading Relaxed | Super Sans VF | 20px | 460 | 1.25 | -0.4px | More breathing room variant |
+| Emphasis Body | Super Sans VF | 18px | 540 | 1.50 | -0.135px | Medium-weight body for callouts |
+| Body | Super Sans VF | 16px | 460 | 1.50 | 0px | Standard reading text — generous line-height |
+| Button / UI Bold | Super Sans VF | 16px | 700 | 1.00 | 0px | Bold UI elements |
+| Button / UI Semi | Super Sans VF | 16px | 600 | 1.00 | 0px | Semi-bold navigation and labels |
+| Nav Link | Super Sans VF | 16px | 460 | 1.20 | 0px | Navigation items |
+| Caption | Super Sans VF | 14px | 500 | 1.20 | -0.315px | Small labels, metadata |
+| Caption Semi | Super Sans VF | 14px | 600 | 1.29 | 0px | Emphasized small text |
+| Caption Body | Super Sans VF | 14px | 460 | 1.50 | 0px | Small body text |
+| Micro Label | Super Sans VF | 12px | 700 | 1.50 | 0px | Smallest text — badges, tags |
+
+### Principles
+- **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
+- **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
+- **Body generosity**: In contrast, body text at 1.50 line-height is extremely spacious, ensuring comfortable reading after the dense headline impact
+- **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
+- **Variable font efficiency**: A single font file serves all weight variations (460–700), enabling smooth weight transitions and micro-adjustments
+
+## 4. Component Stylings
+
+### Buttons
+- **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
+- **Dark Primary** (on light sections): `#292827` background with white text, 8px radius — inverse of the warm cream for contrast sections
+- **Ghost / Text Link**: No background, underline decoration, Amethyst Link (`#714cb6`) or Charcoal Ink color depending on context
+- **Hero CTA**: Warm Cream on the dark purple gradient — the cream color pops dramatically against `#1b1938`
+- **Hover**: Subtle opacity or brightness shift — no dramatic color transformations
+
+### Cards & Containers
+- **Content Card**: White background, Parchment Border (`#dcd7d3`) 1px border, 16px border-radius — clean and minimal
+- **Dark Surface Card**: `#292827` border on dark sections, maintaining warm-neutral tone
+- **Hero Surface**: Semi-transparent white border (`rgba(255, 255, 255, 0.2)`) on purple gradient — ghostly containment
+- **Product Screenshot Cards**: Large product UI images with clean edges, minimal framing — the product itself is the visual
+- **Hover**: Minimal state changes — consistency and calm over flashy interactions
+
+### Inputs & Forms
+- Minimal form presence on the marketing site — Superhuman funnels users directly to signup
+- Dark-bordered inputs with Charcoal Ink borders and warm-toned placeholder text
+- Focus: Border emphasis increase, likely shifting from Parchment Border to Charcoal Ink
+
+### Navigation
+- **Top nav**: Clean white background on content sections, transparent on hero gradient
+- **Nav links**: Super Sans VF at 16px, weight 460/600 for hierarchy
+- **CTA button**: Warm Cream (`#e9e5dd`) pill in the nav — subtle, not attention-grabbing
+- **Sticky behavior**: Nav remains fixed on scroll with background transition
+- **Mobile**: Collapses to hamburger menu with simplified layout
+
+### Image Treatment
+- **Product screenshots**: Large, dominant product UI images showing the email interface — the product is the hero
+- **Lifestyle photography**: A single dramatic image (silhouette against purple/red gradient) in the hero area — cinematic and editorial
+- **Full-width presentation**: Screenshots span full container width with subtle shadow or no border
+- **Aspect ratios**: Wide landscape ratios (roughly 16:9) for product screenshots
+- **Color integration**: Screenshots are carefully color-graded to harmonize with the purple-to-white page flow
+
+### Testimonial / Social Proof
+- "Your Superhuman suite" section with product feature grid
+- Feature descriptions paired with product screenshots — proof through demonstration rather than quotes
+- Clean grid layout with consistent card sizing
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 56px
+- **Section padding**: 48px–80px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px content container, centered
+- **Column patterns**: Full-width hero, centered single-column for key messaging, 2-3 column grid for feature cards
+- **Feature grid**: Even column distribution for "Your Superhuman suite" product showcase
+
+### Whitespace Philosophy
+- **Confident emptiness**: Generous whitespace between sections signals premium positioning — every element has room to breathe
+- **Product as content**: Large product screenshots fill space that lesser sites would fill with marketing copy
+- **Progressive density**: The hero is spacious and cinematic, content sections become denser with feature grids, then opens up again for CTAs
+
+### Border Radius Scale
+- **8px**: Buttons, inline elements (`span`, `button`, `div`) — the universal small radius
+- **16px**: Cards, links, larger containers (`a`, card elements) — the universal large radius
+- Only two radii in the entire system — radical simplicity. No micro-rounding (2px), no pill shapes (50px+)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, white background | Primary page canvas, most content surfaces |
+| Level 1 (Border) | `1px solid #dcd7d3` (Parchment Border) | Card containment, section dividers |
+| Level 2 (Dark Border) | `1px solid #292827` | Header elements, dark section separators |
+| Level 3 (Glow) | Subtle shadow (from 6 shadow definitions detected) | Product screenshot containers, elevated cards |
+| Level 4 (Hero Depth) | `rgba(255, 255, 255, 0.2)` transparent border | Elements on the dark purple gradient hero |
+
+### Shadow Philosophy
+Superhuman's elevation system is remarkably restrained on the marketing site. Depth is primarily communicated through:
+- **Border containment**: Warm-toned borders (`#dcd7d3`) at 1px create gentle separation
+- **Color contrast**: The hero gradient creates massive depth through color shift rather than shadows
+- **Product screenshots**: Screenshots themselves create depth by showing a layered UI within the flat page
+- **Opacity layering**: Semi-transparent whites on the hero gradient create atmospheric depth layers
+
+### Decorative Depth
+- **Hero gradient**: The `#1b1938` → white gradient transition is the primary depth device — a cinematic curtain effect
+- **Lavender accents**: `#cbb7fb` Lavender Glow elements float above the dark gradient, creating a stellar/atmospheric effect
+- **No glassmorphism**: Despite the translucent borders, there are no blur/frosted-glass effects
+- **Photography depth**: The hero silhouette image creates natural atmospheric depth without artificial CSS
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Super Sans VF at weight 460 as the default — it's slightly heavier than regular, which is the brand's typographic signature
+- Keep display headlines at 0.96 line-height — the compression is intentional and powerful
+- Use Warm Cream (`#e9e5dd`) for primary buttons — not white, not gray, specifically warm cream
+- Limit border-radius to 8px (small) and 16px (large) — the binary radius system is deliberate
+- Apply negative letter-spacing on headlines only (-0.63px to -1.32px) — body text stays at 0px
+- Use Lavender Glow (`#cbb7fb`) as the only accent color — it's the sole color departure from the neutral palette
+- Let product screenshots be the primary visual content — the UI sells itself
+- Maintain the dramatic hero gradient as a singular gesture — the rest of the page is white
+
+### Don't
+- Use conventional font weights (400, 500, 600) — Superhuman's 460 and 540 are deliberately between standard stops
+- Add bright or saturated CTA colors (blue, green, red) — buttons are intentionally muted in Warm Cream or Charcoal
+- Introduce additional accent colors beyond Lavender Glow — the palette is deliberately restrained to one accent
+- Apply shadows generously — depth comes from borders, color contrast, and photography, not box-shadows
+- Use tight line-height on body text — display is compressed (0.96) but body is generous (1.50)
+- Add decorative elements, icons, or illustrations — Superhuman relies on product UI and minimal typography
+- Create pill-shaped buttons — the system uses 8px radius, not rounded pills
+- Use pure black (`#000000`) for text — Charcoal Ink (`#292827`) is warmer and softer
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hero text reduces to ~36px, stacked feature cards, hamburger nav |
+| Tablet | 768px–1024px | 2-column feature grid begins, hero text ~48px, nav partially visible |
+| Desktop | 1024px–1440px | Full layout, 64px hero display, multi-column feature grid, full nav |
+| Large Desktop | >1440px | Max-width container centered, generous side margins |
+
+### Touch Targets
+- Buttons: 8px radius with comfortable padding — meets touch target guidelines
+- Nav links: 16px text with adequate surrounding padding
+- Mobile CTAs: Full-width Warm Cream buttons for easy thumb reach
+- Links: Underline decoration provides clear tap affordance
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger menu on mobile
+- **Hero text**: 64px display → 48px → ~36px across breakpoints
+- **Feature grid**: Multi-column product showcase → 2-column → single stacked column
+- **Product screenshots**: Scale within containers, maintaining landscape ratios
+- **Section spacing**: Reduces proportionally — generous desktop margins compress on mobile
+
+### Image Behavior
+- Product screenshots scale responsively while maintaining aspect ratios
+- Hero silhouette image crops or scales — maintains dramatic composition
+- No art direction changes — same compositions across all breakpoints
+- Lazy loading likely on below-fold product screenshots
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Hero Background: Mysteria Purple (`#1b1938`)
+- Primary Text (light bg): Charcoal Ink (`#292827`)
+- Primary Text (dark bg): Translucent White (`color(srgb 1 1 1 / 0.95)` — use `rgba(255,255,255,0.95)`)
+- Accent: Lavender Glow (`#cbb7fb`)
+- Button Background: Warm Cream (`#e9e5dd`)
+- Border: Parchment Border (`#dcd7d3`)
+- Link: Amethyst Link (`#714cb6`)
+- Page Background: Pure White (`#ffffff`)
+
+### Example Component Prompts
+- "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)"
+- "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"
+- "Build a navigation bar with white background, Super Sans links at 16px weight 460, a warm cream CTA button (#e9e5dd, 8px radius), sticky positioning"
+- "Create a product showcase section with centered 48px heading (weight 460, -1.32px letter-spacing, #292827), a large product screenshot below, on white background"
+- "Design an accent badge using Lavender Glow (#cbb7fb) background, 8px radius, 12px bold text (weight 700), for category labels"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify font weight is 460 (not 400 or 500) for body and 540 for display — the non-standard weights are essential
+2. Check that display line-height is 0.96 — if headlines look too spaced, they're wrong
+3. Ensure buttons use Warm Cream (#e9e5dd) not pure white or gray — the warmth is subtle but critical
+4. Confirm the only accent color is Lavender Glow (#cbb7fb) — no other hues should appear
+5. The overall tone should feel like a luxury product presentation — minimal, confident, with one dramatic color gesture in the hero

design-md/superhuman/README.md

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

design-md/superhuman/preview-dark.html

@@ -0,0 +1,975 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Superhuman — Dark Mode</title>
+<style>
+  :root {
+    --mysteria-purple: #1b1938;
+    --lavender-glow: #cbb7fb;
+    --charcoal-ink: #292827;
+    --amethyst-link: #714cb6;
+    --translucent-white-95: rgba(255,255,255,0.95);
+    --translucent-white-80: rgba(255,255,255,0.8);
+    --pure-white: #ffffff;
+    --warm-cream: #e9e5dd;
+    --parchment-border: #dcd7d3;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+    /* Dark mode surfaces */
+    --dark-bg: #121111;
+    --dark-surface: #1c1b1a;
+    --dark-surface-elevated: #252423;
+    --dark-border: #3a3938;
+    --dark-text-primary: rgba(255,255,255,0.92);
+    --dark-text-secondary: rgba(255,255,255,0.6);
+    --dark-text-tertiary: rgba(255,255,255,0.4);
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-family);
+    background: var(--dark-bg);
+    color: var(--dark-text-primary);
+    font-weight: 460;
+    font-size: 16px;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* DARK MODE BADGE */
+  .dark-badge {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 200;
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 6px 14px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+
+  /* NAV */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 40px;
+    background: rgba(18, 17, 17, 0.92);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--dark-border);
+  }
+  .nav-brand {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--dark-text-primary);
+    text-decoration: none;
+    letter-spacing: -0.2px;
+  }
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 14px;
+    font-weight: 460;
+    color: var(--dark-text-secondary);
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--dark-text-primary); }
+  .nav-cta {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 8px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.9; }
+
+  /* HERO */
+  .hero {
+    background: linear-gradient(180deg, var(--mysteria-purple) 0%, #2a1f5e 40%, #4a2d7a 70%, #3a2468 100%);
+    padding: 120px 40px 140px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 120px;
+    background: linear-gradient(to bottom, transparent, var(--dark-bg));
+  }
+  .hero h1 {
+    font-size: 64px;
+    font-weight: 540;
+    line-height: 0.96;
+    letter-spacing: 0px;
+    color: var(--translucent-white-95);
+    max-width: 800px;
+    margin: 0 auto 24px;
+  }
+  .hero .subtitle {
+    font-size: 20px;
+    font-weight: 460;
+    line-height: 1.25;
+    color: var(--translucent-white-80);
+    max-width: 560px;
+    margin: 0 auto 40px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .btn-primary {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-primary:hover { opacity: 0.9; }
+  .btn-secondary {
+    background: transparent;
+    color: var(--translucent-white-95);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 460;
+    text-decoration: none;
+    border: 1px solid rgba(255,255,255,0.2);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .btn-secondary:hover { background: rgba(255,255,255,0.05); }
+
+  /* SECTIONS */
+  .section {
+    padding: 80px 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-title {
+    font-size: 48px;
+    font-weight: 460;
+    line-height: 0.96;
+    letter-spacing: -1.32px;
+    color: var(--dark-text-primary);
+    margin-bottom: 12px;
+  }
+  .section-subtitle {
+    font-size: 18px;
+    font-weight: 460;
+    line-height: 1.50;
+    color: var(--dark-text-secondary);
+    margin-bottom: 48px;
+  }
+
+  /* 1. COLOR PALETTE */
+  .color-category { margin-bottom: 40px; }
+  .color-category h3 {
+    font-size: 20px;
+    font-weight: 540;
+    line-height: 1.14;
+    margin-bottom: 20px;
+    color: var(--dark-text-primary);
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+  }
+  .color-swatch {
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--dark-border);
+  }
+  .color-swatch .swatch-color {
+    height: 100px;
+    width: 100%;
+  }
+  .color-swatch .swatch-info {
+    padding: 12px 16px;
+    background: var(--dark-surface);
+  }
+  .color-swatch .swatch-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--dark-text-primary);
+    margin-bottom: 2px;
+  }
+  .color-swatch .swatch-hex {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--dark-text-tertiary);
+    margin-bottom: 4px;
+    font-family: monospace;
+  }
+  .color-swatch .swatch-role {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--dark-text-secondary);
+    line-height: 1.4;
+  }
+
+  /* 2. TYPOGRAPHY */
+  .type-sample {
+    padding: 24px 0;
+    border-bottom: 1px solid var(--dark-border);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text {
+    color: var(--dark-text-primary);
+    margin-bottom: 8px;
+  }
+  .type-sample .type-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--lavender-glow);
+    font-family: monospace;
+    line-height: 1.4;
+  }
+
+  /* 3. BUTTONS */
+  .button-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: flex-start;
+  }
+  .button-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .button-item .btn-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--dark-text-tertiary);
+    font-family: monospace;
+  }
+  .btn-cream-dark {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-cream-dark:hover { opacity: 0.9; }
+  .btn-light {
+    background: var(--dark-text-primary);
+    color: var(--dark-bg);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-light:hover { opacity: 0.85; }
+  .btn-outline-dark {
+    background: transparent;
+    color: var(--dark-text-primary);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 460;
+    border: 1px solid var(--dark-border);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .btn-outline-dark:hover { background: rgba(255,255,255,0.05); }
+  .btn-ghost-dark {
+    background: transparent;
+    color: var(--lavender-glow);
+    padding: 14px 0;
+    border: none;
+    font-size: 16px;
+    font-weight: 460;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-ghost-dark:hover { opacity: 0.7; }
+
+  /* 4. CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+  }
+  .card {
+    border-radius: 16px;
+    padding: 32px;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .card-dark-bordered {
+    background: var(--dark-surface);
+    border: 1px solid var(--dark-border);
+  }
+  .card-dark-elevated {
+    background: var(--dark-surface-elevated);
+    border: 1px solid var(--dark-border);
+  }
+  .card-hero-surface {
+    background: var(--mysteria-purple);
+    border: 1px solid rgba(255,255,255,0.2);
+  }
+  .card-hover:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  }
+  .card h4 {
+    font-size: 22px;
+    font-weight: 460;
+    line-height: 0.76;
+    letter-spacing: -0.315px;
+    margin-bottom: 16px;
+    color: var(--dark-text-primary);
+  }
+  .card .card-desc {
+    font-size: 16px;
+    font-weight: 460;
+    line-height: 1.50;
+    color: var(--dark-text-secondary);
+  }
+  .card .card-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--lavender-glow);
+    font-family: monospace;
+    margin-top: 16px;
+    opacity: 0.8;
+  }
+
+  /* 5. FORMS */
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+  }
+  .form-group { display: flex; flex-direction: column; gap: 8px; }
+  .form-group label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--dark-text-primary);
+  }
+  .form-group input,
+  .form-group textarea {
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: 460;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 1px solid var(--dark-border);
+    background: var(--dark-surface);
+    color: var(--dark-text-primary);
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  .form-group input::placeholder,
+  .form-group textarea::placeholder {
+    color: var(--dark-text-tertiary);
+  }
+  .form-group input:focus,
+  .form-group textarea:focus {
+    border-color: var(--lavender-glow);
+  }
+  .form-group input.error {
+    border-color: #e74c3c;
+  }
+  .form-group textarea { resize: vertical; min-height: 100px; }
+  .form-hint {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--dark-text-tertiary);
+  }
+  .form-error-text {
+    font-size: 12px;
+    font-weight: 460;
+    color: #e74c3c;
+  }
+
+  /* 6. SPACING */
+  .spacing-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: flex-end;
+  }
+  .spacing-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  .spacing-box {
+    background: var(--lavender-glow);
+    border-radius: 4px;
+    height: 48px;
+    opacity: 0.7;
+  }
+  .spacing-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--dark-text-secondary);
+    font-family: monospace;
+  }
+
+  /* 7. RADIUS */
+  .radius-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    align-items: center;
+  }
+  .radius-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  .radius-box {
+    width: 100px;
+    height: 100px;
+    background: var(--dark-surface-elevated);
+    border: 1px solid var(--dark-border);
+  }
+  .radius-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--dark-text-primary);
+    font-family: monospace;
+  }
+  .radius-context {
+    font-size: 11px;
+    font-weight: 460;
+    color: var(--dark-text-tertiary);
+    text-align: center;
+  }
+
+  /* 8. ELEVATION */
+  .elevation-section { background: var(--dark-surface); border-radius: 16px; padding: 48px; border: 1px solid var(--dark-border); }
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 24px;
+  }
+  .elevation-card {
+    background: var(--dark-surface-elevated);
+    border-radius: 16px;
+    padding: 32px;
+    min-height: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .elevation-card h4 {
+    font-size: 16px;
+    font-weight: 540;
+    color: var(--dark-text-primary);
+    margin-bottom: 8px;
+  }
+  .elevation-card p {
+    font-size: 13px;
+    font-weight: 460;
+    color: var(--dark-text-secondary);
+    line-height: 1.4;
+  }
+  .elev-flat { box-shadow: none; border: none; }
+  .elev-border { box-shadow: none; border: 1px solid var(--dark-border); }
+  .elev-dark-border { box-shadow: none; border: 1px solid var(--dark-text-secondary); }
+  .elev-glow { box-shadow: 0 4px 20px rgba(203, 183, 251, 0.1); border: none; }
+  .elev-hero {
+    background: var(--mysteria-purple);
+    border: 1px solid rgba(255,255,255,0.2);
+  }
+
+  /* FOOTER */
+  footer {
+    text-align: center;
+    padding: 48px 40px;
+    border-top: 1px solid var(--dark-border);
+    font-size: 14px;
+    font-weight: 460;
+    color: var(--dark-text-tertiary);
+  }
+
+  /* RESPONSIVE */
+  @media (max-width: 768px) {
+    nav { padding: 12px 20px; }
+    .nav-links { display: none; }
+    .hero { padding: 80px 20px 100px; }
+    .hero h1 { font-size: 36px; }
+    .hero .subtitle { font-size: 16px; }
+    .section { padding: 48px 20px; }
+    .section-title { font-size: 32px; letter-spacing: -0.8px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 24px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+    .dark-badge { top: 12px; right: 12px; font-size: 11px; }
+  }
+</style>
+</head>
+<body>
+
+<!-- DARK MODE BADGE -->
+<div class="dark-badge">Dark Mode</div>
+
+<!-- NAV -->
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get Started</a>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <h1>Design System Inspired by Superhuman</h1>
+  <p class="subtitle">A visual catalog of design tokens extracted from Superhuman's website, rendered as a living style guide.</p>
+  <div class="hero-buttons">
+    <button class="btn-primary">Explore Tokens</button>
+    <button class="btn-secondary">View DESIGN.md</button>
+  </div>
+</section>
+
+<!-- 1. COLOR PALETTE -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">Every color token from the Superhuman design system with semantic naming and roles.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#1b1938;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Mysteria Purple</div>
+          <div class="swatch-hex">#1b1938</div>
+          <div class="swatch-role">Hero gradient background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#cbb7fb;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Lavender Glow</div>
+          <div class="swatch-hex">#cbb7fb</div>
+          <div class="swatch-role">Primary accent and highlight</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#292827;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Charcoal Ink</div>
+          <div class="swatch-hex">#292827</div>
+          <div class="swatch-role">Primary text on light surfaces</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#714cb6;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Amethyst Link</div>
+          <div class="swatch-hex">#714cb6</div>
+          <div class="swatch-role">Underlined link text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:rgba(255,255,255,0.95);"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Translucent White 95%</div>
+          <div class="swatch-hex">rgba(255,255,255,0.95)</div>
+          <div class="swatch-role">Hero text on dark surfaces</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:rgba(255,255,255,0.8);"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Misted White 80%</div>
+          <div class="swatch-hex">rgba(255,255,255,0.8)</div>
+          <div class="swatch-role">Secondary text on dark surfaces</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#ffffff;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Pure White</div>
+          <div class="swatch-hex">#ffffff</div>
+          <div class="swatch-role">Primary page background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#e9e5dd;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Warm Cream</div>
+          <div class="swatch-hex">#e9e5dd</div>
+          <div class="swatch-role">Button background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#dcd7d3;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Parchment Border</div>
+          <div class="swatch-hex">#dcd7d3</div>
+          <div class="swatch-role">Card and divider borders</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">Super Sans VF with non-standard weight stops (460, 540, 600, 700).</p>
+
+  <div class="type-sample">
+    <div class="type-text" style="font-size:64px; font-weight:540; line-height:0.96;">Display Hero</div>
+    <div class="type-label">Display Hero — 64px / 540 / 0.96 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:48px; font-weight:460; line-height:0.96; letter-spacing:-1.32px;">Section Display</div>
+    <div class="type-label">Section Display — 48px / 460 / 0.96 / -1.32px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:48px; font-weight:460; line-height:0.96;">Section Heading</div>
+    <div class="type-label">Section Heading — 48px / 460 / 0.96 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:28px; font-weight:540; line-height:1.14; letter-spacing:-0.63px;">Feature Title</div>
+    <div class="type-label">Feature Title — 28px / 540 / 1.14 / -0.63px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:26px; font-weight:460; line-height:1.30;">Sub-heading Large</div>
+    <div class="type-label">Sub-heading Large — 26px / 460 / 1.30 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:22px; font-weight:460; line-height:0.76; letter-spacing:-0.315px;">Card Heading</div>
+    <div class="type-label">Card Heading — 22px / 460 / 0.76 / -0.315px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:460; line-height:1.20;">Body Heading</div>
+    <div class="type-label">Body Heading — 20px / 460 / 1.20 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:460; line-height:1.10; letter-spacing:-0.55px;">Body Heading Alt</div>
+    <div class="type-label">Body Heading Alt — 20px / 460 / 1.10 / -0.55px</div>
+  </div>
+  <div class="type-sample">
+    <div 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</div>
+    <div class="type-label">Emphasis Body — 18px / 540 / 1.50 / -0.135px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body — 16px / 460 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:16px; font-weight:700; line-height:1.00;">Button / UI Bold</div>
+    <div class="type-label">Button / UI Bold — 16px / 700 / 1.00 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:16px; font-weight:600; line-height:1.00;">Button / UI Semi</div>
+    <div class="type-label">Button / UI Semi — 16px / 600 / 1.00 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:500; line-height:1.20; letter-spacing:-0.315px;">Caption — Small labels and metadata</div>
+    <div class="type-label">Caption — 14px / 500 / 1.20 / -0.315px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:600; line-height:1.29;">Caption Semi — Emphasized small text</div>
+    <div class="type-label">Caption Semi — 14px / 600 / 1.29 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:12px; font-weight:700; line-height:1.50;">MICRO LABEL</div>
+    <div class="type-label">Micro Label — 12px / 700 / 1.50 / 0px</div>
+  </div>
+</section>
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Restrained CTAs using Warm Cream and light tones on dark surfaces.</p>
+
+  <div class="button-grid">
+    <div class="button-item">
+      <button class="btn-cream-dark">Warm Cream Primary</button>
+      <span class="btn-label">#e9e5dd bg / #292827 text / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-light">Light Primary</button>
+      <span class="btn-label">white bg / dark text / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-outline-dark">Outline</button>
+      <span class="btn-label">transparent / dark border / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-ghost-dark">Ghost / Text Link</button>
+      <span class="btn-label">#cbb7fb / underline / no bg</span>
+    </div>
+  </div>
+
+  <div style="margin-top:40px; background:var(--mysteria-purple); border-radius:16px; padding:40px;">
+    <p style="font-size:14px; font-weight:600; color:var(--translucent-white-80); margin-bottom:16px; font-family:monospace;">On hero gradient surface:</p>
+    <div class="button-grid">
+      <div class="button-item">
+        <button class="btn-primary">Hero CTA</button>
+        <span class="btn-label" style="color:var(--translucent-white-80);">#e9e5dd bg on #1b1938</span>
+      </div>
+      <div class="button-item">
+        <button class="btn-secondary">Secondary Hero</button>
+        <span class="btn-label" style="color:var(--translucent-white-80);">transparent / white border</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Clean containment using borders on dark surfaces.</p>
+
+  <div class="card-grid">
+    <div class="card card-dark-bordered card-hover">
+      <h4>Surface Card</h4>
+      <p class="card-desc">Dark surface with subtle border, 16px radius. Hover to see the lift effect.</p>
+      <p class="card-label">bg: #1c1b1a / border: 1px solid #3a3938</p>
+    </div>
+    <div class="card card-dark-elevated">
+      <h4>Elevated Card</h4>
+      <p class="card-desc">Slightly lighter dark surface for elevated containers and feature sections.</p>
+      <p class="card-label">bg: #252423 / border: 1px solid #3a3938</p>
+    </div>
+    <div class="card card-hero-surface">
+      <h4>Hero Surface Card</h4>
+      <p class="card-desc">Deep purple background with semi-transparent white border for elements on the hero gradient.</p>
+      <p class="card-label">bg: #1b1938 / border: rgba(255,255,255,0.2)</p>
+    </div>
+  </div>
+</section>
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Dark-surface inputs with warm-toned focus states.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label>Default Input</label>
+      <input type="text" placeholder="Enter your email">
+      <span class="form-hint">border: 1px solid #3a3938 / radius: 8px</span>
+    </div>
+    <div class="form-group">
+      <label>Focus State</label>
+      <input type="text" placeholder="Focused input" style="border-color:#cbb7fb;">
+      <span class="form-hint">focus: border-color shifts to Lavender Glow</span>
+    </div>
+    <div class="form-group">
+      <label>Error State</label>
+      <input type="text" class="error" placeholder="Invalid input" value="bad@">
+      <span class="form-error-text">Please enter a valid email address</span>
+    </div>
+    <div class="form-group">
+      <label>Textarea</label>
+      <textarea placeholder="Enter your message"></textarea>
+      <span class="form-hint">Same styling as inputs, resizable vertically</span>
+    </div>
+  </div>
+</section>
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base unit system with 15 scale values.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:2px;"></div>
+      <span class="spacing-label">2px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:4px;"></div>
+      <span class="spacing-label">4px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:6px;"></div>
+      <span class="spacing-label">6px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:8px;"></div>
+      <span class="spacing-label">8px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:12px;"></div>
+      <span class="spacing-label">12px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:16px;"></div>
+      <span class="spacing-label">16px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:18px;"></div>
+      <span class="spacing-label">18px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:20px;"></div>
+      <span class="spacing-label">20px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:24px;"></div>
+      <span class="spacing-label">24px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:28px;"></div>
+      <span class="spacing-label">28px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:32px;"></div>
+      <span class="spacing-label">32px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:36px;"></div>
+      <span class="spacing-label">36px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:40px;"></div>
+      <span class="spacing-label">40px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:48px;"></div>
+      <span class="spacing-label">48px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:56px;"></div>
+      <span class="spacing-label">56px</span>
+    </div>
+  </div>
+</section>
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Binary system: 8px for small elements, 16px for cards and containers.</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:0px;"></div>
+      <span class="radius-label">0px</span>
+      <span class="radius-context">Sharp edges (none used)</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:8px;"></div>
+      <span class="radius-label">8px</span>
+      <span class="radius-context">Buttons, spans, inline</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:16px;"></div>
+      <span class="radius-label">16px</span>
+      <span class="radius-context">Cards, links, containers</span>
+    </div>
+  </div>
+</section>
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Restrained elevation using borders and color contrast instead of heavy shadows.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat">
+        <div>
+          <h4>Level 0 — Flat</h4>
+          <p>No shadow, dark surface background. The primary canvas for most content.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-border">
+        <div>
+          <h4>Level 1 — Border</h4>
+          <p>1px solid subtle border. Gentle card containment and section dividers.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-dark-border">
+        <div>
+          <h4>Level 2 — Strong Border</h4>
+          <p>1px solid lighter border. Header elements and prominent section separators.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-glow">
+        <div>
+          <h4>Level 3 — Lavender Glow</h4>
+          <p>Subtle lavender-tinted shadow for elevated cards and featured content.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-hero">
+        <div>
+          <h4>Level 4 — Hero Depth</h4>
+          <p>Semi-transparent white border on deep purple. Elements floating on the hero gradient.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  Generated from DESIGN.md — Superhuman Design System Catalog (Dark Mode)
+</footer>
+
+</body>
+</html>

design-md/superhuman/preview.html

@@ -0,0 +1,953 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Superhuman</title>
+<style>
+  :root {
+    --mysteria-purple: #1b1938;
+    --lavender-glow: #cbb7fb;
+    --charcoal-ink: #292827;
+    --amethyst-link: #714cb6;
+    --translucent-white-95: rgba(255,255,255,0.95);
+    --translucent-white-80: rgba(255,255,255,0.8);
+    --pure-white: #ffffff;
+    --warm-cream: #e9e5dd;
+    --parchment-border: #dcd7d3;
+    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: var(--font-family);
+    background: var(--pure-white);
+    color: var(--charcoal-ink);
+    font-weight: 460;
+    font-size: 16px;
+    line-height: 1.50;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* NAV */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 40px;
+    background: rgba(27, 25, 56, 0.95);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  .nav-brand {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--translucent-white-95);
+    text-decoration: none;
+    letter-spacing: -0.2px;
+  }
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    list-style: none;
+  }
+  .nav-links a {
+    font-size: 14px;
+    font-weight: 460;
+    color: var(--translucent-white-80);
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--translucent-white-95); }
+  .nav-cta {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 8px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.9; }
+
+  /* HERO */
+  .hero {
+    background: linear-gradient(180deg, var(--mysteria-purple) 0%, #2a1f5e 40%, #4a2d7a 70%, var(--lavender-glow) 100%);
+    padding: 120px 40px 140px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 120px;
+    background: linear-gradient(to bottom, transparent, var(--pure-white));
+  }
+  .hero h1 {
+    font-size: 64px;
+    font-weight: 540;
+    line-height: 0.96;
+    letter-spacing: 0px;
+    color: var(--translucent-white-95);
+    max-width: 800px;
+    margin: 0 auto 24px;
+  }
+  .hero .subtitle {
+    font-size: 20px;
+    font-weight: 460;
+    line-height: 1.25;
+    color: var(--translucent-white-80);
+    max-width: 560px;
+    margin: 0 auto 40px;
+  }
+  .hero-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .btn-primary {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-primary:hover { opacity: 0.9; }
+  .btn-secondary {
+    background: transparent;
+    color: var(--translucent-white-95);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 460;
+    text-decoration: none;
+    border: 1px solid rgba(255,255,255,0.2);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .btn-secondary:hover { background: rgba(255,255,255,0.05); }
+
+  /* SECTIONS */
+  .section {
+    padding: 80px 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .section-title {
+    font-size: 48px;
+    font-weight: 460;
+    line-height: 0.96;
+    letter-spacing: -1.32px;
+    color: var(--charcoal-ink);
+    margin-bottom: 12px;
+  }
+  .section-subtitle {
+    font-size: 18px;
+    font-weight: 460;
+    line-height: 1.50;
+    color: var(--charcoal-ink);
+    opacity: 0.6;
+    margin-bottom: 48px;
+  }
+
+  /* 1. COLOR PALETTE */
+  .color-category { margin-bottom: 40px; }
+  .color-category h3 {
+    font-size: 20px;
+    font-weight: 540;
+    line-height: 1.14;
+    margin-bottom: 20px;
+    color: var(--charcoal-ink);
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+  }
+  .color-swatch {
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--parchment-border);
+  }
+  .color-swatch .swatch-color {
+    height: 100px;
+    width: 100%;
+  }
+  .color-swatch .swatch-info {
+    padding: 12px 16px;
+    background: var(--pure-white);
+  }
+  .color-swatch .swatch-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--charcoal-ink);
+    margin-bottom: 2px;
+  }
+  .color-swatch .swatch-hex {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.5;
+    margin-bottom: 4px;
+    font-family: monospace;
+  }
+  .color-swatch .swatch-role {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.6;
+    line-height: 1.4;
+  }
+
+  /* 2. TYPOGRAPHY */
+  .type-sample {
+    padding: 24px 0;
+    border-bottom: 1px solid var(--parchment-border);
+  }
+  .type-sample:last-child { border-bottom: none; }
+  .type-sample .type-text {
+    color: var(--charcoal-ink);
+    margin-bottom: 8px;
+  }
+  .type-sample .type-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--amethyst-link);
+    font-family: monospace;
+    line-height: 1.4;
+  }
+
+  /* 3. BUTTONS */
+  .button-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: flex-start;
+  }
+  .button-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  .button-item .btn-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.5;
+    font-family: monospace;
+  }
+  .btn-dark {
+    background: var(--charcoal-ink);
+    color: var(--pure-white);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-dark:hover { opacity: 0.85; }
+  .btn-ghost {
+    background: transparent;
+    color: var(--amethyst-link);
+    padding: 14px 0;
+    border: none;
+    font-size: 16px;
+    font-weight: 460;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-ghost:hover { opacity: 0.7; }
+  .btn-hero-cream {
+    background: var(--warm-cream);
+    color: var(--charcoal-ink);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+  }
+  .btn-outline-hero {
+    background: transparent;
+    color: var(--charcoal-ink);
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 460;
+    border: 1px solid var(--parchment-border);
+    cursor: pointer;
+  }
+
+  /* 4. CARDS */
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+  }
+  .card {
+    border-radius: 16px;
+    padding: 32px;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .card-bordered {
+    background: var(--pure-white);
+    border: 1px solid var(--parchment-border);
+  }
+  .card-dark {
+    background: var(--charcoal-ink);
+    border: 1px solid #292827;
+    color: var(--translucent-white-95);
+  }
+  .card-dark .card-desc { color: var(--translucent-white-80); }
+  .card-hero-surface {
+    background: var(--mysteria-purple);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: var(--translucent-white-95);
+  }
+  .card-hero-surface .card-desc { color: var(--translucent-white-80); }
+  .card-hover:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+  }
+  .card h4 {
+    font-size: 22px;
+    font-weight: 460;
+    line-height: 0.76;
+    letter-spacing: -0.315px;
+    margin-bottom: 16px;
+  }
+  .card .card-desc {
+    font-size: 16px;
+    font-weight: 460;
+    line-height: 1.50;
+    opacity: 0.7;
+  }
+  .card .card-label {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--amethyst-link);
+    font-family: monospace;
+    margin-top: 16px;
+    opacity: 0.8;
+  }
+
+  /* 5. FORMS */
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+  }
+  .form-group { display: flex; flex-direction: column; gap: 8px; }
+  .form-group label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--charcoal-ink);
+  }
+  .form-group input,
+  .form-group textarea {
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: 460;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 1px solid var(--parchment-border);
+    background: var(--pure-white);
+    color: var(--charcoal-ink);
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  .form-group input:focus,
+  .form-group textarea:focus {
+    border-color: var(--charcoal-ink);
+  }
+  .form-group input.error {
+    border-color: #c0392b;
+  }
+  .form-group textarea { resize: vertical; min-height: 100px; }
+  .form-hint {
+    font-size: 12px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.5;
+  }
+  .form-error-text {
+    font-size: 12px;
+    font-weight: 460;
+    color: #c0392b;
+  }
+
+  /* 6. SPACING */
+  .spacing-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: flex-end;
+  }
+  .spacing-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  .spacing-box {
+    background: var(--lavender-glow);
+    border-radius: 4px;
+    height: 48px;
+  }
+  .spacing-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--charcoal-ink);
+    font-family: monospace;
+    opacity: 0.6;
+  }
+
+  /* 7. RADIUS */
+  .radius-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    align-items: center;
+  }
+  .radius-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  .radius-box {
+    width: 100px;
+    height: 100px;
+    background: var(--warm-cream);
+    border: 1px solid var(--parchment-border);
+  }
+  .radius-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--charcoal-ink);
+    font-family: monospace;
+  }
+  .radius-context {
+    font-size: 11px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.5;
+    text-align: center;
+  }
+
+  /* 8. ELEVATION */
+  .elevation-section { background: #f5f4f2; border-radius: 16px; padding: 48px; }
+  .elevation-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 24px;
+  }
+  .elevation-card {
+    background: var(--pure-white);
+    border-radius: 16px;
+    padding: 32px;
+    min-height: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .elevation-card h4 {
+    font-size: 16px;
+    font-weight: 540;
+    color: var(--charcoal-ink);
+    margin-bottom: 8px;
+  }
+  .elevation-card p {
+    font-size: 13px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.6;
+    line-height: 1.4;
+  }
+  .elev-flat { box-shadow: none; border: none; }
+  .elev-border { box-shadow: none; border: 1px solid var(--parchment-border); }
+  .elev-dark-border { box-shadow: none; border: 1px solid var(--charcoal-ink); }
+  .elev-glow { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: none; }
+  .elev-hero {
+    background: var(--mysteria-purple);
+    color: var(--translucent-white-95);
+    border: 1px solid rgba(255,255,255,0.2);
+  }
+  .elev-hero h4 { color: var(--translucent-white-95); }
+  .elev-hero p { color: var(--translucent-white-80); }
+
+  /* FOOTER */
+  footer {
+    text-align: center;
+    padding: 48px 40px;
+    border-top: 1px solid var(--parchment-border);
+    font-size: 14px;
+    font-weight: 460;
+    color: var(--charcoal-ink);
+    opacity: 0.5;
+  }
+
+  /* RESPONSIVE */
+  @media (max-width: 768px) {
+    nav { padding: 12px 20px; }
+    .nav-links { display: none; }
+    .hero { padding: 80px 20px 100px; }
+    .hero h1 { font-size: 36px; }
+    .hero .subtitle { font-size: 16px; }
+    .section { padding: 48px 20px; }
+    .section-title { font-size: 32px; letter-spacing: -0.8px; }
+    .color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-section { padding: 24px; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav>
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#spacing">Spacing</a></li>
+    <li><a href="#radius">Radius</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+  </ul>
+  <a href="#" class="nav-cta">Get Started</a>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <h1>Design System Inspired by Superhuman</h1>
+  <p class="subtitle">A visual catalog of design tokens extracted from Superhuman's website, rendered as a living style guide.</p>
+  <div class="hero-buttons">
+    <button class="btn-primary">Explore Tokens</button>
+    <button class="btn-secondary">View DESIGN.md</button>
+  </div>
+</section>
+
+<!-- 1. COLOR PALETTE -->
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-subtitle">Every color token from the Superhuman design system with semantic naming and roles.</p>
+
+  <div class="color-category">
+    <h3>Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#1b1938;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Mysteria Purple</div>
+          <div class="swatch-hex">#1b1938</div>
+          <div class="swatch-role">Hero gradient background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#cbb7fb;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Lavender Glow</div>
+          <div class="swatch-hex">#cbb7fb</div>
+          <div class="swatch-role">Primary accent and highlight</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#292827;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Charcoal Ink</div>
+          <div class="swatch-hex">#292827</div>
+          <div class="swatch-role">Primary text on light surfaces</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Secondary & Accent</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#714cb6;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Amethyst Link</div>
+          <div class="swatch-hex">#714cb6</div>
+          <div class="swatch-role">Underlined link text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:rgba(255,255,255,0.95); border: 1px solid #ddd;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Translucent White 95%</div>
+          <div class="swatch-hex">rgba(255,255,255,0.95)</div>
+          <div class="swatch-role">Hero text on dark surfaces</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:rgba(255,255,255,0.8); border: 1px solid #ddd;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Misted White 80%</div>
+          <div class="swatch-hex">rgba(255,255,255,0.8)</div>
+          <div class="swatch-role">Secondary text on dark surfaces</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-category">
+    <h3>Surface & Background</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#ffffff; border: 1px solid #eee;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Pure White</div>
+          <div class="swatch-hex">#ffffff</div>
+          <div class="swatch-role">Primary page background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#e9e5dd;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Warm Cream</div>
+          <div class="swatch-hex">#e9e5dd</div>
+          <div class="swatch-role">Button background</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="swatch-color" style="background:#dcd7d3;"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Parchment Border</div>
+          <div class="swatch-hex">#dcd7d3</div>
+          <div class="swatch-role">Card and divider borders</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 2. TYPOGRAPHY -->
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-subtitle">Super Sans VF with non-standard weight stops (460, 540, 600, 700).</p>
+
+  <div class="type-sample">
+    <div class="type-text" style="font-size:64px; font-weight:540; line-height:0.96;">Display Hero</div>
+    <div class="type-label">Display Hero — 64px / 540 / 0.96 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:48px; font-weight:460; line-height:0.96; letter-spacing:-1.32px;">Section Display</div>
+    <div class="type-label">Section Display — 48px / 460 / 0.96 / -1.32px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:48px; font-weight:460; line-height:0.96;">Section Heading</div>
+    <div class="type-label">Section Heading — 48px / 460 / 0.96 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:28px; font-weight:540; line-height:1.14; letter-spacing:-0.63px;">Feature Title</div>
+    <div class="type-label">Feature Title — 28px / 540 / 1.14 / -0.63px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:26px; font-weight:460; line-height:1.30;">Sub-heading Large</div>
+    <div class="type-label">Sub-heading Large — 26px / 460 / 1.30 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:22px; font-weight:460; line-height:0.76; letter-spacing:-0.315px;">Card Heading</div>
+    <div class="type-label">Card Heading — 22px / 460 / 0.76 / -0.315px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:460; line-height:1.20;">Body Heading</div>
+    <div class="type-label">Body Heading — 20px / 460 / 1.20 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:20px; font-weight:460; line-height:1.10; letter-spacing:-0.55px;">Body Heading Alt</div>
+    <div class="type-label">Body Heading Alt — 20px / 460 / 1.10 / -0.55px</div>
+  </div>
+  <div class="type-sample">
+    <div 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</div>
+    <div class="type-label">Emphasis Body — 18px / 540 / 1.50 / -0.135px</div>
+  </div>
+  <div class="type-sample">
+    <div 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.</div>
+    <div class="type-label">Body — 16px / 460 / 1.50 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:16px; font-weight:700; line-height:1.00;">Button / UI Bold</div>
+    <div class="type-label">Button / UI Bold — 16px / 700 / 1.00 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:16px; font-weight:600; line-height:1.00;">Button / UI Semi</div>
+    <div class="type-label">Button / UI Semi — 16px / 600 / 1.00 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:500; line-height:1.20; letter-spacing:-0.315px;">Caption — Small labels and metadata</div>
+    <div class="type-label">Caption — 14px / 500 / 1.20 / -0.315px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:14px; font-weight:600; line-height:1.29;">Caption Semi — Emphasized small text</div>
+    <div class="type-label">Caption Semi — 14px / 600 / 1.29 / 0px</div>
+  </div>
+  <div class="type-sample">
+    <div class="type-text" style="font-size:12px; font-weight:700; line-height:1.50;">MICRO LABEL</div>
+    <div class="type-label">Micro Label — 12px / 700 / 1.50 / 0px</div>
+  </div>
+</section>
+
+<!-- 3. BUTTONS -->
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-subtitle">Restrained CTAs using Warm Cream and Charcoal Ink.</p>
+
+  <div class="button-grid">
+    <div class="button-item">
+      <button class="btn-hero-cream">Warm Cream Primary</button>
+      <span class="btn-label">#e9e5dd bg / #292827 text / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-dark">Dark Primary</button>
+      <span class="btn-label">#292827 bg / #fff text / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-outline-hero">Outline</button>
+      <span class="btn-label">transparent / #dcd7d3 border / 8px radius</span>
+    </div>
+    <div class="button-item">
+      <button class="btn-ghost">Ghost / Text Link</button>
+      <span class="btn-label">#714cb6 / underline / no bg</span>
+    </div>
+  </div>
+
+  <div style="margin-top:40px; background:var(--mysteria-purple); border-radius:16px; padding:40px;">
+    <p style="font-size:14px; font-weight:600; color:var(--translucent-white-80); margin-bottom:16px; font-family:monospace;">On dark hero surface:</p>
+    <div class="button-grid">
+      <div class="button-item">
+        <button class="btn-primary">Hero CTA</button>
+        <span class="btn-label" style="color:var(--translucent-white-80);">#e9e5dd bg on #1b1938</span>
+      </div>
+      <div class="button-item">
+        <button class="btn-secondary">Secondary Hero</button>
+        <span class="btn-label" style="color:var(--translucent-white-80);">transparent / white border</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- 4. CARDS -->
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-subtitle">Clean containment using borders and minimal shadows.</p>
+
+  <div class="card-grid">
+    <div class="card card-bordered card-hover">
+      <h4>Content Card</h4>
+      <p class="card-desc">White background with Parchment Border, 16px radius. Hover to see lift effect.</p>
+      <p class="card-label">border: 1px solid #dcd7d3 / radius: 16px</p>
+    </div>
+    <div class="card card-dark">
+      <h4>Dark Surface Card</h4>
+      <p class="card-desc">Charcoal Ink background with warm-neutral tone for dark sections of the page.</p>
+      <p class="card-label" style="color:var(--lavender-glow);">bg: #292827 / border: 1px solid #292827</p>
+    </div>
+    <div class="card card-hero-surface">
+      <h4>Hero Surface Card</h4>
+      <p class="card-desc">Deep purple background with semi-transparent white border for elements on the hero gradient.</p>
+      <p class="card-label" style="color:var(--lavender-glow);">bg: #1b1938 / border: rgba(255,255,255,0.2)</p>
+    </div>
+  </div>
+</section>
+
+<!-- 5. FORMS -->
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-subtitle">Minimal form presence with warm-toned borders and clean focus states.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label>Default Input</label>
+      <input type="text" placeholder="Enter your email">
+      <span class="form-hint">border: 1px solid #dcd7d3 / radius: 8px</span>
+    </div>
+    <div class="form-group">
+      <label>Focus State</label>
+      <input type="text" placeholder="Focused input" style="border-color:#292827;">
+      <span class="form-hint">focus: border-color shifts to #292827</span>
+    </div>
+    <div class="form-group">
+      <label>Error State</label>
+      <input type="text" class="error" placeholder="Invalid input" value="bad@">
+      <span class="form-error-text">Please enter a valid email address</span>
+    </div>
+    <div class="form-group">
+      <label>Textarea</label>
+      <textarea placeholder="Enter your message"></textarea>
+      <span class="form-hint">Same styling as inputs, resizable vertically</span>
+    </div>
+  </div>
+</section>
+
+<!-- 6. SPACING -->
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-subtitle">8px base unit system with 15 scale values.</p>
+
+  <div class="spacing-row">
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:2px;"></div>
+      <span class="spacing-label">2px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:4px;"></div>
+      <span class="spacing-label">4px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:6px;"></div>
+      <span class="spacing-label">6px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:8px;"></div>
+      <span class="spacing-label">8px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:12px;"></div>
+      <span class="spacing-label">12px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:16px;"></div>
+      <span class="spacing-label">16px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:18px;"></div>
+      <span class="spacing-label">18px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:20px;"></div>
+      <span class="spacing-label">20px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:24px;"></div>
+      <span class="spacing-label">24px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:28px;"></div>
+      <span class="spacing-label">28px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:32px;"></div>
+      <span class="spacing-label">32px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:36px;"></div>
+      <span class="spacing-label">36px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:40px;"></div>
+      <span class="spacing-label">40px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:48px;"></div>
+      <span class="spacing-label">48px</span>
+    </div>
+    <div class="spacing-item">
+      <div class="spacing-box" style="width:56px;"></div>
+      <span class="spacing-label">56px</span>
+    </div>
+  </div>
+</section>
+
+<!-- 7. BORDER RADIUS -->
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-subtitle">Binary system: 8px for small elements, 16px for cards and containers.</p>
+
+  <div class="radius-row">
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:0px;"></div>
+      <span class="radius-label">0px</span>
+      <span class="radius-context">Sharp edges (none used)</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:8px;"></div>
+      <span class="radius-label">8px</span>
+      <span class="radius-context">Buttons, spans, inline</span>
+    </div>
+    <div class="radius-item">
+      <div class="radius-box" style="border-radius:16px;"></div>
+      <span class="radius-label">16px</span>
+      <span class="radius-context">Cards, links, containers</span>
+    </div>
+  </div>
+</section>
+
+<!-- 8. ELEVATION -->
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-subtitle">Restrained elevation using borders and color contrast instead of heavy shadows.</p>
+
+  <div class="elevation-section">
+    <div class="elevation-grid">
+      <div class="elevation-card elev-flat">
+        <div>
+          <h4>Level 0 — Flat</h4>
+          <p>No shadow, white background. The primary canvas for most content surfaces.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-border">
+        <div>
+          <h4>Level 1 — Border</h4>
+          <p>1px solid Parchment Border (#dcd7d3). Gentle card containment and section dividers.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-dark-border">
+        <div>
+          <h4>Level 2 — Dark Border</h4>
+          <p>1px solid Charcoal Ink (#292827). Header elements and dark section separators.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-glow">
+        <div>
+          <h4>Level 3 — Glow</h4>
+          <p>Subtle box-shadow for product screenshot containers and elevated cards.</p>
+        </div>
+      </div>
+      <div class="elevation-card elev-hero">
+        <div>
+          <h4>Level 4 — Hero Depth</h4>
+          <p>Semi-transparent white border on deep purple. Elements floating on the hero gradient.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  Generated from DESIGN.md — Superhuman Design System Catalog
+</footer>
+
+</body>
+</html>

design-md/warp/DESIGN.md

@@ -0,0 +1,253 @@
+# Design System: Warp
+
+## 1. Visual Theme & Atmosphere
+
+Warp'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.
+
+The 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.
+
+The 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.
+
+**Key Characteristics:**
+- Warm dark background — not cold black, but earthy near-black with warm gray undertones
+- Warm Parchment (`#faf9f6`) text instead of pure white — subtle cream warmth
+- Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface
+- Nature photography interleaved with product screenshots — lifestyle meets developer tool
+- Almost monochromatic warm gray palette — no bold accent colors
+- Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling
+- Pill-shaped dark buttons (`#353534`, 50px radius) — restrained, muted CTAs
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Warm Parchment** (`#faf9f6`): Primary text color — a barely-cream off-white that softens every surface
+- **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces — warm, not cold
+- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background
+
+### Secondary & Accent
+- **Stone Gray** (`#868584`): Secondary text, muted descriptions — warm mid-gray
+- **Ash Gray** (`#afaeac`): Body text, button text — the workhorse reading color
+- **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone — underlined links in content
+
+### Surface & Background
+- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation
+- **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment
+- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth
+
+### Neutrals & Text
+- **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text
+- **Ash Gray** (`#afaeac`): Body paragraphs, descriptions
+- **Stone Gray** (`#868584`): Secondary labels, subdued information
+- **Muted Purple** (`#666469`): Underlined links, tertiary content
+- **Dark Charcoal** (`#454545` / `#353534`): Borders, button backgrounds
+
+### Semantic & Accent
+- Warp operates as an almost monochromatic system — no bold accent colors
+- Interactive states are communicated through opacity changes and underline decorations rather than color shifts
+- Any accent color would break the warm, restrained palette
+
+### Gradient System
+- No explicit gradients on the marketing site
+- Depth is created through layered semi-transparent surfaces and photography rather than color gradients
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & Body**: `Matter Regular` — geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif
+- **Medium**: `Matter Medium` — weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`
+- **Square**: `Matter SQ Regular` — squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`
+- **UI Supplement**: `Inter` — used for specific UI elements. Fallbacks: `Inter Placeholder`
+- **Monospace Display**: `Geist Mono` — for code/terminal display headings
+- **Monospace Body**: `Matter Mono Regular` — custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |
+| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |
+| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |
+| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |
+| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |
+| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |
+| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |
+| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |
+| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |
+| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |
+| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |
+| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |
+| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |
+| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |
+| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |
+| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |
+| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |
+| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |
+| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |
+
+### Principles
+- **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
+- **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
+- **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
+- **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated
+- **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
+- **Ghost**: No visible background, text-only with underline decoration on hover
+- **Hover**: Subtle opacity or brightness shift — no dramatic color changes
+
+### Cards & Containers
+- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius
+- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)
+- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius
+- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Dark background inputs with warm gray text
+- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
+
+### Navigation
+- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
+- **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active/hover
+- **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing
+- **Mobile**: Collapses to simplified navigation
+- **Sticky**: Nav stays fixed on scroll
+
+### Image Treatment
+- **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool
+- **Terminal screenshots**: Product UI shown in realistic terminal window frames
+- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative
+- **Full-bleed**: Images often span full container width with 8px radius
+- **Video**: Video elements present with 10px border-radius
+
+### Testimonial Section
+- Social proof area ("Don't take our word for it") with quotes
+- Muted styling consistent with overall restraint
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
+- **Section padding**: 80px–120px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1500px container (breakpoint at 1500px), centered
+- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials
+- **Cinematic layout**: Wide containers that let photography breathe
+
+### Whitespace Philosophy
+- **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty
+- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information
+- **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment
+
+### Border Radius Scale
+- **4px**: Small interactive elements — buttons, tags
+- **5px–6px**: Standard components — links, small containers
+- **8px**: Images, video containers, standard cards
+- **10px**: Video elements, medium containers
+- **12px**: Feature cards, large images
+- **14px**: Large containers, prominent cards
+- **40px**: Large rounded sections
+- **50px**: Pill buttons — primary CTAs
+- **200px**: Progress bars — full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |
+| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |
+| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |
+| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |
+
+### Shadow Philosophy
+Warp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:
+- **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment
+- **Photography layering** — images create natural depth without artificial shadows
+- **Surface opacity shifts** — `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences
+- The effect is calm and grounded — nothing floats, everything rests
+
+### Decorative Depth
+- **Photography as depth**: Nature images create atmospheric depth that shadows cannot
+- **No glass or blur effects**: The design avoids trendy glassmorphism entirely
+- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm off-white (`#faf9f6`) for text instead of pure white — the cream undertone is essential
+- Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs
+- Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only
+- Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization
+- Interleave nature photography with product screenshots — this is core to the brand identity
+- Maintain the almost monochromatic warm gray palette — no bold accent colors
+- Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows
+- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment
+
+### Don't
+- Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)
+- Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays
+- Apply bold weight (700+) to any text — Warp never goes above Medium (500)
+- Use heavy drop shadows — depth comes from borders, photography, and opacity shifts
+- Create cold or blue-tinted dark backgrounds — the warmth is essential
+- Add decorative gradients or glow effects — the photography provides all visual interest
+- Use tight, compressed layouts — the editorial spacing is generous and contemplative
+- Mix in additional typefaces beyond the Matter family + Inter supplement
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |
+| Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |
+| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |
+
+### Touch Targets
+- Pill buttons: 50px radius with 10px padding — comfortable touch targets
+- Nav links: 16px text with surrounding padding for accessibility
+- Mobile CTAs: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → simplified mobile navigation
+- **Hero text**: 80px display → 56px → 48px across breakpoints
+- **Feature sections**: Side-by-side photography + text → stacked vertically
+- **Photography**: Scales within containers, maintains cinematic aspect ratios
+- **Section spacing**: Reduces proportionally — generous desktop → compact mobile
+
+### Image Behavior
+- Nature photography scales responsively, maintaining wide cinematic ratios
+- Terminal screenshots maintain aspect ratios within responsive containers
+- Video elements scale with 10px radius maintained
+- No art direction changes — same compositions across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Warm Parchment (`#faf9f6`)
+- Secondary Text: Ash Gray (`#afaeac`)
+- Tertiary Text: Stone Gray (`#868584`)
+- Button Background: Earth Gray (`#353534`)
+- Border: Mist Border (`rgba(226, 226, 226, 0.35)`)
+- Background: Deep warm near-black (page background)
+
+### Example Component Prompts
+- "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)"
+- "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"
+- "Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style"
+- "Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation"
+- "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"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential
+2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs
+3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis
+4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here
+5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy

design-md/warp/README.md

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

design-md/warp/preview-dark.html

@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Warp — Dark Mode</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #080807;
+    --bg-surface: #111110;
+    --parchment: #f5f4f1;
+    --ash: #a5a4a2;
+    --stone: #7a7978;
+    --purple-gray: #5c5a5f;
+    --earth: #2c2c2b;
+    --charcoal: #3a3a39;
+    --border: rgba(200, 200, 198, 0.25);
+    --border-subtle: rgba(200, 200, 198, 0.1);
+    --frosted: rgba(255, 255, 255, 0.03);
+    --frosted-btn: rgba(255, 255, 255, 0.12);
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--parchment);
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .dark-badge {
+    position: fixed; top: 14px; right: 14px; z-index: 200;
+    background: var(--parchment); color: var(--bg);
+    padding: 5px 12px; border-radius: 50px;
+    font-size: 11px; font-weight: 500;
+  }
+
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 32px;
+    background: rgba(8, 8, 7, 0.92);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
+  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
+  .nav-links a { color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400; transition: color 0.2s; }
+  .nav-links a:hover { color: var(--parchment); }
+  .nav-cta {
+    background: var(--earth); color: var(--ash) !important;
+    padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.8; }
+
+  .hero {
+    padding: 120px 32px 100px; text-align: center;
+    max-width: 1200px; margin: 0 auto;
+  }
+  .hero h1 {
+    font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
+    color: var(--parchment); margin-bottom: 20px;
+  }
+  .hero .subtitle {
+    font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
+    line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
+  }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+  .btn-primary {
+    display: inline-flex; align-items: center;
+    background: var(--earth); color: var(--ash);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 500; text-decoration: none;
+    border: none; cursor: pointer; transition: opacity 0.2s; font-family: var(--font);
+  }
+  .btn-primary:hover { opacity: 0.8; }
+  .btn-secondary {
+    display: inline-flex; align-items: center;
+    background: transparent; color: var(--parchment);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 400; text-decoration: none;
+    border: 1px solid var(--border); cursor: pointer;
+    transition: opacity 0.2s; font-family: var(--font);
+  }
+  .btn-secondary:hover { opacity: 0.7; }
+
+  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
+  .section-title { font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px; }
+  .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
+  .section-divider { border: none; border-top: 1px solid var(--border-subtle); max-width: 1136px; margin: 0 auto; }
+
+  .color-group { margin-bottom: 40px; }
+  .color-group-title { font-size: 12px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px; }
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
+  .color-swatch { border-radius: 12px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
+  .color-swatch-preview { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 12px; }
+  .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
+  .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
+  .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
+
+  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label { font-size: 12px; color: var(--stone); letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 8px; }
+  .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
+
+  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
+  .btn-tag {
+    background: var(--frosted-btn); color: var(--parchment);
+    padding: 4px 12px; border-radius: 6px;
+    font-size: 14px; font-weight: 400; border: none; cursor: pointer;
+    transition: opacity 0.2s; font-family: var(--font);
+  }
+  .btn-tag:hover { opacity: 0.7; }
+  .btn-ghost {
+    background: transparent; color: var(--ash);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 400; border: none; cursor: pointer;
+    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--charcoal);
+    transition: color 0.2s; font-family: var(--font);
+  }
+  .btn-ghost:hover { color: var(--parchment); }
+  .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
+  .btn-item { text-align: center; }
+
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+  .card {
+    background: var(--bg-surface); border-radius: 14px; padding: 28px;
+    border: 1px solid var(--border); transition: border-color 0.3s;
+  }
+  .card:hover { border-color: rgba(200, 200, 198, 0.4); }
+  .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
+  .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
+  .card-tag {
+    display: inline-block; padding: 2px 8px;
+    background: var(--frosted-btn); border-radius: 4px;
+    font-size: 12px; font-weight: 400; color: var(--parchment);
+    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
+  }
+
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
+  .form-input {
+    background: var(--bg); border: 1px solid var(--border-subtle);
+    border-radius: 8px; padding: 12px 14px; color: var(--parchment);
+    font-size: 16px; font-family: var(--font); outline: none; transition: border-color 0.2s;
+  }
+  .form-input::placeholder { color: var(--stone); }
+  .form-input:focus { border-color: var(--ash); }
+  .form-input-error { border-color: #b04040; }
+  .form-error-text { font-size: 12px; color: #b04040; }
+  textarea.form-input { min-height: 100px; resize: vertical; }
+
+  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
+  .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.25; }
+  .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
+
+  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-item { text-align: center; }
+  .radius-box { width: 64px; height: 64px; background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px; }
+  .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
+  .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
+
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
+  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
+  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
+  .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
+
+  .footer { text-align: center; padding: 48px 32px; border-top: 1px solid var(--border-subtle); margin-top: 40px; }
+  .footer p { font-size: 13px; color: var(--stone); }
+  .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 48px; letter-spacing: -1.5px; }
+    .section-title { font-size: 36px; letter-spacing: -0.7px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<div class="dark-badge">Dark Mode</div>
+
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Download</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <h1>Design System<br>Inspired by Warp</h1>
+  <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #faf9f6;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Warm Parchment</div>
+          <div class="color-swatch-hex">#faf9f6</div>
+          <div class="color-swatch-role">Primary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #353534;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Earth Gray</div>
+          <div class="color-swatch-hex">#353534</div>
+          <div class="color-swatch-role">Button backgrounds</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Deep Void</div>
+          <div class="color-swatch-hex">#0e0e0d</div>
+          <div class="color-swatch-role">Page background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #afaeac;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Ash Gray</div>
+          <div class="color-swatch-hex">#afaeac</div>
+          <div class="color-swatch-role">Body text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #868584;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Stone Gray</div>
+          <div class="color-swatch-hex">#868584</div>
+          <div class="color-swatch-role">Secondary text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #666469;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Purple-Tint Gray</div>
+          <div class="color-swatch-hex">#666469</div>
+          <div class="color-swatch-role">Link text</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Border</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted Veil</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
+          <div class="color-swatch-role">Surface overlay</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Mist Border</div>
+          <div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
+          <div class="color-swatch-role">Card borders</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted Button</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
+          <div class="color-swatch-role">Tag backgrounds</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
+    <div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
+    <div class="type-spec">Matter Regular (Inter fallback)</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
+    <div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
+    <div class="type-spec">Matter Regular</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
+    <div 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.</div>
+    <div class="type-spec">Matter Regular — relaxed reading</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
+    <div 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.</div>
+    <div class="type-spec">Matter Regular</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
+    <div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
+    <div class="type-spec">Matter Regular — editorial wide tracking</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Code — 16px / 400 / 1.00</div>
+    <div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
+    <div class="type-spec">Geist Mono</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Download Warp</a>
+      <span class="btn-label">Dark Pill</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Border Pill</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-tag">New Feature</button>
+      <span class="btn-label">Frosted Tag</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">Read the blog</button>
+      <span class="btn-label">Ghost Underline</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Semi-transparent borders, warm dark surfaces, editorial tags.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Terminal</div>
+      <h3 class="card-title">Built in Rust</h3>
+      <p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">AI Agent</div>
+      <h3 class="card-title">Agent Mode</h3>
+      <p class="card-text">Let AI agents handle complex terminal workflows while you focus on building.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Collaboration</div>
+      <h3 class="card-title">Shared Workflows</h3>
+      <p class="card-text">Share terminal sessions, commands, and configurations with your team.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Warm dark inputs with subtle borders. No colored focus rings.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email (Focus)</label>
+      <input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">API Key (Error)</label>
+      <input type="text" class="form-input form-input-error" value="invalid-key">
+      <span class="form-error-text">Invalid key format</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your workflow..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit with editorial-grade spacing.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From small tags to full pill CTAs.</p>
+
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">Remarkably flat — depth through borders and photography.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 0 — Flat</div>
+      <div class="elevation-desc">No shadow. The warm dark canvas baseline.</div>
+    </div>
+    <div class="elevation-card" style="background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 1 — Veil</div>
+      <div class="elevation-desc">Ultra-subtle white overlay.</div>
+    </div>
+    <div class="elevation-card" style="border: 1px solid var(--border);">
+      <div class="elevation-label">Level 2 — Border</div>
+      <div class="elevation-desc">Semi-transparent border containment.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.25) 0px 5px 15px; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 3 — Ambient</div>
+      <div class="elevation-desc">Subtle shadow for floating elements.</div>
+    </div>
+  </div>
+</section>
+
+<footer class="footer">
+  <p>Design system extracted from <a href="https://warp.dev">warp.dev</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/warp/preview.html

@@ -0,0 +1,535 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Inspired by Warp</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0e0e0d;
+    --bg-surface: #161615;
+    --parchment: #faf9f6;
+    --ash: #afaeac;
+    --stone: #868584;
+    --purple-gray: #666469;
+    --earth: #353534;
+    --charcoal: #454545;
+    --border: rgba(226, 226, 226, 0.35);
+    --border-subtle: rgba(226, 226, 226, 0.15);
+    --frosted: rgba(255, 255, 255, 0.04);
+    --frosted-btn: rgba(255, 255, 255, 0.16);
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--parchment);
+    line-height: 1.4;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .nav {
+    position: sticky; top: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 32px;
+    background: rgba(14, 14, 13, 0.9);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .nav-brand { font-size: 15px; font-weight: 500; color: var(--parchment); letter-spacing: -0.15px; }
+  .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
+  .nav-links a {
+    color: var(--stone); text-decoration: none; font-size: 16px; font-weight: 400;
+    transition: color 0.2s;
+  }
+  .nav-links a:hover { color: var(--parchment); }
+  .nav-cta {
+    background: var(--earth); color: var(--ash) !important;
+    padding: 8px 20px; border-radius: 50px; font-weight: 500; font-size: 14px;
+    transition: opacity 0.2s;
+  }
+  .nav-cta:hover { opacity: 0.8; }
+
+  .hero {
+    padding: 120px 32px 100px; text-align: center;
+    max-width: 1200px; margin: 0 auto;
+  }
+  .hero h1 {
+    font-size: 72px; font-weight: 400; letter-spacing: -2.4px; line-height: 1.0;
+    color: var(--parchment); margin-bottom: 20px;
+  }
+  .hero .subtitle {
+    font-size: 20px; color: var(--ash); letter-spacing: -0.2px;
+    line-height: 1.4; max-width: 560px; margin: 0 auto 40px;
+  }
+  .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+  .btn-primary {
+    display: inline-flex; align-items: center;
+    background: var(--earth); color: var(--ash);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 500; text-decoration: none;
+    border: none; cursor: pointer; transition: opacity 0.2s;
+    font-family: var(--font);
+  }
+  .btn-primary:hover { opacity: 0.8; }
+  .btn-secondary {
+    display: inline-flex; align-items: center;
+    background: transparent; color: var(--parchment);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 400; text-decoration: none;
+    border: 1px solid var(--border); cursor: pointer;
+    transition: opacity 0.2s; font-family: var(--font);
+  }
+  .btn-secondary:hover { opacity: 0.7; }
+
+  .section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
+  .section-title {
+    font-size: 48px; font-weight: 400; letter-spacing: -0.96px; line-height: 1.2; margin-bottom: 12px;
+  }
+  .section-desc { font-size: 18px; color: var(--ash); margin-bottom: 48px; letter-spacing: -0.18px; line-height: 1.3; }
+  .section-divider {
+    border: none; border-top: 1px solid var(--border-subtle);
+    max-width: 1136px; margin: 0 auto;
+  }
+
+  .color-group { margin-bottom: 40px; }
+  .color-group-title {
+    font-size: 12px; font-weight: 400; color: var(--stone);
+    text-transform: uppercase; letter-spacing: 2.4px; margin-bottom: 16px;
+  }
+  .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
+  .color-swatch {
+    border-radius: 12px; overflow: hidden;
+    background: var(--bg-surface); border: 1px solid var(--border-subtle);
+  }
+  .color-swatch-preview { height: 72px; width: 100%; }
+  .color-swatch-info { padding: 12px; }
+  .color-swatch-name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
+  .color-swatch-hex { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
+  .color-swatch-role { font-size: 11px; color: var(--ash); margin-top: 4px; line-height: 1.4; }
+
+  .type-sample { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
+  .type-sample:last-child { border-bottom: none; }
+  .type-label {
+    font-size: 12px; color: var(--stone); letter-spacing: 2.4px;
+    text-transform: uppercase; margin-bottom: 8px;
+  }
+  .type-spec { font-size: 12px; color: var(--stone); margin-top: 8px; }
+
+  .button-showcase { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
+  .btn-tag {
+    background: var(--frosted-btn); color: var(--parchment);
+    padding: 4px 12px; border-radius: 6px;
+    font-size: 14px; font-weight: 400; border: none; cursor: pointer;
+    transition: opacity 0.2s; font-family: var(--font);
+  }
+  .btn-tag:hover { opacity: 0.7; }
+  .btn-ghost {
+    background: transparent; color: var(--ash);
+    padding: 12px 28px; border-radius: 50px;
+    font-size: 16px; font-weight: 400; border: none; cursor: pointer;
+    text-decoration: underline; text-underline-offset: 3px;
+    text-decoration-color: var(--charcoal);
+    transition: color 0.2s; font-family: var(--font);
+  }
+  .btn-ghost:hover { color: var(--parchment); }
+  .btn-label { display: block; font-size: 11px; color: var(--stone); margin-top: 8px; text-align: center; }
+  .btn-item { text-align: center; }
+
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+  .card {
+    background: var(--bg-surface); border-radius: 14px; padding: 28px;
+    border: 1px solid var(--border); transition: border-color 0.3s;
+  }
+  .card:hover { border-color: rgba(226, 226, 226, 0.5); }
+  .card-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; line-height: 1.14; }
+  .card-text { font-size: 16px; color: var(--ash); line-height: 1.4; }
+  .card-tag {
+    display: inline-block; padding: 2px 8px;
+    background: var(--frosted-btn); border-radius: 4px;
+    font-size: 12px; font-weight: 400; color: var(--parchment);
+    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px;
+  }
+
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  .form-label { font-size: 14px; font-weight: 400; color: var(--stone); text-transform: uppercase; letter-spacing: 1.4px; }
+  .form-input {
+    background: var(--bg); border: 1px solid var(--border-subtle);
+    border-radius: 8px; padding: 12px 14px; color: var(--parchment);
+    font-size: 16px; font-family: var(--font); outline: none;
+    transition: border-color 0.2s;
+  }
+  .form-input::placeholder { color: var(--stone); }
+  .form-input:focus { border-color: var(--ash); }
+  .form-input-error { border-color: #c45050; }
+  .form-error-text { font-size: 12px; color: #c45050; }
+  textarea.form-input { min-height: 100px; resize: vertical; }
+
+  .spacing-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
+  .spacing-box { height: 28px; background: var(--ash); border-radius: 4px; opacity: 0.3; }
+  .spacing-label { font-size: 12px; color: var(--stone); min-width: 50px; text-align: right; font-family: var(--font-mono); }
+
+  .radius-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
+  .radius-item { text-align: center; }
+  .radius-box {
+    width: 64px; height: 64px;
+    background: var(--frosted); border: 1px solid var(--border-subtle); margin-bottom: 8px;
+  }
+  .radius-value { font-size: 11px; color: var(--stone); font-family: var(--font-mono); }
+  .radius-context { font-size: 10px; color: var(--purple-gray); margin-top: 2px; }
+
+  .elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
+  .elevation-card { padding: 24px; border-radius: 12px; background: var(--bg-surface); min-height: 110px; }
+  .elevation-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
+  .elevation-desc { font-size: 13px; color: var(--ash); line-height: 1.5; }
+
+  .footer {
+    text-align: center; padding: 48px 32px;
+    border-top: 1px solid var(--border-subtle); margin-top: 40px;
+  }
+  .footer p { font-size: 13px; color: var(--stone); }
+  .footer a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--charcoal); }
+
+  @media (max-width: 768px) {
+    .hero h1 { font-size: 48px; letter-spacing: -1.5px; }
+    .section-title { font-size: 36px; letter-spacing: -0.7px; }
+    .nav-links { display: none; }
+    .color-grid { grid-template-columns: repeat(2, 1fr); }
+    .card-grid { grid-template-columns: 1fr; }
+    .form-grid { grid-template-columns: 1fr; }
+    .elevation-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <span class="nav-brand">awesome-design-md</span>
+  <ul class="nav-links">
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#cards">Cards</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#elevation">Elevation</a></li>
+    <li><a href="#" class="nav-cta">Download</a></li>
+  </ul>
+</nav>
+
+<section class="hero">
+  <h1>Design System<br>Inspired by Warp</h1>
+  <p class="subtitle">A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.</p>
+  <div class="hero-buttons">
+    <a href="#colors" class="btn-primary">Explore Tokens</a>
+    <a href="#buttons" class="btn-secondary">View Components</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors">
+  <h2 class="section-title">Color Palette</h2>
+  <p class="section-desc">Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.</p>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Primary</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #faf9f6;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Warm Parchment</div>
+          <div class="color-swatch-hex">#faf9f6</div>
+          <div class="color-swatch-role">Primary text, barely-cream off-white</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #353534;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Earth Gray</div>
+          <div class="color-swatch-hex">#353534</div>
+          <div class="color-swatch-role">Button backgrounds, dark surfaces</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #0e0e0d; border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Deep Void</div>
+          <div class="color-swatch-hex">#0e0e0d</div>
+          <div class="color-swatch-role">Page background, warm near-black</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Neutrals & Text</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #afaeac;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Ash Gray</div>
+          <div class="color-swatch-hex">#afaeac</div>
+          <div class="color-swatch-role">Body text, button text</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #868584;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Stone Gray</div>
+          <div class="color-swatch-hex">#868584</div>
+          <div class="color-swatch-role">Secondary text, labels</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: #666469;"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Purple-Tint Gray</div>
+          <div class="color-swatch-hex">#666469</div>
+          <div class="color-swatch-role">Link text, subtle purple undertone</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="color-group">
+    <h3 class="color-group-title">Surface & Border</h3>
+    <div class="color-grid">
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted Veil</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
+          <div class="color-swatch-role">Subtle surface overlay</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(226,226,226,0.35);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Mist Border</div>
+          <div class="color-swatch-hex">rgba(226,226,226,0.35)</div>
+          <div class="color-swatch-role">Card borders, containment</div>
+        </div>
+      </div>
+      <div class="color-swatch">
+        <div class="color-swatch-preview" style="background: rgba(255,255,255,0.16);"></div>
+        <div class="color-swatch-info">
+          <div class="color-swatch-name">Frosted Button</div>
+          <div class="color-swatch-hex">rgba(255,255,255,0.16)</div>
+          <div class="color-swatch-role">Tag/inline button background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography">
+  <h2 class="section-title">Typography Scale</h2>
+  <p class="section-desc">Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.</p>
+
+  <div class="type-sample">
+    <div class="type-label">Display Hero — 80px / 400 / 1.00 / -2.4px</div>
+    <div style="font-size: 72px; font-weight: 400; line-height: 1.0; letter-spacing: -2.4px;">The best terminal</div>
+    <div class="type-spec">Matter Regular (shown in Inter fallback) — maximum compression</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Section Display — 56px / 400 / 1.20 / -0.56px</div>
+    <div style="font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: -0.56px;">Development environment</div>
+    <div class="type-spec">Matter Regular — feature section headings</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Feature Heading — 40px / 400 / 1.10 / -0.4px</div>
+    <div style="font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px;">Agents that actually work</div>
+    <div class="type-spec">Matter Regular — feature block titles</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Card Title — 22px / 500 / 1.14</div>
+    <div style="font-size: 22px; font-weight: 500; line-height: 1.14;">Everything you need to ship faster</div>
+    <div class="type-spec">Matter Medium — emphasized card headers</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body Large — 20px / 400 / 1.40 / -0.2px</div>
+    <div 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.</div>
+    <div class="type-spec">Matter Regular — relaxed reading rhythm</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Body — 18px / 400 / 1.30 / -0.18px</div>
+    <div 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.</div>
+    <div class="type-spec">Matter Regular — standard body paragraphs</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Uppercase Label — 12px / 400 / 1.35 / 2.4px</div>
+    <div style="font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 2.4px; text-transform: uppercase; color: var(--stone);">Featured Integration</div>
+    <div class="type-spec">Matter Regular — editorial categorization, wide tracking</div>
+  </div>
+
+  <div class="type-sample">
+    <div class="type-label">Code — 16px / 400 / 1.00</div>
+    <div style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.0; color: var(--parchment);">curl -fsSL https://warp.dev/install | bash</div>
+    <div class="type-spec">Geist Mono / Matter Mono Regular — terminal display</div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons">
+  <h2 class="section-title">Button Variants</h2>
+  <p class="section-desc">Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.</p>
+
+  <div class="button-showcase">
+    <div class="btn-item">
+      <a href="#" class="btn-primary">Download Warp</a>
+      <span class="btn-label">Dark Pill / Primary</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-secondary">Learn More</a>
+      <span class="btn-label">Border Pill / Secondary</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-tag">New Feature</button>
+      <span class="btn-label">Frosted Tag / 6px</span>
+    </div>
+    <div class="btn-item">
+      <button class="btn-ghost">Read the blog</button>
+      <span class="btn-label">Ghost / Underline</span>
+    </div>
+    <div class="btn-item">
+      <a href="#" class="btn-primary" style="padding: 8px 20px; font-size: 14px;">Sign Up</a>
+      <span class="btn-label">Small / Nav CTA</span>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards">
+  <h2 class="section-title">Card Examples</h2>
+  <p class="section-desc">Semi-transparent borders for containment, warm dark surfaces, editorial category tags.</p>
+
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-tag">Terminal</div>
+      <h3 class="card-title">Built in Rust</h3>
+      <p class="card-text">Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">AI Agent</div>
+      <h3 class="card-title">Agent Mode</h3>
+      <p class="card-text">Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.</p>
+    </div>
+    <div class="card">
+      <div class="card-tag">Collaboration</div>
+      <h3 class="card-title">Shared Workflows</h3>
+      <p class="card-text">Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms">
+  <h2 class="section-title">Form Elements</h2>
+  <p class="section-desc">Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.</p>
+
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Full Name</label>
+      <input type="text" class="form-input" placeholder="Enter your name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Email (Focus)</label>
+      <input type="email" class="form-input" placeholder="you@warp.dev" style="border-color: var(--ash);">
+    </div>
+    <div class="form-group">
+      <label class="form-label">API Key (Error)</label>
+      <input type="text" class="form-input form-input-error" value="invalid-key">
+      <span class="form-error-text">Invalid key format</span>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Description</label>
+      <textarea class="form-input" placeholder="Describe your workflow..."></textarea>
+    </div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="spacing">
+  <h2 class="section-title">Spacing Scale</h2>
+  <p class="section-desc">8px base unit with editorial-grade spacing for the magazine-like layout.</p>
+
+  <div>
+    <div class="spacing-row"><span class="spacing-label">4px</span><div class="spacing-box" style="width: 16px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">8px</span><div class="spacing-box" style="width: 36px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">12px</span><div class="spacing-box" style="width: 56px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">16px</span><div class="spacing-box" style="width: 80px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">24px</span><div class="spacing-box" style="width: 128px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">32px</span><div class="spacing-box" style="width: 180px;"></div></div>
+    <div class="spacing-row"><span class="spacing-label">36px</span><div class="spacing-box" style="width: 210px;"></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="radius">
+  <h2 class="section-title">Border Radius Scale</h2>
+  <p class="section-desc">From small tags to full pill CTAs — radius grows with element prominence.</p>
+
+  <div class="radius-row">
+    <div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-value">4px</div><div class="radius-context">Tags</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-value">6px</div><div class="radius-context">Buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-value">8px</div><div class="radius-context">Images</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 12px;"></div><div class="radius-value">12px</div><div class="radius-context">Cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 14px;"></div><div class="radius-value">14px</div><div class="radius-context">Large cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 40px;"></div><div class="radius-value">40px</div><div class="radius-context">Sections</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 50px; width: 64px; height: 40px;"></div><div class="radius-value">50px</div><div class="radius-context">Pill CTA</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius: 200px; width: 120px; height: 12px;"></div><div class="radius-value">200px</div><div class="radius-context">Progress bar</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="elevation">
+  <h2 class="section-title">Elevation & Depth</h2>
+  <p class="section-desc">Remarkably flat — depth through borders and photography, not shadows.</p>
+
+  <div class="elevation-grid">
+    <div class="elevation-card" style="box-shadow: none; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 0 — Flat</div>
+      <div class="elevation-desc">No shadow. The warm dark canvas baseline. Most surfaces rest here.</div>
+    </div>
+    <div class="elevation-card" style="background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 1 — Veil</div>
+      <div class="elevation-desc">Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.</div>
+    </div>
+    <div class="elevation-card" style="border: 1px solid var(--border);">
+      <div class="elevation-label">Level 2 — Border</div>
+      <div class="elevation-desc">Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.</div>
+    </div>
+    <div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; border: 1px solid var(--border-subtle);">
+      <div class="elevation-label">Level 3 — Ambient</div>
+      <div class="elevation-desc">Subtle ambient shadow for floating elements. Used sparingly.</div>
+    </div>
+  </div>
+</section>
+
+<footer class="footer">
+  <p>Design system extracted from <a href="https://warp.dev">warp.dev</a> — Generated by awesome-design-md</p>
+</footer>
+
+</body>
+</html>

design-md/webflow/DESIGN.md

@@ -0,0 +1,92 @@
+# Design System: Webflow
+
+## 1. Visual Theme & Atmosphere
+
+Webflow'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.
+
+**Key Characteristics:**
+- White canvas with near-black (`#080808`) text
+- Webflow Blue (`#146ef5`) as primary brand + interactive color
+- WF Visual Sans Variable — custom variable font with weight 500–600
+- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
+- Conservative 4px–8px border-radius — sharp, not rounded
+- Multi-layer shadow stacks (5-layer cascading shadows)
+- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
+- translate(6px) hover animation on buttons
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#080808`): Primary text
+- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
+- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
+- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
+- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
+
+### Secondary Accents
+- **Purple** (`#7a3dff`): `--_color---secondary--purple`
+- **Pink** (`#ed52cb`): `--_color---secondary--pink`
+- **Green** (`#00d722`): `--_color---secondary--green`
+- **Orange** (`#ff6b00`): `--_color---secondary--orange`
+- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
+- **Red** (`#ee1d36`): `--_color---secondary--red`
+
+### Neutral
+- **Gray 800** (`#222222`): Dark secondary text
+- **Gray 700** (`#363636`): Mid text
+- **Gray 300** (`#ababab`): Muted text, placeholder
+- **Mid Gray** (`#5a5a5a`): Link text
+- **Border Gray** (`#d8d8d8`): Borders, dividers
+- **Border Hover** (`#898989`): Hover border
+
+### Shadows
+- **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`
+
+## 3. Typography Rules
+
+### Font: `WF Visual Sans Variable`, fallback: `Arial`
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 80px | 600 | 1.04 | -0.8px | |
+| Section Heading | 56px | 600 | 1.04 | normal | |
+| Sub-heading | 32px | 500 | 1.30 | normal | |
+| Feature Title | 24px | 500–600 | 1.30 | normal | |
+| Body | 20px | 400–500 | 1.40–1.50 | normal | |
+| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
+| Button | 16px | 500 | 1.60 | -0.16px | |
+| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
+| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
+| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
+| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
+| Code: Inconsolata (companion monospace font)
+
+## 4. Component Stylings
+
+### Buttons
+- Transparent: text `#080808`, translate(6px) on hover
+- White circle: 50% radius, white bg
+- Blue badge: `#146ef5` bg, 4px radius, weight 550
+
+### Cards: `1px solid #d8d8d8`, 4px–8px radius
+### Badges: Blue-tinted bg at 10% opacity, 4px radius
+
+## 5. Layout
+- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
+- Radius: 2px, 4px, 8px, 50% — conservative, sharp
+- Breakpoints: 479px, 768px, 992px
+
+## 6. Depth: 5-layer cascading shadow system
+
+## 7. Do's and Don'ts
+- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
+- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
+
+## 8. Responsive: 479px, 768px, 992px
+
+## 9. Agent Prompt Guide
+- Text: Near Black (`#080808`)
+- CTA: Webflow Blue (`#146ef5`)
+- Background: White (`#ffffff`)
+- Border: `#d8d8d8`
+- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`

design-md/webflow/README.md

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

design-md/webflow/preview-dark.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Webflow (Dark)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }
+  .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); }
+  .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }
+  .btn-blue:hover { transform:translate(6px); }
+  .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; }
+  .btn-outline:hover { transform:translate(6px); }
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }
+  .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }
+  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:48px; }
+  .color-swatch-info { padding:6px; }
+  .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }
+  .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }
+  .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }
+  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }
+  .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }
+  .card p { font-size:14px; color:var(--gray); }
+  .form-group { margin-bottom:10px; max-width:360px; }
+  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }
+  .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; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:var(--red); }
+  .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; }
+  .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }
+  .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }
+  .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .radius-row { display:flex; gap:8px; flex-wrap:wrap; }
+  .radius-item { text-align:center; }
+  .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }
+  .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }
+  .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }
+  .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }
+  .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }
+  .footer a { color:var(--white); text-decoration:underline; }
+  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }
+</style>
+</head>
+<body>
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Get started</a></nav>
+<div 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</div>
+<section class="hero"><h1>Design System<br>Inspired by <span>Webflow</span></h1><p>Every color, font, and component — smarter sites start here.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get started — it's free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+<hr class="section-divider">
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#080808"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#080808</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#146ef5"></div><div class="color-swatch-info"><div class="color-swatch-name">Webflow Blue</div><div class="color-swatch-hex">#146ef5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#3b89ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 400</div><div class="color-swatch-hex">#3b89ff</div></div></div>
+</div>
+<div class="color-group-label">Secondary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7a3dff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#7a3dff</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ed52cb"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ed52cb</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#00d722"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#00d722</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff6b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ff6b00</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffae13"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#ffae13</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ee1d36"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#ee1d36</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 800</div><div class="color-swatch-hex">#222222</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#363636"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#363636</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5a5a5a"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5a5a5a</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ababab"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#ababab</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#d8d8d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#d8d8d8</div></div></div>
+</div></section>
+<hr class="section-divider">
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography</h2>
+<div class="type-sample"><div style="font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;">Display Hero</div><div class="type-meta">WF Visual Sans — 80px / 600 / 1.04 / -0.8px</div></div>
+<div class="type-sample"><div style="font-size:32px; font-weight:500; line-height:1.30;">Sub-heading</div><div class="type-meta">WF Visual Sans — 32px / 500 / 1.30</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">WF Visual Sans — 20px / 400 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;">Button Label</div><div class="type-meta">WF Visual Sans — 16px / 500 / 1.60 / -0.16px</div></div>
+<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;">UPPERCASE LABEL</div><div class="type-meta">WF Visual Sans — 15px / 500 / uppercase / +1.5px</div></div>
+<div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);">MICRO LABEL</div><div class="type-meta">WF Visual Sans — 10px / 600 / uppercase / +1px</div></div>
+</section>
+<hr class="section-divider">
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Get started</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
+<div class="button-item"><span 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</span><div class="button-label">Badge</div></div>
+</div>
+<p style="font-size:11px; color:var(--gray-300); margin-top:10px;">Hover to see translate(6px).</p>
+</section>
+<hr class="section-divider">
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Design</h3><p>Build visually with a flexible canvas and production-ready code output.</p></div>
+<div class="card"><h3>CMS</h3><p>Create dynamic content with a powerful content management system.</p></div>
+<div class="card"><h3>Interactions</h3><p>Craft complex animations without writing a single line of code.</p></div>
+</div></section>
+<hr class="section-divider">
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="My Website"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
+</section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:40px; height:40px;"></div><div class="radius-label">50%</div></div></div></section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div 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;"><div class="elevation-label">5-Layer</div><div class="elevation-desc">Cascading shadow stack</div></div></div></section>
+<footer class="footer">Generated from <a href="https://webflow.com/">webflow.com</a> DESIGN.md — awesome-design-md</footer>
+</body>
+</html>

design-md/webflow/preview.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System Preview: Webflow (Light)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :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; }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.60; -webkit-font-smoothing:antialiased; }
+  .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); }
+  .nav-brand { font-size:14px; font-weight:600; color:var(--black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
+  .nav-links a:hover { color:var(--blue); }
+  .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; }
+  .hero { padding:80px 24px 64px; text-align:center; }
+  .hero h1 { font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px; margin-bottom:16px; }
+  .hero h1 span { color:var(--blue); }
+  .hero p { font-size:20px; color:var(--gray); max-width:520px; margin:0 auto 32px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; }
+  .btn-blue { display:inline-block; background:var(--blue); color:var(--white); padding:12px 24px; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; letter-spacing:-0.16px; transition:transform 0.2s; }
+  .btn-blue:hover { transform:translate(6px); }
+  .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; }
+  .btn-outline:hover { transform:translate(6px); }
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300); margin-bottom:8px; }
+  .section-title { font-size:56px; font-weight:600; line-height:1.04; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-bottom:16px; }
+  .color-swatch { border-radius:4px; overflow:hidden; border:1px solid var(--border); }
+  .color-swatch-block { height:48px; }
+  .color-swatch-info { padding:6px; }
+  .color-swatch-name { font-size:10px; font-weight:500; margin-bottom:1px; }
+  .color-swatch-hex { font-size:9px; color:var(--gray-300); font-family:monospace; }
+  .color-group-label { font-size:10px; font-weight:600; color:var(--gray); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.6px; }
+  .type-sample { margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(216,216,216,0.5); }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:8px; color:var(--gray-300); margin-top:2px; font-family:monospace; }
+  .button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:8px; color:var(--gray-300); margin-top:4px; }
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; }
+  .card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; }
+  .card h3 { font-size:24px; font-weight:500; line-height:1.30; margin-bottom:6px; }
+  .card p { font-size:14px; color:var(--gray); }
+  .form-group { margin-bottom:10px; max-width:360px; }
+  .form-label { display:block; font-size:14px; font-weight:500; margin-bottom:3px; }
+  .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; }
+  .form-input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
+  .form-input--error { border-color:var(--red); }
+  .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; }
+  .form-state-label { font-size:8px; color:var(--gray-300); margin-top:2px; }
+  .spacing-row { display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
+  .spacing-item { text-align:center; }
+  .spacing-block { background:var(--blue); border-radius:2px; margin-bottom:2px; height:18px; opacity:0.5; }
+  .spacing-value { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .radius-row { display:flex; gap:8px; flex-wrap:wrap; }
+  .radius-item { text-align:center; }
+  .radius-box { width:40px; height:40px; background:rgba(20,110,245,0.1); border:1px solid var(--blue); margin-bottom:2px; }
+  .radius-label { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:8px; }
+  .elevation-card { background:var(--white); border-radius:8px; padding:12px; text-align:center; }
+  .elevation-label { font-size:11px; font-weight:500; margin-bottom:2px; }
+  .elevation-desc { font-size:7px; color:var(--gray-300); font-family:monospace; }
+  .footer { padding:20px; text-align:center; background:var(--blue); color:rgba(255,255,255,0.7); font-size:10px; }
+  .footer a { color:var(--white); text-decoration:underline; }
+  @media (max-width:768px) { .hero h1 { font-size:40px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } .section-title { font-size:32px; } }
+</style>
+</head>
+<body>
+<nav class="nav"><a class="nav-brand" href="#">awesome-design-md</a><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Get started</a></nav>
+<section class="hero"><h1>Design System<br>Inspired by <span>Webflow</span></h1><p>Every color, font, and component — smarter sites start here.</p><div class="hero-buttons"><a class="btn-blue" href="#">Get started — it's free</a><a class="btn-outline" href="#">Contact sales</a></div></section>
+<hr class="section-divider">
+<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+<div class="color-group-label">Primary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#080808"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#080808</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#146ef5"></div><div class="color-swatch-info"><div class="color-swatch-name">Webflow Blue</div><div class="color-swatch-hex">#146ef5</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#3b89ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue 400</div><div class="color-swatch-hex">#3b89ff</div></div></div>
+</div>
+<div class="color-group-label">Secondary</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#7a3dff"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple</div><div class="color-swatch-hex">#7a3dff</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ed52cb"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ed52cb</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#00d722"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#00d722</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ff6b00"></div><div class="color-swatch-info"><div class="color-swatch-name">Orange</div><div class="color-swatch-hex">#ff6b00</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ffae13"></div><div class="color-swatch-info"><div class="color-swatch-name">Yellow</div><div class="color-swatch-hex">#ffae13</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ee1d36"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#ee1d36</div></div></div>
+</div>
+<div class="color-group-label">Neutral</div>
+<div class="color-grid">
+<div class="color-swatch"><div class="color-swatch-block" style="background:#222222"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 800</div><div class="color-swatch-hex">#222222</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#363636"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 700</div><div class="color-swatch-hex">#363636</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#5a5a5a"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#5a5a5a</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#ababab"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 300</div><div class="color-swatch-hex">#ababab</div></div></div>
+<div class="color-swatch"><div class="color-swatch-block" style="background:#d8d8d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#d8d8d8</div></div></div>
+</div></section>
+<hr class="section-divider">
+<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography</h2>
+<div class="type-sample"><div style="font-size:64px; font-weight:600; line-height:1.04; letter-spacing:-0.8px;">Display Hero</div><div class="type-meta">WF Visual Sans — 80px / 600 / 1.04 / -0.8px</div></div>
+<div class="type-sample"><div style="font-size:32px; font-weight:500; line-height:1.30;">Sub-heading</div><div class="type-meta">WF Visual Sans — 32px / 500 / 1.30</div></div>
+<div class="type-sample"><div 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.</div><div class="type-meta">WF Visual Sans — 20px / 400 / 1.50</div></div>
+<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.60; letter-spacing:-0.16px;">Button Label</div><div class="type-meta">WF Visual Sans — 16px / 500 / 1.60 / -0.16px</div></div>
+<div class="type-sample"><div style="font-size:15px; font-weight:500; line-height:1.30; text-transform:uppercase; letter-spacing:1.5px;">UPPERCASE LABEL</div><div class="type-meta">WF Visual Sans — 15px / 500 / uppercase / +1.5px</div></div>
+<div class="type-sample"><div style="font-size:10px; font-weight:600; line-height:1.30; text-transform:uppercase; letter-spacing:1px; color:var(--gray-300);">MICRO LABEL</div><div class="type-meta">WF Visual Sans — 10px / 600 / uppercase / +1px</div></div>
+</section>
+<hr class="section-divider">
+<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
+<div class="button-row">
+<div class="button-item"><a class="btn-blue" href="#">Get started</a><div class="button-label">Primary Blue</div></div>
+<div class="button-item"><a class="btn-outline" href="#">Contact</a><div class="button-label">Outlined</div></div>
+<div class="button-item"><span 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</span><div class="button-label">Badge</div></div>
+</div>
+<p style="font-size:11px; color:var(--gray-300); margin-top:10px;">Hover to see translate(6px).</p>
+</section>
+<hr class="section-divider">
+<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
+<div class="card-grid">
+<div class="card"><h3>Design</h3><p>Build visually with a flexible canvas and production-ready code output.</p></div>
+<div class="card"><h3>CMS</h3><p>Create dynamic content with a powerful content management system.</p></div>
+<div class="card"><h3>Interactions</h3><p>Craft complex animations without writing a single line of code.</p></div>
+</div></section>
+<hr class="section-divider">
+<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
+<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default</div></div>
+<div class="form-group"><label class="form-label">Project</label><input class="form-input form-input--focus" type="text" value="My Website"><div class="form-state-label">Focus (blue ring)</div></div>
+<div class="form-group"><label class="form-label">Domain</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
+<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" placeholder="Describe your project..."></textarea></div>
+</section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
+<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
+<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:2px"></div><div class="radius-label">2px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:50%; width:40px; height:40px;"></div><div class="radius-label">50%</div></div></div></section>
+<hr class="section-divider">
+<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
+<div class="elevation-grid"><div class="elevation-card" style="border:1px solid var(--border);"><div class="elevation-label">Flat</div><div class="elevation-desc">Border only</div></div><div 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;"><div class="elevation-label">5-Layer</div><div class="elevation-desc">Cascading shadow stack</div></div></div></section>
+<footer class="footer">Generated from <a href="https://webflow.com/">webflow.com</a> DESIGN.md — awesome-design-md</footer>
+</body>
+</html>