oh-my-opencode 4.9.2 → 4.11.0

package/dist/skills/frontend/references/design/_INDEX.md

@@ -0,0 +1,189 @@
+# Frontend Design References — Index
+
+All reference files live flat in this directory. Three layers:
+- **Layer 0 — design system architecture** (1 file): the mandatory gate. Defines `DESIGN.md` structure, creation workflow, validation rules. Always loaded by Phase 0 when no design system exists.
+- **Layer A — taste skills** (12 files): how to execute. Discipline, motion, spacing, anti-slop, output completeness.
+- **Layer B — design systems** (69 files): what it should look like. Brand-specific color/type/component tokens.
+
+**Phase 0 runs first** (check/create `DESIGN.md`), then most non-trivial tasks load **one Layer A + one Layer B** together. See the routing flow in the sibling `README.md`.
+
+---
+
+## Layer 0 — Design System Architecture (1)
+
+| File | Purpose | Load when |
+|---|---|---|
+| `design-system-architecture.md` | Defines the 7-section `DESIGN.md` structure (atmosphere, color tokens, typography scale, spacing system, components, motion, depth). Creation workflow for new and existing projects. Validation rules and memory management. | Phase 0 fires and no `DESIGN.md` exists in the project. Also load when extracting a design system from existing code. |
+
+---
+
+## Layer A — Taste Skills (12)
+
+From [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill).
+
+### Code-generation skills (write actual frontend code)
+
+| File | Purpose | Load when |
+|---|---|---|
+| `taste-skill.md` | Default all-rounder. Premium frontend without forcing one narrow visual style. Has 3 dials: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY. | The user wants a "good-looking" website/app and gives no specific aesthetic direction. Safe default. |
+| `gpt-tasteskill.md` | Stricter, more opinionated. High-variance layouts, stronger GSAP motion, more aggressive anti-slop. Tuned for GPT/Codex. | The user wants something genuinely *Awwwards-tier* — bold layouts, magnetic interactions, scroll-triggered scenes. Or `taste-skill.md` results felt "too safe". |
+| `image-to-code-skill.md` | Image-first workflow: generate premium reference images → analyze → implement to match. | The user says "generate the design first, then code it", or visual quality is the main challenge. Pair with `imagegen-frontend-web.md`. |
+| `redesign-skill.md` | Audits existing UI and surgically fixes weak layout, spacing, hierarchy, color, type. Does NOT rewrite from scratch. | Existing project + "make this better", "improve the UI", "redesign", "this looks bad". DO NOT use on greenfield. |
+| `soft-skill.md` | Polished, calm, expensive-looking. Softer contrast, generous whitespace, premium fonts (Geist, Inter Display), spring motion. | The user says "premium", "luxurious", "calm", "expensive", "spa", "wellness", "boutique", "editorial". Or shows references like Linear, Vercel, Stripe, Apple marketing. |
+| `minimalist-skill.md` | Editorial product UI inspired by Notion/Linear. Restrained monochrome palette, crisp structure, generous whitespace. | The user says "minimal", "clean", "Notion-style", "Linear-style", "editorial", "boring is good", "remove decoration". |
+| `brutalist-skill.md` | BETA. Mechanical visual language. Swiss typography, sharp contrast, raw structure, experimental composition. | The user says "brutalist", "raw", "Swiss", "experimental", "industrial", "unstyled", "anti-design". |
+| `output-skill.md` | Pushes for complete output: no placeholder comments, no `// TODO`, no skipped implementation, no half-done components. | Stack on top of any other skill when the agent has been lazy or the user complains "you keep leaving things undone". Do not use alone. |
+| `stitch-skill.md` | Google Stitch-compatible semantic design rules. Includes the extra DESIGN.md export format. | The user is working with Google Stitch, or explicitly wants Stitch-format output, or wants a DESIGN.md alongside the code. |
+
+### Image-generation skills (do NOT write code, only produce reference imagery)
+
+| File | Purpose | Load when |
+|---|---|---|
+| `imagegen-frontend-web.md` | Generates Awwwards-level website design reference *images*. Strong typography, generous spacing, anti-slop visual discipline. | "Generate a mockup", "design reference image", "show me what it could look like", before any code. Pair with `image-to-code-skill.md` for the full image-to-code flow. |
+| `imagegen-frontend-mobile.md` | Generates premium mobile app screen concepts and flows. iOS, Android, cross-platform. Phone mockup framing, multi-screen consistency. | Mobile app screen mockups, app flow images, iOS/Android UI references — image only, no code. |
+| `imagegen-brandkit.md` | Generates premium brand-kit overview images: logo concepts, color systems, typography specimens, mockups, identity boards. | Brand identity moodboard, logo direction, full brand-kit board. Image only. |
+
+### Layer A stacking rules
+
+1. **At most one *style* skill at a time** (`taste-skill`, `gpt-tasteskill`, `minimalist-skill`, `brutalist-skill`, `soft-skill`, `redesign-skill`, `image-to-code-skill`). They encode opposite philosophies — picking two creates contradictions.
+2. **`output-skill.md` and `stitch-skill.md` stack on top of any style skill.** They add discipline and output format, not visual direction.
+3. **`image-to-code-skill.md` pairs with one imagegen skill** for the full flow.
+4. **Imagegen skills are image-only.** Do not load them when the user actually wants code.
+
+---
+
+## Layer B — Design Systems (69)
+
+From [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), based on [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/). Each file captures one website's complete visual language: color palette, typography, components, layout principles, depth, do/don't, responsive behavior, and an agent prompt guide.
+
+### How to use
+
+When the user says **"make it look like [Brand]"**, **"[Brand]-style"**, **"like [Brand]'s site"**, or shows that brand's site as a reference, load the corresponding `<brand>.md` file and treat it as the project's design system. Combine with one Layer A taste-skill for execution discipline.
+
+Each file ships with: visual theme, hex color palette + semantic roles, full type hierarchy, button/card/input/nav specs with hover/active states, spacing scale, shadow system, do/don't list, breakpoints, and a ready-to-use agent prompt.
+
+### AI & LLM Platforms (12)
+
+| File | Aesthetic |
+|---|---|
+| `claude.md` | Anthropic's AI assistant. Warm terracotta accent, parchment canvas, literary salon mood, clean editorial layout. |
+| `cohere.md` | Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic. |
+| `elevenlabs.md` | AI voice platform. Dark cinematic UI, audio-waveform aesthetics. |
+| `minimax.md` | AI model provider. Bold dark interface with neon accents. |
+| `mistral.ai.md` | Open-weight LLM provider. French-engineered minimalism, purple-toned. |
+| `ollama.md` | Run LLMs locally. Terminal-first, monochrome simplicity. |
+| `opencode.ai.md` | AI coding platform. Developer-centric dark theme. |
+| `replicate.md` | Run ML models via API. Clean white canvas, code-forward. |
+| `runwayml.md` | AI video generation. Cinematic dark UI, media-rich layout. |
+| `together.ai.md` | Open-source AI infrastructure. Technical, blueprint-style design. |
+| `voltagent.md` | AI agent framework. Void-black canvas, emerald accent, terminal-native. |
+| `x.ai.md` | Elon Musk's AI lab. Stark monochrome, futuristic minimalism. |
+
+### Developer Tools & IDEs (7)
+
+| File | Aesthetic |
+|---|---|
+| `cursor.md` | AI-first code editor. Sleek dark interface, gradient accents. |
+| `expo.md` | React Native platform. Dark theme, tight letter-spacing, code-centric. |
+| `lovable.md` | AI full-stack builder. Playful gradients, friendly dev aesthetic. |
+| `raycast.md` | Productivity launcher. Sleek dark chrome, vibrant gradient accents. |
+| `superhuman.md` | Fast email client. Premium dark UI, keyboard-first, purple glow. |
+| `vercel.md` | Frontend deployment platform. Black and white precision, Geist font. |
+| `warp.md` | Modern terminal. Dark IDE-like interface, block-based command UI. |
+
+### Backend, Database & DevOps (8)
+
+| File | Aesthetic |
+|---|---|
+| `clickhouse.md` | Fast analytics database. Yellow-accented, technical documentation style. |
+| `composio.md` | Tool integration platform. Modern dark with colorful integration icons. |
+| `hashicorp.md` | Infrastructure automation. Enterprise-clean, black and white. |
+| `mongodb.md` | Document database. Green leaf branding, developer documentation focus. |
+| `posthog.md` | Product analytics. Playful hedgehog branding, developer-friendly dark UI. |
+| `sanity.md` | Headless CMS. Red accent, content-first editorial layout. |
+| `sentry.md` | Error monitoring. Dark dashboard, data-dense, pink-purple accent. |
+| `supabase.md` | Open-source Firebase alternative. Dark emerald theme, code-first. |
+
+### Productivity & SaaS (7)
+
+| File | Aesthetic |
+|---|---|
+| `cal.md` | Open-source scheduling. Clean neutral UI, developer-oriented simplicity. |
+| `intercom.md` | Customer messaging. Friendly blue palette, conversational UI patterns. |
+| `linear.app.md` | Project management for engineers. Ultra-minimal, precise, purple accent. |
+| `mintlify.md` | Documentation platform. Clean, green-accented, reading-optimized. |
+| `notion.md` | All-in-one workspace. Warm minimalism, serif headings, soft surfaces. |
+| `resend.md` | Email API for developers. Minimal dark theme, monospace accents. |
+| `zapier.md` | Automation platform. Warm orange, friendly illustration-driven. |
+
+### Design & Creative Tools (6)
+
+| File | Aesthetic |
+|---|---|
+| `airtable.md` | Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic. |
+| `clay.md` | Creative agency. Organic shapes, soft gradients, art-directed layout. |
+| `figma.md` | Collaborative design tool. Vibrant multi-color, playful yet professional. |
+| `framer.md` | Website builder. Bold black and blue, motion-first, design-forward. |
+| `miro.md` | Visual collaboration. Bright yellow accent, infinite canvas aesthetic. |
+| `webflow.md` | Visual web builder. Blue-accented, polished marketing site aesthetic. |
+
+### Fintech & Crypto (7)
+
+| File | Aesthetic |
+|---|---|
+| `binance.md` | Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency. |
+| `coinbase.md` | Crypto exchange. Clean blue identity, trust-focused, institutional feel. |
+| `kraken.md` | Crypto trading platform. Purple-accented dark UI, data-dense dashboards. |
+| `mastercard.md` | Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth. |
+| `revolut.md` | Digital banking. Sleek dark interface, gradient cards, fintech precision. |
+| `stripe.md` | Payment infrastructure. Signature purple gradients, weight-300 elegance. |
+| `wise.md` | International money transfer. Bright green accent, friendly and clear. |
+
+### E-commerce & Retail (5)
+
+| File | Aesthetic |
+|---|---|
+| `airbnb.md` | Travel marketplace. Warm coral accent, photography-driven, rounded UI. |
+| `meta.md` | Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs. |
+| `nike.md` | Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography. |
+| `shopify.md` | E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type. |
+| `starbucks.md` | Coffee retail flagship. Four-tier earth-green system, warm cream canvas, SoDoSans typography. |
+
+### Media & Consumer Tech (11)
+
+| File | Aesthetic |
+|---|---|
+| `apple.md` | Consumer electronics. Premium white space, SF Pro, cinematic imagery. |
+| `ibm.md` | Enterprise technology. Carbon design system, structured blue palette. |
+| `nvidia.md` | GPU computing. Green-black energy, technical power aesthetic. |
+| `pinterest.md` | Visual discovery platform. Red accent, masonry grid, image-first. |
+| `playstation.md` | Gaming console retail. Three-surface channel layout, cyan hover-scale interaction. |
+| `spacex.md` | Space technology. Stark black and white, full-bleed imagery, futuristic. |
+| `spotify.md` | Music streaming. Vibrant green on dark, bold type, album-art-driven. |
+| `theverge.md` | Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type. |
+| `uber.md` | Mobility platform. Bold black and white, tight type, urban energy. |
+| `vodafone.md` | Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands. |
+| `wired.md` | Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links. |
+
+### Automotive (6)
+
+| File | Aesthetic |
+|---|---|
+| `bmw.md` | Luxury automotive. Dark premium surfaces, precise German engineering aesthetic. |
+| `bugatti.md` | Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type. |
+| `ferrari.md` | Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness. |
+| `lamborghini.md` | Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk. |
+| `renault.md` | French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons. |
+| `tesla.md` | Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans. |
+
+### Mood-based shortcuts (when user describes feeling, not naming a brand)
+
+- **"Premium / luxurious / expensive"** → `apple.md`, `stripe.md`, `vercel.md`, `linear.app.md`
+- **"Editorial / paper-like / readable"** → `notion.md`, `wired.md`, `claude.md`
+- **"Brutal / Swiss / industrial"** → `nike.md`, `bugatti.md`, `vodafone.md`
+- **"Dark cinematic"** → `runwayml.md`, `elevenlabs.md`, `superhuman.md`, `shopify.md`
+- **"Terminal / developer-native"** → `vercel.md`, `warp.md`, `voltagent.md`, `ollama.md`
+- **"Warm / approachable / soft"** → `airbnb.md`, `notion.md`, `intercom.md`, `mastercard.md`
+- **"Data-dense / dashboard"** → `sentry.md`, `kraken.md`, `posthog.md`, `clickhouse.md`
+- **"Bold / sporty / monochrome punch"** → `nike.md`, `uber.md`, `tesla.md`, `binance.md`
+- **"Playful / colorful / friendly"** → `figma.md`, `airtable.md`, `zapier.md`, `lovable.md`

