solmate-skills 1.0.1 → 1.0.2

package/awesome-design-md/design-md/airbnb/DESIGN.md

@@ -0,0 +1,246 @@
+# Design System: Airbnb
+
+## 1. Visual Theme & Atmosphere
+
+Airbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.
+
+The typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's "belong anywhere" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.
+
+What distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.
+
+**Key Characteristics:**
+- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent
+- Airbnb Cereal VF — custom variable font with warm, rounded terminals
+- Palette-based token system (`--palette-*`) for systematic color management
+- Three-layer card shadows: border ring + soft blur + stronger blur
+- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements
+- Circular navigation controls (50% radius)
+- Photography-first listing cards — images are the hero content
+- Near-black text (`#222222`) — warm, not cold
+- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states
+- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red
+- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light
+- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover
+
+### Premium Tiers
+- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding
+- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding
+
+### Text Scale
+- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold
+- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text
+- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions
+- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state
+- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links
+
+### Interactive
+- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational
+- **Border Gray** (`#c1c1c1`): Border color for cards and dividers
+- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces
+
+### Surface & Shadows
+- **Pure White** (`#ffffff`): Page background, card surfaces
+- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift
+- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`
+- **OpenType Features**: `"salt"` (stylistic alternates) on specific caption elements
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |
+| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |
+| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |
+| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |
+| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |
+| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |
+| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |
+| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |
+| Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |
+| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |
+| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `"salt"` feature |
+| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |
+| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |
+| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `"salt"` feature |
+| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |
+
+### Principles
+- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.
+- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.
+- **"salt" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.
+- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark**
+- Background: `#222222` (near-black, not pure black)
+- Text: `#ffffff`
+- Padding: 0px 24px
+- Radius: 8px
+- Hover: transitions to error/brand accent via `var(--accent-bg-error)`
+- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)
+
+**Circular Nav**
+- Background: `#f2f2f2`
+- Text: `#222222`
+- Radius: 50% (circle)
+- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)
+- Active: 4px white border ring + focus shadow
+- Focus: scale(0.92) shrink animation
+
+### Cards & Containers
+- Background: `#ffffff`
+- Radius: 14px (badges), 20px (cards/buttons), 32px (large)
+- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)
+- Listing cards: full-width photography on top, details below
+- Carousel controls: circular 50% buttons
+
+### Inputs
+- Search: `#222222` text
+- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring
+- Radius: depends on context (search bar uses pill-like rounding)
+
+### Navigation
+- White sticky header with search bar centered
+- Airbnb logo (Rausch Red) left-aligned
+- Category filter pills: horizontal scroll below search
+- Circular nav controls for carousel navigation
+- "Become a Host" text link, avatar/menu right-aligned
+
+### Image Treatment
+- Listing photography fills card top with generous height
+- Image carousel with dot indicators
+- Heart/wishlist icon overlay on images
+- 8px–14px radius on contained images
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px
+
+### Grid & Container
+- Full-width header with centered search
+- Category pill bar: horizontal scrollable row
+- Listing grid: responsive multi-column (3–5 columns on desktop)
+- Full-width footer with link columns
+
+### Whitespace Philosophy
+- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.
+- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.
+- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.
+
+### Border Radius Scale
+- Subtle (4px): Small links
+- Standard (8px): Buttons, tabs, search elements
+- Badge (14px): Status badges, labels
+- Card (20px): Feature cards, large buttons
+- Large (32px): Large containers, hero elements
+- Circle (50%): Nav controls, avatars, icons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |
+| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |
+| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |
+
+**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#222222` (warm near-black) for text — never pure `#000000`
+- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent
+- Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional
+- Apply the three-layer card shadow for all elevated surfaces
+- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls
+- Use photography as the primary visual content — listings are image-first
+- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy
+- Use circular (50%) buttons for carousel/navigation controls
+
+### Don't
+- Don't use pure black (`#000000`) for text — always `#222222` (warm)
+- Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only
+- Don't use thin font weights (300, 400) for headings — 500 minimum
+- Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated
+- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core
+- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system
+- Don't override the palette token system — use `--palette-*` variables consistently
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <375px | Single column, compact search |
+| Mobile | 375–550px | Standard mobile listing grid |
+| Tablet Small | 550–744px | 2-column listings |
+| Tablet | 744–950px | Search bar expansion |
+| Desktop Small | 950–1128px | 3-column listings |
+| Desktop | 1128–1440px | 4-column grid, full header |
+| Large Desktop | 1440–1920px | 5-column grid |
+| Ultra-wide | >1920px | Maximum grid width |
+
+*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*
+
+### Touch Targets
+- Circular nav buttons: adequate 50% radius sizing
+- Listing cards: full-card tap target on mobile
+- Search bar: prominently sized for thumb interaction
+- Category pills: horizontally scrollable with generous padding
+
+### Collapsing Strategy
+- Listing grid: 5 → 4 → 3 → 2 → 1 columns
+- Search: expanded bar → compact bar → overlay
+- Category pills: horizontal scroll at all sizes
+- Navigation: full header → mobile simplified
+- Map: side panel → overlay/toggle
+
+### Image Behavior
+- Listing photos: carousel with swipe on mobile
+- Responsive image sizing with aspect ratio maintained
+- Heart overlay positioned consistently across sizes
+- Photo quality adjusts based on viewport
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`#222222`)
+- Brand accent: Rausch Red (`#ff385c`)
+- Secondary text: `#6a6a6a`
+- Disabled: `rgba(0,0,0,0.24)`
+- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`
+- Card shadow: full three-layer stack
+- Button surface: `#f2f2f2`
+
+### Example Component Prompts
+- "Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a."
+- "Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon)."
+- "Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius)."
+- "Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent."
+- "Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline."
+
+### Iteration Guide
+1. Start with white — the photography provides all the color
+2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only
+3. Near-black (#222222) for text — the warmth matters
+4. Three-layer shadows create natural, warm lift — always use all three layers
+5. Generous radius: 8px buttons, 20px cards, 50% controls
+6. Cereal VF at 500–700 weight — no thin weights for any heading
+7. Photography is hero — every listing card is image-first

package/awesome-design-md/design-md/airbnb/README.md

@@ -0,0 +1,23 @@
+# Airbnb Inspired Design System
+
+[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/airbnb/DESIGN.md) extracted from the public [airbnb](https://airbnb.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/airbnb/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Airbnb 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
+![Airbnb Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-dark-screenshot.png)
+
+### Light Mode
+![Airbnb Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/airbnb/preview-screenshot.png)

package/awesome-design-md/design-md/airbnb/preview-dark.html

@@ -0,0 +1,234 @@
+<!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: Airbnb (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --white: #1a1a1a; --near-black: #f0f0f0; --rausch: #ff385c; --deep-rausch: #e00b41;
+    --secondary: #a0a0a0; --disabled: #666666; --border: #3a3a3a; --surface: #2a2a2a;
+    --luxe: #460479; --plus: #92174d; --legal-blue: #428bff; --error: #c13515;
+    --shadow-card: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px;
+    --shadow-hover: rgba(0,0,0,0.08) 0px 4px 12px;
+    --font: 'Nunito Sans', -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif;
+  }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--white); color:var(--near-black); font-family:var(--font); font-size:14px; font-weight:400; line-height:1.43; -webkit-font-smoothing:antialiased; }
+
+  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid #2a2a2a; }
+  .nav-brand { font-size:14px; font-weight:600; color:var(--near-black); text-decoration:none; }
+  .nav-links { display:flex; gap:20px; list-style:none; }
+  .nav-links a { font-size:14px; font-weight:500; color:var(--secondary); text-decoration:none; transition:color 0.15s; }
+  .nav-links a:hover { color:var(--near-black); }
+  .nav-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:700; text-decoration:none; border:none; }
+
+  .hero { padding:64px 24px; text-align:center; }
+  .hero h1 { font-size:28px; font-weight:700; line-height:1.43; margin-bottom:12px; }
+  .hero h1 span { color:var(--rausch); }
+  .hero p { font-size:16px; font-weight:400; color:var(--secondary); max-width:480px; margin:0 auto 24px; }
+  .hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
+  .btn-dark { display:inline-block; background:var(--near-black); color:var(--white); padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; border:none; cursor:pointer; }
+  .btn-outline { display:inline-block; background:transparent; color:var(--near-black); padding:12px 24px; border-radius:8px; border:1px solid var(--near-black); font-family:var(--font); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer; }
+  .btn-circle { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--near-black); width:36px; height:36px; border-radius:50%; font-size:14px; text-decoration:none; border:none; cursor:pointer; transition:box-shadow 0.2s; }
+  .btn-circle:hover { box-shadow:var(--shadow-hover); }
+
+  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
+  .section-label { font-size:12px; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:0.32px; margin-bottom:8px; }
+  .section-title { font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px; margin-bottom:24px; }
+  .section-divider { border:none; border-top:1px solid #2a2a2a; margin:0; }
+
+  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(145px,1fr)); gap:10px; margin-bottom:20px; }
+  .color-swatch { border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); }
+  .color-swatch-block { height:64px; width:100%; }
+  .color-swatch-info { padding:10px; }
+  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
+  .color-swatch-hex { font-size:10px; color:var(--secondary); font-family:monospace; }
+  .color-swatch-role { font-size:9px; color:var(--disabled); margin-top:2px; }
+  .color-group-label { font-size:12px; font-weight:700; color:var(--secondary); margin:20px 0 8px; }
+
+  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
+  .type-sample:last-child { border-bottom:none; }
+  .type-meta { font-size:10px; color:var(--disabled); margin-top:4px; font-family:monospace; }
+
+  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .button-item { text-align:center; }
+  .button-label { font-size:10px; color:var(--disabled); margin-top:6px; }
+
+  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
+  .card { background:var(--white); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); }
+  .card-img { height:160px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--disabled); font-size:12px; }
+  .card-body { padding:16px; }
+  .card h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
+  .card p { font-size:14px; color:var(--secondary); }
+
+  .form-group { margin-bottom:16px; max-width:400px; }
+  .form-label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
+  .form-input { width:100%; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; outline:none; }
+  .form-input:focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
+  .form-input--focus { border-color:var(--near-black); box-shadow:0 0 0 2px var(--near-black); }
+  .form-input--error { border-color:var(--error); box-shadow:0 0 0 2px var(--error); }
+  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--near-black); border:1px solid var(--border); padding:12px 16px; border-radius:8px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
+  .form-state-label { font-size:9px; color:var(--disabled); 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(--rausch); border-radius:4px; margin-bottom:4px; height:24px; opacity:0.7; }
+  .spacing-value { font-size:9px; color:var(--disabled); font-family:monospace; }
+
+  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
+  .radius-item { text-align:center; }
+  .radius-box { width:56px; height:56px; background:var(--surface); margin-bottom:4px; }
+  .radius-label { font-size:9px; color:var(--disabled); font-family:monospace; }
+  .radius-context { font-size:8px; color:var(--disabled); }
+
+  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
+  .elevation-card { background:var(--white); border-radius:20px; padding:16px; text-align:center; }
+  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
+  .elevation-desc { font-size:9px; color:var(--disabled); font-family:monospace; }
+
+  .footer { padding:24px; text-align:center; border-top:1px solid #2a2a2a; font-size:12px; color:var(--secondary); }
+  .footer a { color:var(--rausch); text-decoration:underline; }
+
+  @media (max-width:744px) { .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="#">&#x1F50D;</a>
+</nav>
+<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff385c;color:#ffffff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;">Dark Mode</div>
+
+<section class="hero">
+  <h1>Design System Inspired by <span>Airbnb</span></h1>
+  <p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.</p>
+  <div class="hero-buttons">
+    <a class="btn-dark" href="#">Explore Stays</a>
+    <a class="btn-outline" href="#">Become a Host</a>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="colors">
+  <div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
+  <div class="color-group-label">Brand</div>
+  <div class="color-grid">
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#ff385c"></div><div class="color-swatch-info"><div class="color-swatch-name">Rausch Red</div><div class="color-swatch-hex">#ff385c</div><div class="color-swatch-role">Primary CTA</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#e00b41"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Rausch</div><div class="color-swatch-hex">#e00b41</div><div class="color-swatch-role">Pressed state</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#460479"></div><div class="color-swatch-info"><div class="color-swatch-name">Luxe Purple</div><div class="color-swatch-hex">#460479</div><div class="color-swatch-role">Luxe tier</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#92174d"></div><div class="color-swatch-info"><div class="color-swatch-name">Plus Magenta</div><div class="color-swatch-hex">#92174d</div><div class="color-swatch-role">Plus tier</div></div></div>
+  </div>
+  <div class="color-group-label">Text & 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">Near Black</div><div class="color-swatch-hex">#222222</div><div class="color-swatch-role">Primary text</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#6a6a6a"></div><div class="color-swatch-info"><div class="color-swatch-name">Secondary</div><div class="color-swatch-hex">#6a6a6a</div><div class="color-swatch-role">Secondary text</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#c1c1c1"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#c1c1c1</div><div class="color-swatch-role">Borders</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#f2f2f2"></div><div class="color-swatch-info"><div class="color-swatch-name">Surface</div><div class="color-swatch-hex">#f2f2f2</div><div class="color-swatch-role">Circular buttons</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#428bff"></div><div class="color-swatch-info"><div class="color-swatch-name">Legal Blue</div><div class="color-swatch-hex">#428bff</div><div class="color-swatch-role">Legal links</div></div></div>
+    <div class="color-swatch"><div class="color-swatch-block" style="background:#c13515"></div><div class="color-swatch-info"><div class="color-swatch-name">Error</div><div class="color-swatch-hex">#c13515</div><div class="color-swatch-role">Error text</div></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="typography">
+  <div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
+  <div class="type-sample"><div style="font-size:28px; font-weight:700; line-height:1.43;">Section Heading</div><div class="type-meta">Section — 28px / 700 / 1.43 / Cereal VF</div></div>
+  <div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.18; letter-spacing:-0.44px;">Card Heading</div><div class="type-meta">Card — 22px / 600 / 1.18 / -0.44px</div></div>
+  <div class="type-sample"><div style="font-size:20px; font-weight:600; line-height:1.20; letter-spacing:-0.18px;">Feature Title</div><div class="type-meta">Feature — 20px / 600 / 1.20 / -0.18px</div></div>
+  <div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.25;">UI Medium — Inspiration for future getaways</div><div class="type-meta">UI — 16px / 500 / 1.25</div></div>
+  <div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.43; color:var(--secondary);">Body — Istanbul, Turkey. Apartment in Kadikoy. 2 guests, 1 bed, 1 bath.</div><div class="type-meta">Body — 14px / 400 / 1.43</div></div>
+  <div class="type-sample"><div style="font-size:12px; font-weight:700; line-height:1.33;">Tag Bold — $145 night</div><div class="type-meta">Tag Bold — 12px / 700 / 1.33</div></div>
+  <div class="type-sample"><div style="font-size:8px; font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:0.32px;">SUPERHOST</div><div class="type-meta">Micro — 8px / 700 / uppercase / +0.32px</div></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="buttons">
+  <div class="section-label">03 / Buttons</div><h2 class="section-title">Button Variants</h2>
+  <div class="button-row">
+    <div class="button-item"><a class="btn-dark" href="#">Explore</a><div class="button-label">Primary Dark</div></div>
+    <div class="button-item"><a class="btn-outline" href="#">Host</a><div class="button-label">Outlined</div></div>
+    <div class="button-item"><a class="btn-circle" href="#">&#8592;</a><div class="button-label">Circle Nav</div></div>
+    <div class="button-item"><a class="btn-circle" href="#">&#8594;</a><div class="button-label">Circle Nav</div></div>
+    <div class="button-item"><span style="display:inline-flex; align-items:center; justify-content:center; background:var(--rausch); color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;">&#x1F50D;</span><div class="button-label">Search</div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="cards">
+  <div class="section-label">04 / Cards</div><h2 class="section-title">Card Examples</h2>
+  <div class="card-grid">
+    <div class="card"><div class="card-img">Photo placeholder</div><div class="card-body"><h3>Istanbul, Turkey</h3><p>Entire apartment. 2 guests, 1 bed. $78 night.</p></div></div>
+    <div class="card"><div class="card-img" style="background:#eee;">Photo placeholder</div><div class="card-body"><h3>Barcelona, Spain</h3><p>Private room. 3 guests, 2 beds. $92 night.</p></div></div>
+    <div class="card"><div class="card-img" style="background:#e8e8e8;">Photo placeholder</div><div class="card-body"><h3>Galveston, TX</h3><p>Entire house. 6 guests, 3 beds. $145 night.</p></div></div>
+  </div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section" id="forms">
+  <div class="section-label">05 / Forms</div><h2 class="section-title">Form Elements</h2>
+  <div class="form-group"><label class="form-label">Where</label><input class="form-input" type="text" placeholder="Search destinations"><div class="form-state-label">Default</div></div>
+  <div class="form-group"><label class="form-label">Check in</label><input class="form-input form-input--focus" type="text" value="Apr 15, 2026"><div class="form-state-label">Focus (dark ring)</div></div>
+  <div class="form-group"><label class="form-label">Guests</label><input class="form-input form-input--error" type="text" value="0 guests"><div class="form-state-label">Error</div></div>
+  <div class="form-group"><label class="form-label">Message host</label><textarea class="form-textarea" placeholder="Tell your host about your trip..."></textarea></div>
+</section>
+
+<hr class="section-divider">
+
+<section class="section">
+  <div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing Scale</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>
+</section>
+
+<hr class="section-divider">
+
+<section class="section">
+  <div class="section-label">07 / Radius</div><h2 class="section-title">Border 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 class="radius-context">Buttons</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:14px"></div><div class="radius-label">14px</div><div class="radius-context">Badges</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:20px"></div><div class="radius-label">20px</div><div class="radius-context">Cards</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:32px"></div><div class="radius-label">32px</div><div class="radius-context">Large</div></div>
+    <div class="radius-item"><div class="radius-box" style="border-radius:50%; width:56px; height:56px;"></div><div class="radius-label">50%</div><div class="radius-context">Controls</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 #ebebeb;"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div>
+    <div class="elevation-card" style="box-shadow:var(--shadow-card);"><div class="elevation-label">Card</div><div class="elevation-desc">Three-layer warm</div></div>
+    <div class="elevation-card" style="box-shadow:var(--shadow-hover);"><div class="elevation-label">Hover</div><div class="elevation-desc">Interactive lift</div></div>
+    <div class="elevation-card" style="box-shadow:0 0 0 2px var(--near-black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Dark focus ring</div></div>
+  </div>
+</section>
+
+<footer class="footer">Generated from <a href="https://airbnb.com/">airbnb.com</a> DESIGN.md — awesome-design-md</footer>
+
+</body>
+</html>