laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new designs

Browse Source
This commit is contained in:
necatiozmen
2026-04-01 15:58:51 +03:00
parent 3976d28923
commit ed3c8649c3
53 changed files with 9390 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
design-md/airbnb/DESIGN.md Normal file
View File

@@ -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

23
design-md/airbnb/README.md Normal file
View File

@@ -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)

234
design-md/airbnb/preview-dark.html Normal file
View File

@@ -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>

233
design-md/airbnb/preview.html Normal file
View File

@@ -0,0 +1,233 @@
<!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 (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=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--white: #ffffff; --near-black: #222222; --rausch: #ff385c; --deep-rausch: #e00b41;
--secondary: #6a6a6a; --disabled: #929292; --border: #c1c1c1; --surface: #f2f2f2;
--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 #ebebeb; }
.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 #ebebeb; 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 #ebebeb; 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>
<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>