package/dist/skills/frontend/references/design/airbnb.md

@@ -0,0 +1,390 @@
+# Design System Inspired by Airbnb
+
+## 1. Visual Theme & Atmosphere
+
+Airbnb's 2026 design feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature Rausch coral-pink (`#ff385c`) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with `#222222` carrying almost every line of text.
+
+What makes the system unmistakably Airbnb is how much *faith* it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge radius treatment. Category switching happens through a tri-tab picker (Homes / Experiences / Services) that uses 3D rendered illustrated icons (a pitched-roof house, a hot-air balloon, a service bell) — physical, tactile, almost toy-like — paired with crisp `Airbnb Cereal VF` labels. This is the rare consumer product where 3D renders and purely typographic UI coexist without tension.
+
+The newest surface is the **Experiences** product line — same chrome, but richer card density, more photography, and a center-anchored booking panel with sticky right-rail pricing. Listing detail pages (both rooms and experiences) follow a tight template: full-bleed hero image grid → overlapping rounded booking card (sticky on scroll) → amenities → reviews (Guest Favorite awards use a big centered `4.81` rating with a laurel-wreath lockup) → map → host profile → disclosures. The rhythm is consistent whether you're booking a room or a yacht tour.
+
+**Key Characteristics:**
+- Rausch coral-pink (`#ff385c`) as a single-accent brand color, used only for primary CTAs and the search button
+- Full-bleed photography at 4:3 / 16:9 with gentle corner rounding (14–20px) as the primary visual vocabulary
+- 3D rendered category icons paired with typographic tabs — the one place the system allows illustration
+- Circular `50%` icon buttons (back arrow, share, favorite, carousel arrows) scattered throughout
+- `Airbnb Cereal VF` carries every label, from 8px legal footnote to 28px section heading — a single-family system
+- Product-tier color coding: Airbnb Plus (magenta `#92174d`), Airbnb Luxe (deep purple `#460479`), Airbnb (Rausch coral)
+- Guest Favorite award lockup — centered giant rating number between two laurel wreaths, one of the most recognizable moments in the system
+- Sticky booking panel with a price → dates → guests stack, pinned to the right rail on desktop, transforming to a bottom-anchored "Reserve" bar on mobile
+- Sticky bottom mobile navigation (Explore / Wishlists / Log in) with an active-state Rausch tint
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Rausch** (`#ff385c`): The brand's signature coral-pink. CSS variable `--palette-bg-primary-core`. Used for: primary "Reserve" button, search submit button, active tab underline, wishlist heart fill, pricing emphasis. The single highest-visibility color on every page.
+
+### Secondary & Accent
+- **Deep Rausch** (`#e00b41`): A more saturated variant. CSS variable `--palette-bg-tertiary-core`. Used for pressed/active button states and gradient terminal stops.
+- **Plus Magenta** (`#92174d`): CSS variable `--palette-bg-primary-plus`. The brand color for the Airbnb Plus product tier — a higher-end curated-listing offering.
+- **Luxe Purple** (`#460479`): CSS variable `--palette-bg-primary-luxe`. The brand color for the Airbnb Luxe product tier — villa/estate-level rentals.
+- **Info Blue** (`#428bff`): CSS variable `--palette-text-legal`. Used for legal/informational links (terms, privacy, disclosures) — the only non-monochrome link color in the system.
+
+### Surface & Background
+- **Canvas White** (`#ffffff`): The default page background. Every card, every container, every detail page starts here.
+- **Soft Cloud** (`#f7f7f7`): Subtle subsurface tint used on footer backgrounds, map-view wrappers, and "everything else" sections that want to step back from the primary white.
+- **Hairline Gray** (`#dddddd`): Ubiquitous 1px border color — separates cards, amenity rows, review panels, footer columns. The workhorse of the layout system.
+
+### Neutrals & Text
+- **Ink Black** (`#222222`): CSS variable `--palette-text-primary`. The system's near-black. Every heading, every body paragraph, every nav label, every price. Used for ~90% of all text on a page.
+- **Charcoal** (`#3f3f3f`): CSS variable `--palette-text-focused`. Used in focused-state input text and one-step-down emphasis copy.
+- **Ash Gray** (`#6a6a6a`): CSS variable `--palette-bg-tertiary-hover`. Secondary labels, "Cottage rentals" subtitle-style copy under city names, muted footer links.
+- **Mute Gray** (`#929292`): CSS variable `--palette-text-link-disabled`. Disabled buttons and low-priority metadata.
+- **Stone Gray** (`#c1c1c1`): Tertiary dividers, icon strokes, placeholder avatars.
+
+### Semantic & Accent
+- **Error Red** (`#c13515`): CSS variable `--palette-text-primary-error`. Form validation errors, destructive-action warnings.
+- **Deep Error** (`#b32505`): CSS variable `--palette-text-secondary-error-hover`. Pressed/active variants of error states.
+- **Translucent Black** (`rgba(0, 0, 0, 0.24)`): CSS variable `--palette-text-material-disabled`. Disabled material-style labels.
+
+### Gradient System
+Airbnb's brand gradient appears sparingly, typically only on the wordmark and the search-button branded moment:
+
+```
+linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
+```
+
+This coral → magenta sweep is the "branded moment" — never used as a full surface, only as a narrow pill fill or logo treatment.
+
+## 3. Typography Rules
+
+### Font Family
+- **Airbnb Cereal VF** (primary and only): The proprietary variable-weight sans-serif that carries the entire system. Fallbacks (in order): `Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`.
+
+Weights observed in the extracted tokens: 500, 600, 700. No 400-regular — the system's "body" weight is 500, which gives every block of text a subtle extra density that reads as confident and deliberate.
+
+OpenType features: `salt` (stylistic alternates) is used on the compact 11px and 14px 600-weight labels — likely for tighter numerals and special-character shaping. No ligature or fractional-numeral features observed.
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Section Heading | 28px / 1.75rem | 700 | 1.43 | 0 | "Inspiration for future getaways" — page-level headings |
+| Subsection Heading | 22px / 1.38rem | 500 | 1.18 | -0.44px | "What this place offers", "Meet the hosts" — content dividers |
+| Card Title | 21px / 1.31rem | 700 | 1.43 | 0 | Review panel headings, card lead titles |
+| Listing Title | 20px / 1.25rem | 600 | 1.20 | -0.18px | "Small Group Yacht Tour, Unlimited Wine & Fruits" — listing headlines on detail pages |
+| Subtitle Bold | 16px / 1.00rem | 600 | 1.25 | 0 | Host name, city name |
+| Body Medium | 16px / 1.00rem | 500 | 1.25 | 0 | Primary body copy on detail pages |
+| Button Large | 16px / 1.00rem | 500 | 1.25 | 0 | "Reserve", "Become a host" |
+| Button Default | 14px / 0.88rem | 500 | 1.29 | 0 | Standard button labels |
+| Link | 14px / 0.88rem | 500 | 1.43 | 0 | Nav links, footer links |
+| Caption Medium | 14px / 0.88rem | 500 | 1.29 | 0 | Metadata, subtitle lines ("Cottage rentals", "Villa rentals") |
+| Caption Bold | 14px / 0.88rem | 600 | 1.43 | 0 | `salt` feature enabled — numeric stats, small-text emphasis |
+| Caption Small | 13px / 0.81rem | 400 | 1.23 | 0 | Review dates, micro-metadata |
+| Micro Default | 12px / 0.75rem | 400 | 1.33 | 0 | Footer disclaimers, legal micro-copy |
+| Micro Bold | 12px / 0.75rem | 700 | 1.33 | 0 | "NEW" pill labels |
+| Badge Uppercase | 11px / 0.69rem | 600 | 1.18 | 0 | `salt` feature — compact category/status badges |
+| Superscript | 8px / 0.50rem | 700 | 1.25 | 0.32px | Uppercase — price footnotes, decimal tails |
+
+### Principles
+- **One family, many weights.** Airbnb Cereal VF handles everything from 8px legal to 28px page headings — the visual identity comes from the family itself, not from typeface mixing.
+- **500 is the new 400.** The system's "regular" weight is 500, giving every paragraph a slightly more confident texture than the web default.
+- **Negative tracking on display type only.** Headings 20px+ compress tracking by -0.18 to -0.44px to feel chiseled; body sizes stay at 0 tracking for readability.
+- **Tight line-heights for headlines, generous for body.** Display type runs at 1.18–1.25 (tight); body and caption open up to 1.43 for long-form comfort.
+- **No all-caps except at 8px.** The only uppercase transform in the system is the 8px superscript — everywhere else, sentence case with subtle weight shifts does the work.
+
+### Note on Font Substitutes
+Airbnb Cereal VF is proprietary. The closest open-source substitute is **Circular Std** (still commercial) or **Inter** (free, Google Fonts) with letter-spacing reduced by -0.01em at display sizes. For strict brand fidelity, the documented fallback chain (`Circular, -apple-system, system-ui`) renders acceptably on macOS/iOS where `system-ui` resolves to San Francisco, which has similar proportions.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA** ("Reserve", "Search", "Add dates")
+- Background: Rausch `#ff385c`
+- Text: Canvas White `#ffffff`, Airbnb Cereal 500, 16px
+- Padding: ~14px vertical, 24px horizontal
+- Radius: 8px (rectangular) or 50% (circular icon variant)
+- Border: none
+- Active/pressed: `transform: scale(0.92)` plus a 2px `#222222` focus ring at `0 0 0 2px`
+
+**Secondary Button** ("Become a host", outlined tertiary actions)
+- Background: `#ffffff`
+- Text: Ink Black `#222222`, Airbnb Cereal 500, 14–16px
+- Padding: 10px 16px
+- Radius: 20px (pill) or 8px (rectangular)
+- Border: 1px solid Hairline Gray `#dddddd`
+
+**Icon-Only Circular Button** (back arrow, share, favorite, carousel controls)
+- Background: `#f2f2f2` (slightly off-white) or white with 1px translucent black border
+- Icon: `#222222` outline stroke, 16–20px
+- Size: 32–44px diameter
+- Radius: 50%
+- Active/pressed: `transform: scale(0.92)`; subtle 4px white ring `0 0 0 4px rgb(255,255,255)` to separate from colorful photography backgrounds
+
+**Disabled Button**
+- Background: `#f2f2f2`
+- Text: Stone Gray `#c1c1c1`
+- Opacity: 0.5
+
+**Pill Tab Button** (category selector "Homes / Experiences / Services")
+- Background: transparent
+- Text: Ink Black `#222222`, Airbnb Cereal 500, 16px
+- Padding: 8px 14px
+- Active state: 2px Ink Black underline beneath the label
+- Paired with a 36–48px 3D-rendered illustrated icon above the label
+
+### Cards & Containers
+
+**Listing Card** (homepage grid, search results)
+- Background: `#ffffff`
+- Radius: 14px on the image, text sits directly below on transparent background
+- Image: 4:3 aspect ratio, full-bleed, rounded with the same 14px radius
+- Padding: none on the outer container; 12px spacing between image and metadata rows
+- Shadow: none — separation comes from whitespace and the intrinsic radius of the photograph
+- Metadata pattern: City/region on line 1 (16px 600), distance/duration on line 2 (14px 500 Ash Gray), date range on line 3, price row with "per night" at the bottom
+
+**Detail Page Booking Panel** (sticky right rail on room/experience pages)
+- Background: `#ffffff`
+- Radius: 14–20px
+- Border: 1px solid Hairline Gray `#dddddd`
+- Shadow: `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — a stacked three-layer subtle elevation
+- Padding: 24px
+- Width: ~370px, pinned 120–140px below the viewport top
+- Content: price headline → date picker → guest dropdown → primary CTA → "You won't be charged yet" footnote
+
+**Amenity Grid Card** (on listing detail pages)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd` at the row level (not per item)
+- Padding: 16px vertical per amenity row
+- Icon + label pattern: 24px outline icon on the left, 16px 500-weight label on the right
+
+**Review Card** (individual review on detail pages)
+- Background: `#ffffff`, no border
+- Padding: 0 (relies on grid gaps)
+- Content: 40px circular avatar + 16px 600-weight name + 14px 400 Ash Gray date on one row, then 14px 500 body paragraph below
+
+### Inputs & Forms
+
+**Search Bar** (primary home page)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd` wrapping all three segments (Where / When / Who)
+- Radius: 32px (full pill)
+- Shadow: `rgba(0, 0, 0, 0.04) 0 2px 6px 0` — subtle floating feel
+- Structure: three segments divided by thin vertical dividers, each segment has a 12px 500 label above a 14px 500 placeholder
+- Submit: Rausch circular icon button at the right edge, 48px diameter
+
+**Text Input** (generic forms)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd`
+- Radius: 8px
+- Padding: 14px 16px
+- Focus: border switches to Ink Black, adds `0 0 0 2px` black outer ring
+- Error: border switches to `#c13515` (Error Red), helper text uses same color
+
+**Date Picker**
+- Calendar grid: 7-column layout, circular `50%` day cells 40–44px wide
+- Selected range: Ink Black `#222222` background with white numerals
+- Start/end anchors: larger filled circles; middle dates use Soft Cloud `#f7f7f7` tint
+
+### Navigation
+
+**Top Nav (Desktop)**
+- Height: ~80px
+- Background: `#ffffff`
+- Left: Airbnb wordmark+logo lockup in Rausch (102×32px)
+- Center: tri-tab category picker (Homes / Experiences / Services) with 36–48px 3D icons stacked above 16px 500 labels; active tab has a 2px Ink Black underline
+- Right: "Become a host" text link, then 32px circular globe (language), then 36px hamburger avatar menu
+- Border-bottom: 1px solid Hairline Gray `#dddddd`
+
+**Top Nav (Mobile)**
+- Single-row search pill occupies full width: "Start your search" placeholder with a small magnifier icon
+- Below: tri-tab category picker persists (Homes / Experiences / Services) — illustrated icons shrink to ~28px
+- Bottom-fixed tab bar: Explore (active state Rausch) / Wishlists / Log in — 24px icons above 12px labels
+
+**Listing Detail Secondary Nav**
+- Sticky horizontal scroll of anchor links (Photos · Amenities · Reviews · Location · Host) appears on scroll past the hero image
+- Height: 56px
+- Border-bottom: 1px solid Hairline Gray
+
+### Image Treatment
+
+- **Primary aspect ratios**: 4:3 for homepage listing grids, 16:9 for experience hero photography, 1:1 for avatars
+- **Radius**: 14px on listing-grid images, 20px on detail-page hero photo frames, `50%` on avatars
+- **Image grid on detail pages**: five-photo grid with a single large-left image (50% width) and four smaller photos in a 2×2 grid on the right, all sharing the 20px outer rounded container
+- **Lazy loading**: heavy use of `loading="lazy"` with blurred placeholder previews
+- **Carousel**: circular 32px arrow buttons overlay the image, centered vertically; dot indicators sit 12px above the bottom edge
+
+### Signature Components
+
+**Guest Favorite Award Lockup** (featured prominently on high-rated listing detail pages)
+- Centered rating number rendered at 44–56px 700-weight
+- Two hand-drawn laurel-wreath SVG illustrations flanking left and right at ~48px tall
+- Below: "Guest Favorite" label at 12px 700 uppercase with `0.32px` tracking, and a short sub-label at 14px 500 Ash Gray
+- Full-width block, no container border — sits directly on white canvas
+
+**Tri-Tab Category Picker** (appears at the top of every browse surface)
+- Three tabs: Homes / Experiences / Services
+- Each tab: 3D-rendered illustrated icon (~48px tall) above 16px 500 label
+- Experiences and Services currently carry a small navy-blue "NEW" pill (12px 700 white text on dark blue) floating top-right of the icon
+- Active tab: 2px Ink Black underline beneath the label
+
+**Inspiration City Grid** (homepage "Inspiration for future getaways")
+- 6-column grid of destination links on desktop, 2-column on mobile
+- Each cell: 16px 600 city name on line 1, 14px 500 Ash Gray rental-type subtitle on line 2 ("Cottage rentals", "Villa rentals")
+- No images — text-only grid
+- Tabbed above by category (Popular / Arts & culture / Beach / Mountains / Outdoors / Things to do / Travel tips & inspiration / Airbnb-friendly apartments) — active tab has 2px underline and weight shift
+
+**Reserve Sticky Card** (listing detail pages)
+- Stays fixed 120px below viewport top on desktop as the user scrolls past the hero
+- Collapses to a full-width bottom bar on mobile with a "From $X / night" label and a Rausch "Reserve" pill
+- Always shows: price headline → date display → guest selector → Rausch CTA → "You won't be charged yet" disclaimer
+
+**Experience Host Card** (experience detail pages)
+- Full-width rounded container with a 3:2 cover photograph at top
+- Host avatar (circular, 56px) overlapping the bottom edge of the cover by 50%
+- Below overlap: host name at 16px 700, host tenure at 14px 500 Ash Gray, small Rausch "Message host" pill button
+- Used as the transition between reviews and the amenities/location block
+
+**"Things to know" Strip** (listing detail pages)
+- 3-column grid of rule/policy blocks (House rules, Safety & property, Cancellation policy)
+- Each column: icon at the top, 16px 600 heading, 14px 500 Ash Gray body, "Show more" link in Ink Black underline
+- Separator: 1px Hairline Gray top and bottom borders on the overall strip
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Extracted scale**: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px — fine-grained with a handful of off-grid values used for pixel-perfect icon alignment
+- **Section padding**: ~48–64px top/bottom on desktop, 24–32px on mobile
+- **Card internal padding**: 24px on booking panels and large cards, 16px on amenity rows, 12px on listing-card metadata
+- **Gutter between listing cards**: 24px desktop, 16px mobile
+- **Between stacked text rows**: 4–8px (very tight — reinforces the "dense information" feel of travel listings)
+
+### Grid & Container
+- **Max content width**: 1760–1920px on ultra-wide (Airbnb lets the grid breathe farther than most sites); 1280px on most detail pages
+- **Homepage listing grid**: 6 columns at ≥1760px, 5 at ≥1440px, 4 at ≥1128px, 3 at ≥800px, 2 at ≥550px, 1 below
+- **Detail page**: 2-column asymmetric — main content ~58%, sticky booking panel ~36% on the right, ~6% gutter
+- **Footer**: 3-column Support / Hosting / Airbnb
+
+### Whitespace Philosophy
+Airbnb is densely informative but never cramped. Whitespace is used to *group* — listing cards have 24px of gutter so each photograph reads as a distinct object, but the metadata under each card uses 4–8px gaps so the price/city/date feels like a single unit. The detail-page booking panel has 24px internal padding, but rows within (date picker, guest selector, CTA) are stacked at 12px — the boundary between the card and the page does more separation work than the content within.
+
+### Border Radius Scale
+| Radius | Use |
+|--------|-----|
+| 4px | Inline anchor tags, tag chips |
+| 8px | Text buttons, dropdowns, small utility buttons |
+| 14px | Listing card photography, generic content containers, badges |
+| 20px | Primary rounded buttons (pill shape), large images, booking panel |
+| 32px | Search bar pill, extra-large containers |
+| 50% | All circular icon buttons, all avatars, wishlist hearts — the system's signature round geometry |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| 0 | No shadow | Listing cards, body content, text-only sections |
+| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | Active/pressed icon buttons (e.g., back, share, favorite) — subtle lift to indicate interaction |
+| 2 | `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` | Booking panel sticky card, modals, dropdown menus — the system's signature three-layer elevation |
+| Focus Ring | `0 0 0 2px #222222` | Active-state buttons, focused search input |
+| White Separator Ring | `rgb(255, 255, 255) 0 0 0 4px` | Circular buttons overlaid on photographs — a 4px white ring cleanly separates the button from colorful image backgrounds |
+
+Shadow philosophy: Airbnb uses **stacked layered shadows** rather than a single drop. The three-layer booking-panel shadow reads as one cohesive lift but is actually three separate shadows at different opacity/blur values — creating subtle anti-aliasing at the shadow's perimeter that feels premium without being heavy.
+
+### Decorative Depth
+- **Photography as depth**: the system relies heavily on full-bleed photography to create visual depth; shadows and gradients are used sparingly so the photographs do the heavy lifting
+- **Laurel wreath lockup**: the Guest Favorite award uses two SVG laurel illustrations that give the otherwise-flat rating number a ceremonial, trophy-like presence
+- **3D rendered category icons**: Homes/Experiences/Services icons have their own soft internal lighting and subtle cast shadows baked into the artwork — the only place the brand allows "dimensional" illustration
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve Rausch `#ff385c` for primary actions and the active-tab indicator — never dilute it with decorative uses.
+- Let photography breathe — 4:3 crops with 14–20px rounded corners, no overlaid text, no gradient scrims.
+- Use Ink Black `#222222` for every text layer below Rausch — this is the system's near-black, never true `#000000`.
+- Pair the tri-tab category picker's 3D illustrated icons with flat typography — don't mix illustration styles within a single surface.
+- Stack three low-opacity shadows (~2%, 4%, 10%) to create the signature booking-panel elevation.
+- Use Hairline Gray `#dddddd` 1px borders for every card-to-card and row-to-row divider.
+- Treat the booking panel as sticky on desktop, collapsing to a bottom-anchored reserve bar on mobile.
+- Use 4–8px spacing within metadata groups and 24px between cards — information density is intentional.
+
+### Don't
+- Don't introduce secondary accent colors outside the Rausch / Plus Magenta / Luxe Purple product-tier palette.
+- Don't place text inside photographs — captions always sit below the image, never overlaid.
+- Don't use all-caps labels except the single 8px superscript role.
+- Don't round icon buttons to anything other than 50% — circular is the system's signature geometry.
+- Don't add drop shadows to listing cards — they sit on white canvas with no elevation.
+- Don't use gradient backgrounds — the only gradient in the system is a narrow Rausch → magenta sweep on the wordmark.
+- Don't use the 400-regular font weight — Airbnb Cereal's body weight is 500.
+- Don't override Airbnb Cereal VF with a different display face — the system is intentionally single-family.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+Airbnb declares ~60 breakpoints (design-time artifact from their component library), but the meaningful layout shifts happen at a much smaller set:
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Ultra-wide | ≥1760px | 6-column listing grid, 1760–1920px max content width |
+| Desktop XL | 1440–1759px | 5-column grid, full nav visible, sticky right-rail booking panel |
+| Desktop | 1128–1439px | 4-column grid, sticky booking panel persists |
+| Laptop | 1024–1127px | 3–4 column grid, category nav remains horizontal |
+| Tablet | 800–1023px | 3-column grid, global search may collapse to a single-row pill |
+| Small tablet | 550–799px | 2-column grid, booking panel drops to full-width inline block |
+| Mobile | 375–549px | 1-column stacked layout, bottom-fixed tab bar appears (Explore / Wishlists / Log in) |
+| Small mobile | <375px | Edge padding tightens to 16px; category-picker icons shrink to ~28px |
+
+### Touch Targets
+All interactive elements meet or exceed 44×44px. The circular icon button family is specifically sized 32–44px with 8–12px extended hit-area padding. The Rausch primary Reserve button is ~48px tall. The tri-tab category picker's hit area is the full label-plus-icon rectangle (typically ~64×80px per tab).
+
+### Collapsing Strategy
+- **Nav**: Top nav keeps Airbnb wordmark + tri-tab picker on tablet and above; on mobile the picker slides just below the search pill, and the globe/avatar controls move to a bottom-anchored tab bar.
+- **Search bar**: Three-segment pill (Where / When / Who) with a Rausch circular submit button on desktop; collapses to a single-row "Start your search" pill on mobile, tapping which opens a full-screen search sheet.
+- **Booking panel**: Sticky right-rail on ≥1128px; inline within the main content column between 800–1127px; bottom-fixed "Reserve" pill on <800px.
+- **Listing grid**: Reflows 6 → 5 → 4 → 3 → 2 → 1 columns across breakpoints.
+- **Detail-page image grid**: Five-image layout (1 large + 4 small) on desktop; becomes a swipeable full-bleed carousel on mobile with page-dot indicators.
+- **Footer**: 3-column layout collapses to stacked single-column at <800px.
+
+### Image Behavior
+- `loading="lazy"` universal, with blurred `im_w=` URL-parameterized preview thumbs served first
+- Responsive images use Airbnb's `muscache.com` CDN with `im_w` query parameter for width-based delivery (`im_w=240`, `im_w=720`, `im_w=1200`, `im_w=2400`)
+- No art-direction crops — the same image is scaled up/down across breakpoints
+- Carousels auto-advance photo height to maintain a consistent 4:3 ratio regardless of source aspect
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Rausch (#ff385c)"
+- Page background: "Canvas White (#ffffff)"
+- Subsurface: "Soft Cloud (#f7f7f7)"
+- Heading / body text: "Ink Black (#222222)"
+- Secondary text: "Ash Gray (#6a6a6a)"
+- Border / divider: "Hairline Gray (#dddddd)"
+- Error: "Error Red (#c13515)"
+- Info link: "Info Blue (#428bff)"
+- Luxe tier accent: "Luxe Purple (#460479)"
+- Plus tier accent: "Plus Magenta (#92174d)"
+
+### Example Component Prompts
+- "Create a primary Reserve button: Rausch (#ff385c) background, white Airbnb Cereal 500-weight label at 16px, 14px × 24px padding, 8px border-radius, no shadow. On active/pressed add `transform: scale(0.92)` with a 2px Ink Black focus ring (`0 0 0 2px #222222`)."
+- "Build a listing card with a 4:3 full-bleed photograph at 14px border-radius, no container shadow; below the image stack three text rows with 4px gaps: city name at 16px 600 Ink Black, rental type at 14px 500 Ash Gray (#6a6a6a), and price range in 16px 500 Ink Black with a 14px `per night` suffix."
+- "Design a sticky booking panel: white background, 14px border-radius, 1px Hairline Gray (#dddddd) border, 3-layer elevation shadow (`rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`), 24px padding, 370px width, pinned 120px below viewport top on desktop. Contents: price headline, date picker, guest dropdown, Rausch primary CTA, and a 12px Ash Gray `You won't be charged yet` disclaimer."
+- "Create a tri-tab category picker: three equal-width tabs labeled Homes, Experiences, Services; each tab has a ~48px 3D-rendered illustrated icon (house, balloon, bell) above a 16px 500 Ink Black label; active tab gets a 2px Ink Black underline; add a small 12px 700 white `NEW` pill on a dark navy background to the top-right of the Experiences and Services icons."
+- "Render the Guest Favorite award lockup: a centered rating number at 52px 700-weight Ink Black, flanked left and right by hand-drawn SVG laurel wreaths at ~48px tall; below, a 12px 700 uppercase `GUEST FAVORITE` label with 0.32px tracking; sub-label at 14px 500 Ash Gray; full-width block sitting directly on white canvas with no container border."
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time.
+2. Reference specific color names and hex codes from this document (e.g., "Ink Black #222222", not "dark gray").
+3. Use natural language descriptions alongside measurements ("subtle three-layer elevation" rather than a long shadow string).
+4. Describe the desired "feel" ("magazine-like, photography-first" vs "dense utility").
+5. Always default to Airbnb Cereal VF 500-weight for body and 600–700 for emphasis — never 400.
+6. Keep Rausch pink scarce — if more than one Rausch-colored element appears per viewport, consider whether one should be neutralized.
+
+### Known Gaps
+- **Homepage listing grid cards**: the main property-card grid (the primary visual surface of airbnb.com) was not fully captured in the extracted homepage screenshots — content loaded only partially. Listing Card specs above are inferred from the Inspiration grid structure and Airbnb's broader conventions; confirm exact aspect ratios and metadata hierarchy against the live site before production use.
+- **Experiences category icons**: the 3D illustrated icons for Homes / Experiences / Services are served as raster assets; their exact source-file specifications (SVG vs PNG, rendered pixel dimensions) are not documented here.
+- **Animation and transition timings**: not captured — static extraction scope.
+- **Dark mode**: Airbnb does not ship a native dark mode in the extracted product surfaces; this document describes the single light-mode theme only.