@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/airbnb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/airbnb.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const airbnbBrief = `---\nversion: alpha\nname: Airbnb\ndescription: A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and \"NEW\" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars (\\`{rounded.full}\\`), softly rounded property cards (\\`{rounded.lg}\\` ~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid.\n\ncolors:\n  primary: \"#ff385c\"\n  primary-active: \"#e00b41\"\n  primary-disabled: \"#ffd1da\"\n  primary-error-text: \"#c13515\"\n  primary-error-text-hover: \"#b32505\"\n  luxe: \"#460479\"\n  plus: \"#92174d\"\n  ink: \"#222222\"\n  body: \"#3f3f3f\"\n  muted: \"#6a6a6a\"\n  muted-soft: \"#929292\"\n  hairline: \"#dddddd\"\n  hairline-soft: \"#ebebeb\"\n  border-strong: \"#c1c1c1\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f2f2f2\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  legal-link: \"#428bff\"\n  star-rating: \"#222222\"\n  scrim: \"#000000\"\n\ntypography:\n  display-xl:\n    fontFamily: \"'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif\"\n    fontSize: 28px\n    fontWeight: 700\n    lineHeight: 1.43\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 22px\n    fontWeight: 500\n    lineHeight: 1.18\n    letterSpacing: -0.44px\n  display-md:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 21px\n    fontWeight: 700\n    lineHeight: 1.43\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 20px\n    fontWeight: 600\n    lineHeight: 1.20\n    letterSpacing: -0.18px\n  title-md:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.25\n    letterSpacing: 0\n  rating-display:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -1px\n  body-md:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.43\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.29\n    letterSpacing: 0\n  caption-sm:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.23\n    letterSpacing: 0\n  badge:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.18\n    letterSpacing: 0\n  micro-label:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 12px\n    fontWeight: 700\n    lineHeight: 1.33\n    letterSpacing: 0\n  uppercase-tag:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 8px\n    fontWeight: 700\n    lineHeight: 1.25\n    letterSpacing: 0.32px\n    textTransform: uppercase\n  button-md:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.25\n    letterSpacing: 0\n  button-sm:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.29\n    letterSpacing: 0\n  link:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.43\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Airbnb Cereal VF', Circular, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 8px\n  md: 14px\n  lg: 20px\n  xl: 32px\n  full: 9999px\n\nspacing:\n  xxs: 2px\n  xs: 4px\n  sm: 8px\n  md: 12px\n  base: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 64px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 24px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.sm}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.sm}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 13px 23px\n    height: 48px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button-md}\"\n  button-pill-rausch:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button-sm}\"\n    rounded: \"{rounded.full}\"\n    padding: 10px 20px\n  search-orb:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.full}\"\n    height: 48px\n  icon-button-circle:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    height: 32px\n  icon-button-outline:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    height: 40px\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 80px\n  product-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.none}\"\n  product-tab-inactive:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n  search-bar-pill:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.full}\"\n    padding: 14px 24px\n    height: 64px\n  search-field-segment:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    padding: 8px 24px\n  category-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.button-sm}\"\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button-sm}\"\n    rounded: \"{rounded.none}\"\n  property-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.md}\"\n  property-card-photo:\n    rounded: \"{rounded.md}\"\n  experience-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.md}\"\n  city-link-block:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n  rating-display-card:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.rating-display}\"\n  guest-favorite-badge:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.badge}\"\n    rounded: \"{rounded.full}\"\n    padding: 4px 10px\n  new-tag:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.uppercase-tag}\"\n    rounded: \"{rounded.full}\"\n    padding: 2px 6px\n  amenity-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  reviews-card:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n  host-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.md}\"\n    padding: 24px\n  reservation-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 24px\n  date-picker-day:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.full}\"\n  date-picker-day-selected:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 12px\n    height: 56px\n  footer-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    padding: 48px 80px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n  legal-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-sm}\"\n---\n\n## Overview\n\nAirbnb is the canonical example of a generous, photography-led consumer marketplace. The base canvas is **pure white** (\\`{colors.canvas}\\` — #ffffff) with deep near-black ink (\\`{colors.ink}\\` — #222222) for headlines and body, and a single voltage of **Rausch** (\\`{colors.primary}\\` — #ff385c) carrying every primary CTA, the search-button orb, the heart save state, and inline brand links. There is no secondary brand color in mainline marketing — the **Luxe purple** (\\`{colors.luxe}\\` — #460479) and **Plus magenta** (\\`{colors.plus}\\` — #92174d) tokens are sub-brand accents that only appear inside Airbnb Luxe / Plus contexts.\n\nType runs **Airbnb Cereal VF** (a custom variable font Airbnb licenses), with **Circular** as the historic in-house fallback and a system stack underneath. Cereal sits at modest weights — display headlines render at 22–28px in weight 500–600, not the heavy 700+ weights that financial or enterprise systems lean on. The hero h1 (\"Inspiration for future getaways\") on the homepage is just 28px / 700, which would feel small on a typical SaaS page; here it works because the layout leans on photography (city collage, property cards) for visual weight rather than typographic muscle.\n\nThe shape language is **soft**. Buttons are 8px radius (\\`{rounded.sm}\\`), property cards are ~14px (\\`{rounded.md}\\`), the search bar is fully pill-shaped (\\`{rounded.full}\\`), wishlist hearts and search orbs are circles (\\`{rounded.full}\\`), and category strip rounded corners run at 32px (\\`{rounded.xl}\\`). There is essentially no hard corner anywhere except the body grid itself — every interactive element is rounded.\n\n**Key Characteristics:**\n- Single accent color: \\`{colors.primary}\\` (#ff385c — \"Rausch\") carries every primary CTA, the search orb, the heart save state, and the brand wordmark. Used scarcely — most pages are 90% white + ink with one or two Rausch moments.\n- Custom variable type: \\`Airbnb Cereal VF\\`. Display weights sit at 500–700, body at 400. Modest weight is intentional — the system trusts photography for visual heft.\n- Three-product top nav: Homes, Experiences, Services — each with a hand-illustrated 32px icon and \"NEW\" badges (\\`{component.new-tag}\\`) on the two newer products. Active tab uses an underline rule (\\`{component.product-tab-active}\\`).\n- Pill-shaped global search bar: white surface, fully rounded (\\`{rounded.full}\\`), divided by 1px hairlines into Where / When / Who segments, terminated by a circular Rausch search orb (\\`{component.search-orb}\\`).\n- Property cards are photo-first: aspect-ratio rectangles with \\`{rounded.md}\\` corner clipping, swipeable image carousel, \"Guest favorite\" floating badge top-left, heart icon top-right, then 4–5 lines of meta beneath.\n- Editorial dropdowns (footer, language picker) are clean text columns over the white canvas — no card surface, no shadow.\n- The design system caps elevation at one shadow tier (\\`box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px\\`) — used on hover-floated cards and search/account dropdowns.\n- 8px base spacing system, with major sections at \\`{spacing.section}\\` (64px) — generous but not airy enough to feel editorial-magazine; the marketplace density wants more cards per scroll.\n\n## Colors\n\n### Brand & Accent\n- **Rausch** (\\`{colors.primary}\\` — #ff385c): The single brand color. Used for primary CTA backgrounds (Reserve, Continue), the search orb, the heart save state on property cards, and inline brand links. The most recognizable color in consumer travel.\n- **Rausch Active** (\\`{colors.primary-active}\\` — #e00b41): The press / pointer-down variant — slightly more saturated. Used on \\`{component.button-primary-active}\\`.\n- **Rausch Disabled** (\\`{colors.primary-disabled}\\` — #ffd1da): A pale tint used on disabled CTAs.\n- **Luxe Purple** (\\`{colors.luxe}\\` — #460479): Sub-brand accent for Airbnb Luxe. Only appears inside Luxe-branded surfaces — never in mainline marketing.\n- **Plus Magenta** (\\`{colors.plus}\\` — #92174d): Sub-brand accent for Airbnb Plus. Same scoping as Luxe — sub-product only.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page floor for every public page. Airbnb does not have a dark mode on the public web.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): The lightest fill — used on disabled fields, sub-nav hover backgrounds, and the inline search filter band.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f2f2f2): Slightly heavier fill — circular icon-button surface (e.g., the breadcrumb back-arrow and listing toolbar buttons).\n\n### Hairlines & Borders\n- **Hairline** (\\`{colors.hairline}\\` — #dddddd): The default 1px border tone — search bar dividers, table separators, footer column splitters, card 1px borders.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebebeb): A lighter divider used on long-scrolling editorial body separators.\n- **Border Strong** (\\`{colors.border-strong}\\` — #c1c1c1): A heavier stroke used on disabled outline buttons and form input outlines after focus.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #222222): The dominant text color on light surfaces. Display headlines, body paragraphs, primary nav links, and most inline link text. Never pure black.\n- **Body** (\\`{colors.body}\\` — #3f3f3f): A secondary running-text color used inside long-form review and amenity copy where ink would feel too heavy.\n- **Muted** (\\`{colors.muted}\\` — #6a6a6a): Sub-titles inside city link blocks (\"Cottage rentals\", \"Villa rentals\"), inactive product-tab labels, footer category sub-labels, \"View all\" links.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #929292): Disabled link text. Used very sparingly.\n- **Star Rating** (\\`{colors.star-rating}\\` — #222222): The same ink token — Airbnb's star icon and \"4.81\" rating numbers all render in ink rather than a yellow/gold color, which is a deliberate brand choice (yellow stars feel cheap in travel context).\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Rausch CTAs.\n\n### Semantic\n- **Error** (\\`{colors.primary-error-text}\\` — #c13515): Inline error text for form validation. Distinct from Rausch — slightly darker, more saturated red.\n- **Error Hover** (\\`{colors.primary-error-text-hover}\\` — #b32505): Darkens on link hover.\n- **Legal Link Blue** (\\`{colors.legal-link}\\` — #428bff): Inline links inside legal copy (Privacy, Terms). Only used inside the legal sub-band.\n\n### Scrim\n- **Scrim** (\\`{colors.scrim}\\` — #000000 at 50% opacity): The global modal backdrop tone — date picker, login dialog, language picker. Stored as the base hex; opacity is applied at render time.\n\n## Typography\n\n### Font Family\nThe system runs **Airbnb Cereal VF** for everything — display, body, navigation, captions, microcopy. Fallbacks walk \\`Circular, -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif\\`. **Circular** is the historic in-house typeface still kept as the first non-variable fallback; system stacks back it up.\n\nThere is no separate display family. The variable font carries the entire scale.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.rating-display}\\` | 64px | 700 | 1.1 | -1px | Listing detail rating display (\"4.81\") |\n| \\`{typography.display-xl}\\` | 28px | 700 | 1.43 | 0 | Homepage h1 (\"Inspiration for future getaways\") |\n| \\`{typography.display-lg}\\` | 22px | 500 | 1.18 | -0.44px | Listing detail h1 (\"Close to Fethiye Aliyah Bali Beach…\") |\n| \\`{typography.display-md}\\` | 21px | 700 | 1.43 | 0 | Section heads inside listing detail (\"What this place offers\") |\n| \\`{typography.display-sm}\\` | 20px | 600 | 1.20 | -0.18px | Sub-section titles (\"Things to know\") |\n| \\`{typography.title-md}\\` | 16px | 600 | 1.25 | 0 | City link block titles (\"Wilmington\", \"Athens\") |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.25 | 0 | Footer column heads (\"Support\", \"Hosting\", \"Airbnb\") |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default running-text inside listing copy |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.43 | 0 | Card meta lines, dates, prices, distance text |\n| \\`{typography.caption}\\` | 14px | 500 | 1.29 | 0 | Search field segment labels (\"Where\", \"When\", \"Who\") |\n| \\`{typography.caption-sm}\\` | 13px | 400 | 1.23 | 0 | Footer legal line (\"© 2026 Airbnb, Inc.\") |\n| \\`{typography.badge}\\` | 11px | 600 | 1.18 | 0 | \"Guest favorite\" floating badge text |\n| \\`{typography.micro-label}\\` | 12px | 700 | 1.33 | 0 | Card amenity micro-labels (\"Inline 6\") |\n| \\`{typography.uppercase-tag}\\` | 8px | 700 | 1.25 | 0.32px (uppercase) | \"NEW\" badge on product nav tabs |\n| \\`{typography.button-md}\\` | 16px | 500 | 1.25 | 0 | Primary CTA button labels |\n| \\`{typography.button-sm}\\` | 14px | 500 | 1.29 | 0 | Pill button labels (category strip) |\n| \\`{typography.link}\\` | 14px | 400 | 1.43 | 0 | Inline body links |\n| \\`{typography.nav-link}\\` | 16px | 600 | 1.25 | 0 | Top product-nav labels (Homes, Experiences, Services) |\n\n### Principles\nDisplay weights stay modest. The homepage h1 at 28px / 700 is deliberately small — it tucks under the search bar so photography and the city-link grid carry visual hierarchy. The listing-detail h1 at 22px / 500 is even quieter; the listing photo banner does the work above it.\n\nThe single typographically loud moment in the entire system is the **rating display** (\\`{typography.rating-display}\\` — 64px / 700) on listing pages. That is the only place the system trusts type alone to carry hierarchy — rating numbers are a peak trust signal, so they get the loudest treatment.\n\n### Note on Font Substitutes\nIf Airbnb Cereal VF and Circular are unavailable, **Inter** is the closest open-source substitute. Adjust display headlines down by ~2% in line-height to match Cereal's slightly tighter cap height; otherwise the proportions transfer cleanly.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px (with 2px micro-step).\n- **Tokens:** \\`{spacing.xxs}\\` 2px · \\`{spacing.xs}\\` 4px · \\`{spacing.sm}\\` 8px · \\`{spacing.md}\\` 12px · \\`{spacing.base}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 64px.\n- **Section padding (vertical):** \\`{spacing.section}\\` (64px) for major page bands; tighter than typical SaaS marketing (80–96px) because marketplace pages need higher card density per scroll.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for \\`{component.host-card}\\` and \\`{component.reservation-card}\\`; \\`{spacing.base}\\` (16px) for property-card meta block; \\`{spacing.sm}\\` (8px) for caption / date-row gutters.\n- **Gutters:** \\`{spacing.base}\\` (16px) between cards in the homepage city grid; \\`{spacing.lg}\\` (24px) inside footer column gutters; \\`{spacing.xs}\\` (4px) on dense category-strip dividers.\n\n### Grid & Container\n- **Max content width:** ~1280px centered on the homepage and editorial pages. Listing detail pages cap closer to 1080px to keep the photo banner and reservation rail readable.\n- **City link grid (homepage footer):** 6-column grid at desktop with each cell housing a city name in \\`{typography.title-md}\\` and a category sub-label in \\`{typography.body-sm}\\` muted.\n- **Listing detail:** 2-column with photo / amenity body on the left (~64% width) and a sticky reservation card (\\`{component.reservation-card}\\`) on the right (~32%).\n- **Footer:** 3-column link list (Support / Hosting / Airbnb) at desktop, collapsing to 1-column on mobile.\n\n### Whitespace Philosophy\nThe system gives editorial bands 64px of vertical breathing room but compresses card grids — property and city-link cards sit just 16px apart. The contrast is intentional: the page reads as \"open hero, dense marketplace below,\" reinforcing the marketplace nature without overwhelming the visitor at the fold.\n\n## Elevation\n\nThe system has essentially **one shadow tier** plus the flat baseline.\n\n- **Flat (no shadow):** Body, hero, footer, all editorial bands — 95% of surfaces.\n- **Card hover float:** \\`box-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\\` — applied to property cards on pointer hover, the search bar at rest, and the dropdown menus (account menu, language picker, date picker). This is the single shadow definition in the entire system.\n- **Modal scrim:** \\`{colors.scrim}\\` rendered at 50% opacity — the global modal backdrop. Used on date pickers, login dialogs, language picker.\n\nThere are no progressive elevation tiers — the system either has the one shadow or none. Depth comes from photography, the white-on-white surface separation, and rounded-corner clipping rather than from layered shadows.\n\n## Components\n\n### Buttons\n\n**\\`button-primary\\`** — Rausch fill, white text, 8px radius, 14×24px padding, 48px height, weight 500. The most common CTA across the system: \"Reserve\", \"Continue\", \"Search\", account-flow primaries.\n\n**\\`button-primary-active\\`** — The press state. Background flips to \\`{colors.primary-active}\\`. No transform, no shadow change.\n\n**\\`button-primary-disabled\\`** — Pale Rausch tint at #ffd1da with white text. Cursor not-allowed.\n\n**\\`button-secondary\\`** — White fill with ink text and a 1px ink outline. 8px radius. Used for \"Save\", \"Cancel\", and inverse CTAs over Rausch surfaces.\n\n**\\`button-tertiary-text\\`** — Plain ink text, no surface, no border. Underlined on hover. Used for \"Show more\" type links and modal close labels.\n\n**\\`button-pill-rausch\\`** — A pill-shaped Rausch CTA used on featured cells (e.g., \"Become a host\" sub-CTA) — 9999px radius, 10×20px padding, 14px label.\n\n### Search Surface\n\n**\\`search-bar-pill\\`** — The signature global search bar. White fill, 9999px radius, 64px height, 1px hairline 1px-shadow border. Internally divided by vertical hairline rules into \\`{component.search-field-segment}\\` cells (Where / When / Who). Each segment holds an uppercase caption label above a placeholder line in \\`{typography.caption}\\`.\n\n**\\`search-orb\\`** — The circular Rausch orb terminating the right edge of the search bar. 48×48px, fully rounded, white magnifying-glass icon centered. The hottest single color moment on the homepage.\n\n### Top Navigation\n\n**\\`top-nav\\`** — White surface, 80px height, 1px bottom hairline. The Airbnb wordmark sits flush left, the three product tabs (Homes / Experiences / Services) sit in the dead center, and account utilities (host link, language globe, account menu) sit flush right.\n\n**\\`product-tab-active\\`** — Ink label in \\`{typography.nav-link}\\`, 32px hand-illustrated icon, 2px ink underline rule beneath the icon-label pair.\n\n**\\`product-tab-inactive\\`** — Muted label, illustrated icon, no underline. Becomes active on click.\n\n**\\`new-tag\\`** — A tiny rounded-pill badge (\\`{rounded.full}\\`) anchored top-right of an icon, carrying the uppercase \"NEW\" label in \\`{typography.uppercase-tag}\\` (8px / 700 with 0.32px tracking, uppercase). Used on Experiences and Services to signal recency.\n\n### Listing Cards\n\n**\\`property-card\\`** — A photo-first card. 1:1 aspect-ratio image with \\`{rounded.md}\\` corner clipping, image carousel dots overlay, \"Guest favorite\" floating badge top-left (\\`{component.guest-favorite-badge}\\`), and a heart icon top-right (\\`{component.icon-button-circle}\\` in default outlined state, Rausch-filled when saved). Beneath the image: 4–5 lines of meta — title (\\`{typography.title-md}\\`), distance / dates (\\`{typography.body-sm}\\` muted), and price (\"$X night\") right-aligned.\n\n**\\`property-card-photo\\`** — The photo plate itself, separated as a token because some surfaces (wishlist, search results) reuse just the photo without the meta block.\n\n**\\`experience-card\\`** — A taller-aspect card (4:5) for experience listings. Same \\`{rounded.md}\\` clipping, floating \"NEW\" badge top-left, heart top-right, and a single-line title beneath.\n\n**\\`guest-favorite-badge\\`** — White rounded pill (\\`{rounded.full}\\`) at 11px / 600 weight. Sits over the photo with the system's only shadow tier applied for elevation.\n\n### Listing Detail\n\n**\\`rating-display-card\\`** — The signature listing-detail moment. A 64px / 700 rating number (\"4.81\") flanked left and right by tiny laurel-wreath SVG ornaments. Beneath the rating: \"Guest favorite\" tagline and a row of ink stat columns. The largest typographic weight in the whole system.\n\n**\\`amenity-row\\`** — A 1-column list of amenity icons + ink labels in \\`{typography.body-md}\\`. 12px row padding, no border between rows; section is closed by a 1px hairline divider above and below.\n\n**\\`reviews-card\\`** — A 2-column grid of review excerpts. Each column holds an author row (avatar, name, date) above a 3-line excerpt with \"Show more\" tertiary link.\n\n**\\`host-card\\`** — A white card with \\`{rounded.md}\\` rounding and 24px padding holding a host avatar, name, \"Superhost\" badge, response-rate stat, and a \"Contact host\" \\`{component.button-secondary}\\`.\n\n**\\`reservation-card\\`** — The sticky right-rail card on listing detail pages. White surface, \\`{rounded.md}\\` rounding, 1px hairline border, 1px shadow tier elevation, 24px padding. Contains: nightly price (\\`{typography.display-md}\\` ink), date-range selector, guest-count stepper, \"Reserve\" primary CTA full-width, and a fee breakdown stack beneath in \\`{typography.body-sm}\\`.\n\n### Date Picker\n\n**\\`date-picker-day\\`** — A 40×40px circular cell carrying the day number in \\`{typography.body-sm}\\`. Default state is transparent fill, ink text.\n\n**\\`date-picker-day-selected\\`** — Ink fill, white text, full circle (\\`{rounded.full}\\`). Range states between two selected days carry a \\`{colors.surface-soft}\\` lozenge background that connects them.\n\n### Forms\n\n**\\`text-input\\`** — White surface, 1px hairline outline, \\`{rounded.sm}\\` 8px radius, 56px height, 14×12px padding. Stacked label above (in \\`{typography.caption}\\` muted), placeholder text in \\`{typography.body-md}\\` muted. On focus, the border thickens to 2px ink and the border color flips to \\`{colors.ink}\\` — no glow, no ring.\n\n### Footer\n\n**\\`footer-light\\`** — White surface (matches the page canvas — Airbnb has no contrast footer), 48×80px padding. Three columns of link blocks (Support / Hosting / Airbnb), separated by generous 24px gutters. Each column heads with a \\`{typography.title-sm}\\` ink label and stacks \\`{component.footer-link}\\` rows in \\`{typography.body-sm}\\` ink.\n\n**\\`legal-band\\`** — A bottom strip beneath the footer columns carrying the copyright line, language picker (globe icon + \"English (US)\" link), currency picker, and social icons (Facebook, X, Instagram). All text in muted \\`{colors.muted}\\` at \\`{typography.caption-sm}\\`.\n\n## Responsive Behavior\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 744px | Top nav collapses to logo + hamburger; product tabs hide behind a sheet; search bar collapses to a single tappable pill; property cards stack 1-up; city grid 1-column; listing detail collapses reservation card to a sticky bottom bar. |\n| Tablet | 744–1128px | Top nav keeps product tabs but search bar narrows; property cards 2-up; city grid 2–3 column; reservation card stays sticky right-rail at narrower width. |\n| Desktop | 1128–1440px | Full top nav with three product tabs centered; search bar at full pill width with all 3 segments visible; property cards 4-up; city grid 6-column; listing detail 2-column with reservation rail. |\n| Wide | > 1440px | Content width caps at 1440px on listing/search pages and ~1280px on editorial; gutters absorb the rest. |\n\n### Touch Targets\n- Primary CTAs at minimum 48×48px (above WCAG AAA).\n- Search orb is 48×48px circular — the most-tapped element on the page.\n- Heart save button is 32×32px circular — borderline for AAA but compensated by a generous 12px padding inside the photo card.\n- Date-picker day cells are 40×40px circular.\n\n### Collapsing Strategy\n- Top product tabs collapse into a hamburger sheet below 744px.\n- Search bar's 3 segments collapse into a single-tap entry that opens a full-screen search overlay on mobile.\n- Property and city-link grids drop column counts cleanly at each breakpoint — never reflow rows; always reduce columns.\n- Reservation card on listing detail switches from sticky right-rail to a sticky bottom bar on mobile, carrying just the \"Reserve\" CTA + nightly price summary.\n\n## Known Gaps\n\n- **Hover state colors:** intentionally not documented per the global no-hover policy — Airbnb's actual \\`:hover\\` styling for property cards is a subtle elevation lift, but precise extraction is unreliable.\n- **Loading states / skeleton screens:** not visible on the extracted surfaces.\n- **Map view styling:** the search-results map uses Mapbox-tinted tiles with custom Rausch markers; not captured here.\n- **Form input error states:** error text color (\\`{colors.primary-error-text}\\`) is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.\n- **Sub-brand palettes:** Luxe (\\`{colors.luxe}\\`) and Plus (\\`{colors.plus}\\`) are documented as tokens, but their full sub-system (typography overrides, surface treatment) lives on separate sub-domains and is not captured here.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/presets/_briefs/airtable.d.ts

@@ -0,0 +1,3 @@
+declare const airtableBrief = "---\nversion: alpha\nname: Airtable\ndescription: A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights \u2014 never bold for its own sake.\n\ncolors:\n  primary: \"#181d26\"\n  primary-active: \"#0d1218\"\n  ink: \"#181d26\"\n  body: \"#333840\"\n  muted: \"#41454d\"\n  hairline: \"#dddddd\"\n  border-strong: \"#9297a0\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f8fafc\"\n  surface-strong: \"#e0e2e6\"\n  surface-dark: \"#181d26\"\n  surface-dark-elevated: \"#1d1f25\"\n  signature-coral: \"#aa2d00\"\n  signature-forest: \"#0a2e0e\"\n  signature-cream: \"#f5e9d4\"\n  signature-peach: \"#fcab79\"\n  signature-mint: \"#a8d8c4\"\n  signature-yellow: \"#f4d35e\"\n  signature-mustard: \"#d9a441\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  link: \"#1b61c9\"\n  link-active: \"#1a3866\"\n  info: \"#254fad\"\n  info-border: \"#458fff\"\n  success: \"#006400\"\n  success-border: \"#39bf45\"\n  pricing-ink: \"#1d1f25\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Haas Groot Disp, Haas, sans-serif\"\n    fontSize: 48px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"Haas Groot Disp, Haas, sans-serif\"\n    fontSize: 40px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"Haas Groot Disp, Haas, sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.35\n    letterSpacing: 0.12px\n  title-md:\n    fontFamily: \"Haas Groot Disp, Haas, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  label-md:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  button:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.25\n    letterSpacing: 0\n  caption:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.35\n    letterSpacing: 0.16px\n  legal:\n    fontFamily: \"Haas, sans-serif\"\n    fontSize: 13.12px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: 0\n  pricing-display:\n    fontFamily: \"Inter Display, system-ui, sans-serif\"\n    fontSize: 44.8px\n    fontWeight: 475\n    lineHeight: 1.1\n    letterSpacing: 0\n  pricing-section:\n    fontFamily: \"Inter Display, system-ui, sans-serif\"\n    fontSize: 28px\n    fontWeight: 475\n    lineHeight: 1.2\n    letterSpacing: 0\n  pricing-card-title:\n    fontFamily: \"Inter Display, system-ui, sans-serif\"\n    fontSize: 20px\n    fontWeight: 475\n    lineHeight: 1.3\n    letterSpacing: 0\n\nrounded:\n  xs: 2px\n  sm: 6px\n  md: 10px\n  lg: 12px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px 24px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.lg}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px 24px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px 24px\n  button-legal:\n    backgroundColor: \"{colors.link}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.legal}\"\n    rounded: \"{rounded.xs}\"\n    padding: 12px 10px\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 40px\n  button-pricing-pill:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.pricing-ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 12px 24px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.link}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  signature-coral-card:\n    backgroundColor: \"{colors.signature-coral}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  signature-forest-card:\n    backgroundColor: \"{colors.signature-forest}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  hero-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  feature-card-tabbed:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  cream-callout-card:\n    backgroundColor: \"{colors.signature-cream}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.md}\"\n    padding: 24px\n  demo-grid-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 16px\n  logo-strip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-md}\"\n    padding: 32px\n  article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.md}\"\n    padding: 16px\n  topic-filter-rail:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    width: 240px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 12px 16px\n    height: 44px\n  text-input-focus:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.sm}\"\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.pricing-ink}\"\n    typography: \"{typography.pricing-card-title}\"\n    rounded: \"{rounded.md}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.pricing-ink}\"\n    typography: \"{typography.pricing-card-title}\"\n    rounded: \"{rounded.md}\"\n    padding: 32px\n  pricing-comparison-row:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px\n  cta-band-light:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    padding: 64px\n---\n\n## Overview\n\nAirtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA \u2014 nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from **full-bleed signature cards** in `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.\n\nType voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 \u2014 emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: **Inter Display** at unusual mid-weights (475 / 575) and **pill-shaped buttons** (`{rounded.pill}`) that don't appear on any other page \u2014 a deliberate sub-system signaling \"this page is about commercial precision.\"\n\n**Key Characteristics:**\n- Primary CTA is `{colors.primary}` (near-black ink) with white text and a `{rounded.lg}` (12px) corner \u2014 it reads as confident and final, never decorative.\n- Secondary CTA is a `{colors.canvas}` button with `{colors.ink}` text and a hairline outline. The two together form Airtable's signature button pair.\n- Hero is white canvas. There is no atmospheric gradient, no mesh, no background flourish. The brand strength comes from the type and the buttons sitting in clean whitespace.\n- Brand voltage lives in **signature surface cards**: `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` carry full-bleed product callouts every few screens.\n- Demo-card grids carry product UI fragments on `{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-cream}` and other warm pastel surfaces.\n- Section rhythm: white canvas \u2192 coral signature card \u2192 white body \u2192 cream callout band \u2192 dark navy CTA \u2192 light gray CTA banner \u2192 footer. The canvas resets between every signature surface.\n- Border radius is hierarchical: `{rounded.lg}` (12px) for primary CTAs and large signature cards, `{rounded.md}` (10px) for content cards and demo grids, `{rounded.sm}` (6px) for inputs, `{rounded.full}` for icon buttons. Pricing buttons jump to `{rounded.pill}` to mark themselves as a separate dialect.\n- Vertical rhythm is `{spacing.section}` (96px) between major bands \u2014 universal across every page.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (`{colors.primary}` \u2014 #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the `{component.surface-dark}` band. Not \"blue, then black\" \u2014 black IS the primary throughout the marketing system.\n- **Primary Active** (`{colors.primary-active}` \u2014 #0d1218): The press state on primary buttons.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #ffffff): The default page surface; the floor of every editorial body.\n- **Surface Soft** (`{colors.surface-soft}` \u2014 #f8fafc): Tabbed feature cards and the featured pricing tier.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #e0e2e6): The light gray \"Start building with Airtable\" CTA banner near the footer.\n- **Surface Dark** (`{colors.surface-dark}` \u2014 #181d26): The dark navy CTA cards used mid-page (for example \"The path to 10\u00D7 every person in your organization\").\n- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` \u2014 #1d1f25): The articles-page hero base behind the rainbow-stripe overlay.\n- **Hairline** (`{colors.hairline}` \u2014 #dddddd): The 1px border tone for input outlines, table dividers, secondary-button outlines.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #181d26): The strongest text \u2014 h1/h2 display type and primary button text-on-light. Same hex as `{colors.primary}` because they are the same role expressed at type and button layers.\n- **Body** (`{colors.body}` \u2014 #333840): The default running-text color.\n- **Muted** (`{colors.muted}` \u2014 #41454d): Footer links, breadcrumbs, captions.\n- **Border Strong** (`{colors.border-strong}` \u2014 #9297a0): The 1px outline color on disabled secondary buttons.\n- **On Primary / On Dark** (`{colors.on-primary}` \u2014 #ffffff): The text color on primary buttons and dark surfaces.\n\n### Signature Card Surfaces\nThese are the colors that carry Airtable's brand voltage. They appear as full-bleed, full-card surfaces \u2014 never as accents on a small element.\n- **Coral** (`{colors.signature-coral}` \u2014 #aa2d00): The largest signature card on the homepage (\"Production apps in prototype speed\"). Full-bleed dark coral with white type.\n- **Forest** (`{colors.signature-forest}` \u2014 #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.\n- **Cream** (`{colors.signature-cream}` \u2014 #f5e9d4): The cream callout band (\"The path to 10\u00D7 every person in your organization\") \u2014 a soft beige surface holding dark type and product UI fragments.\n- **Peach** (`{colors.signature-peach}` \u2014 #fcab79), **Mint** (`{colors.signature-mint}` \u2014 #a8d8c4), **Yellow** (`{colors.signature-yellow}` \u2014 #f4d35e), **Mustard** (`{colors.signature-mustard}` \u2014 #d9a441): Demo-card surfaces that carry small product UI fragments inside the multi-card grid sections.\n\n### Semantic\n- **Link** (`{colors.link}` \u2014 #1b61c9): Inline body links and anchor text. Darker on press to `{colors.link-active}` (#1a3866). Despite the `--theme_button-background-primary` CSS-variable name, this color is **not** the primary button color \u2014 it is the link color.\n- **Info** (`{colors.info}` \u2014 #254fad) and **Info Border** (`{colors.info-border}` \u2014 #458fff): Inline info badges and focused-input outline.\n- **Success** (`{colors.success}` \u2014 #006400) and **Success Border** (`{colors.success-border}` \u2014 #39bf45): Confirmation states.\n\n## Typography\n\n### Font Family\nThe system runs **Haas / Haas Groot Disp** (Airtable's licensed display + text type). Haas Groot Disp covers display sizes (h1 / h2); Haas Grotesk covers everything 24px and below. The fallback stack walks `-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif`.\n\nThe pricing surface runs a separate **Inter Display** stack at mid-weights (475 / 575) \u2014 a deliberate sub-system signaling commercial precision.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-xl}` | 48px | 500 | 1.1 | 0 | Articles page h2 \u2014 second-tier editorial headline |\n| `{typography.display-lg}` | 40px | 400 | 1.2 | 0 | Homepage h1 hero |\n| `{typography.display-md}` | 32px | 400 | 1.2 | 0 | Platform-page h2 \u2014 feature-section headlines |\n| `{typography.title-lg}` | 24px | 400 | 1.35 | 0.12px | Section titles |\n| `{typography.title-md}` | 20px | 400 | 1.5 | 0 | Sub-section titles in tabbed feature cards |\n| `{typography.title-sm}` | 18px | 500 | 1.4 | 0 | Article-card titles |\n| `{typography.label-md}` | 16px | 500 | 1.4 | 0 | Demo-card titles, list labels |\n| `{typography.button}` | 16px | 500 | 1.4 | 0 | Standard CTA button labels |\n| `{typography.body-md}` | 14px | 400 | 1.25 | 0 | Body copy, footer links, top-nav items |\n| `{typography.caption}` | 14px | 500 | 1.35 | 0.16px | Light captions and meta text |\n| `{typography.legal}` | 13.12px | 600 | 1.2 | 0 | Cookie/legal CTA buttons |\n| `{typography.pricing-display}` | 44.8px | 475 | 1.1 | 0 | Pricing-page h1 |\n| `{typography.pricing-section}` | 28px | 475 | 1.2 | 0 | Pricing-page section heads |\n| `{typography.pricing-card-title}` | 20px | 475 | 1.3 | 0 | Pricing tier card plan name |\n\n### Principles\nThe Haas system prefers weight 400 for display sizes \u2014 a 40px h1 is **not** bold. Visual emphasis is delegated to size, color contrast, and the signature surface cards. Where the system does want weight, it pivots to 500 (sub-titles, buttons, article titles), never 600 or 700 in the editorial body. The only true bold (600) lives in `{typography.legal}` \u2014 a sign that boldness is reserved for terms-of-service surfaces, not marketing.\n\nThe pricing-page sub-system uses Inter Display at `font-weight: 475` \u2014 a custom mid-weight between regular (400) and medium (500), shipped as a variable font.\n\n### Note on Font Substitutes\nIf Haas Groot Disp and Haas Grotesk are unavailable, **Inter Display** (variable) is the closest open-source substitute for both \u2014 adjust line-height down by ~5% to match Haas's tighter cap-height. For the pricing sub-system, use Inter Display directly. On macOS / iOS, **system-ui** is sufficient; on Windows, the chain falls through to Segoe UI, which is a usable but slightly cooler substitute.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px (all spacing snaps to 4-multiples).\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.md}` 16px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{spacing.section}` 96px.\n- **Section padding (vertical):** `{spacing.section}` (96px) is the universal vertical rhythm constant \u2014 every major editorial band on every page uses 96px top + 96px bottom internal padding.\n- **Card internal padding:** `{spacing.xl}` (32px) for tabbed feature cards and pricing tier cards; `{spacing.xxl}` (48px) inside signature coral / forest / dark cards; `{spacing.lg}` (24px) for cream callouts and demo-grid cards.\n- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside denser logo strips and footer column gutters.\n\n### Grid & Container\n- **Max content width:** ~1280px centered, with `{spacing.xxl}` (48px) horizontal breathing room.\n- **Editorial body:** Single 8/12-column at large breakpoints, collapsing to single-column on mobile.\n- **Demo-card grids:** 3 or 4 columns at desktop, 2 at tablet, 1 at mobile. Card sizes are deliberately uneven within the grid to dodge a uniform \"spec sheet\" feel.\n- **Logo strip:** 6 monochrome partner logos in a single row at desktop; wraps to 3-up on mobile.\n\n### Whitespace Philosophy\nAirtable uses whitespace as the dominant atmospheric tool. Hero sections sit in 96px+ of pure whitespace above and below the headline + sub-headline pair, with no decoration in that whitespace. The hero is intentionally calm \u2014 there is no gradient, no aurora, no atmospheric mesh behind the type. The system trusts whitespace alone to do the framing.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, footer |\n| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav rails, comparison-table dividers, secondary buttons |\n| Button rest | Soft drop with subtle blue-tinted glow at low alpha | Primary CTA buttons (the blue tint is a holdover from the link color and reads as a faint accent under the dark button) |\n| Button focus | Outer 2px blue ring at higher alpha | Keyboard focus state on primary buttons |\n| Card flat | No shadow; relies on color contrast against the surface band | Signature coral / forest / dark cards, cream callouts, demo-grid cards |\n\nThe elevation philosophy is **color-block first, shadow second**. Shadows are minimal; depth is delegated to the contrast between white canvas and signature surface cards. There is no soft-glow / atmospheric-shadow / heavy-elevation language anywhere in the marketing system.\n\n### Decorative Depth\n- **Vertical rainbow stripes** appear on the articles hero only \u2014 multi-color vertical bands sitting on `{colors.surface-dark-elevated}`. This is a single-page treatment, not a system-wide signature.\n- **Photography-as-depth** in the demo-card grid: every card carries a real product UI screenshot or mockup, contributing depth through legible artifact density rather than decorative effects.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.xs}` | 2px | Cookie-consent and legal CTA buttons \u2014 system-required surfaces |\n| `{rounded.sm}` | 6px | Text inputs, small inline buttons |\n| `{rounded.md}` | 10px | Secondary content cards, article cards, cream callouts |\n| `{rounded.lg}` | 12px | Primary CTA buttons, signature surface cards, tabbed feature cards |\n| `{rounded.pill}` | 9999px | Pricing-page CTA buttons (sub-system only) |\n| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |\n\n### Photography Geometry\nProduct UI screenshots inside demo-card grids retain native aspect ratios (typically 4:3 or 16:10) and crop into `{rounded.md}` containers. Hero illustrations bleed full-width with no rounding. Article-card thumbnails use 16:9 with `{rounded.md}` corners. Avatars in testimonials use `{rounded.full}` (perfect circles). Pricing comparison table images stay rectangular with no rounding.\n\n## Components\n\n> **No hover states documented.** Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the `components:` front matter.\n\n**`top-nav`** \u2014 A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in `{typography.body-md}`; the right cluster carries a \"Book Demo\" outline link, \"Sign up for free\" `{component.button-primary}`, and \"Log In\" text link. The nav stays light on every page \u2014 Airtable does not invert the nav over dark sections.\n\n### Buttons\n\n**`button-primary`** \u2014 The signature primary CTA. Background `{colors.primary}` (near-black), text `{colors.on-primary}`, type `{typography.button}`, padding 16px \u00D7 24px, rounded `{rounded.lg}` (12px). This is the \"Get started for free\" / \"Sign up for free\" button visible on every hero. It reads as confident and final \u2014 not decorative \u2014 which is why the system uses it sparingly (one per viewport).\n- Active state: `button-primary-active` darkens to `{colors.primary-active}` (#0d1218).\n\n**`button-secondary`** \u2014 White outline button (e.g. \"Book demo\"). Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.lg}` (12px), 1px hairline outline. Sits next to `{component.button-primary}` as the \"less-committed\" choice.\n\n**`button-secondary-on-dark`** \u2014 Same shape as `{component.button-secondary}` but used on signature coral / forest / dark surfaces. Background `{colors.canvas}`, text `{colors.ink}` \u2014 the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.\n\n**`button-pricing-pill`** \u2014 The pricing-page CTA family. Background `{colors.canvas}`, text `{colors.pricing-ink}`, rounded `{rounded.pill}` (9999px), padding 12px \u00D7 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.\n\n**`button-legal`** \u2014 Cookie-consent and legal-banner CTAs. Background `{colors.link}`, text `{colors.on-primary}`, type `{typography.legal}` (13.12px / 600), rounded `{rounded.xs}` (2px), padding 12px \u00D7 10px. The 2px corner radius and 600 weight signal \"this is a required system surface,\" not a designed brand surface.\n\n**`button-icon-circular`** \u2014 40px \u00D7 40px circular button with `{colors.canvas}` background, hairline border, and `{colors.ink}` icon. Used for carousel controls, \"share\", and \"back\" affordances.\n\n**`text-link`** \u2014 Inline body links in `{colors.link}` (#1b61c9, the actual link blue). No underline by default. Type inherits `{typography.body-md}`.\n\n### Cards & Containers\n\n**`hero-band`** \u2014 The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient \u2014 just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding `{spacing.section}` (96px).\n\n**`signature-coral-card`** \u2014 The large full-bleed coral card on the homepage (\"Production apps in prototype speed\"). Background `{colors.signature-coral}` (#aa2d00, a dark coral / oxide red), text `{colors.on-primary}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}`, supporting copy in `{typography.body-md}`, and `{component.button-secondary-on-dark}` as the CTA.\n\n**`signature-forest-card`** \u2014 A deep green signature card (`{colors.signature-forest}` \u2014 #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.\n\n**`hero-card-dark`** \u2014 The dark navy mid-page CTA card (e.g. \"The path to 10\u00D7 every person in your organization\"). Background `{colors.surface-dark}` (#181d26), text `{colors.on-dark}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). The same color as `{colors.primary}` because the system uses ink as both type color and signature dark surface.\n\n**`feature-card-tabbed`** \u2014 Light-cream cards (e.g. the \"Coke / Pelosi / Conde Nast / Time Inc\" tabbed feature card on the homepage). Background `{colors.surface-soft}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Left rail carries vertically-stacked tab labels in `{typography.title-md}`; right pane shows the active tab's content (illustration + body copy + small CTA).\n\n**`cream-callout-card`** \u2014 Beige callout cards (`{colors.signature-cream}`). Rounded `{rounded.md}` (10px), internal padding `{spacing.lg}` (24px). Carry product UI fragments or stat callouts \u2014 softer than the dark/coral signature cards but still a deliberate brand surface.\n\n**`demo-grid-card`** \u2014 Used in multi-card grids that punctuate every page. Background `{colors.canvas}` or one of the demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`), rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform \"spec sheet\" feel.\n\n**`logo-strip`** \u2014 Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in `{colors.muted}`, surface is `{colors.canvas}`, vertical padding `{spacing.xl}` (32px). 6 logos at desktop, 3 at mobile.\n\n**`article-card`** \u2014 The trending-stories grid on the articles page. Background `{colors.canvas}`, rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an `{typography.title-sm}` title, and a meta line. 3-up at desktop.\n\n**`topic-filter-rail`** \u2014 The left rail on the articles page. 240px wide, `{colors.canvas}` background, `{typography.body-md}`, vertically grouped category headings (\"Marketing\", \"Product\", \"Project management\", \"Operations\") with sub-bullets. Active item carries a small numeric count badge.\n\n### Inputs & Forms\n\n**`text-input`** \u2014 Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.sm}` (6px), padding 12px \u00D7 16px, height 44px. 1px hairline border in `{colors.hairline}`.\n\n**`text-input-focus`** \u2014 Focus state. Border thickens or recolors to `{colors.info-border}`.\n\n### Pricing Sub-System\n\n**`pricing-tier-card`** \u2014 Standard tier card. Background `{colors.canvas}`, text `{colors.pricing-ink}`, type `{typography.pricing-card-title}` for the plan name, rounded `{rounded.md}` (10px), internal padding `{spacing.xl}` (32px). Carries the plan name, a price block in `{typography.pricing-display}` (44.8px / 475), feature checklist, and a `{component.button-pricing-pill}` at the bottom.\n\n**`pricing-tier-card-featured`** \u2014 The featured tier (typically \"Team\" or \"Business\"). Background shifts to `{colors.surface-soft}`. No accent border, no badge \u2014 the background tone shift is the only signal.\n\n**`pricing-comparison-row`** \u2014 Each row of the long comparison table at the bottom of the pricing page. Labels in the left column; checkmarks or values across 4 plan columns. 12px vertical padding per row, hairline divider between rows.\n\n### Navigation Variants\n\n**`footer`** \u2014 Light surface (`{colors.canvas}`), 6-column link list at desktop covering Platform / Solutions / Resources / Learn / Company sub-trees. Vertical padding `{spacing.section}` divided across upper link block and lower legal row. Type `{typography.body-md}`.\n\n**`cta-band-light`** \u2014 The light gray \"Start building with Airtable\" CTA strip near the footer. Background `{colors.surface-strong}` (#e0e2e6), text `{colors.ink}`, rounded `{rounded.lg}` (12px), padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}` and a `{component.button-primary}`.\n\n### Signature Components\n\n**Articles Vertical Rainbow Stripe Hero** \u2014 The articles-page hero treatment. Multi-color vertical bands at varying widths sitting on `{colors.surface-dark-elevated}`. The h1 + sub-head + CTA cluster sits center-left on top of the stripes. This is a single-page hero treatment, not a system-wide signature \u2014 do not promote it to a multi-page pattern.\n\n## Do's and Don'ts\n\n### Do\n- Keep `{component.button-primary}` near-black. The brand's primary CTA is `{colors.primary}`, not the link blue. Mixing them up turns a confident hero into a confused one.\n- Reserve `{component.button-primary}` for one primary action per viewport. The system is designed for scarcity at the brand-action layer.\n- Use `{component.button-secondary}` (white with hairline outline) as the natural pair with `{component.button-primary}`. The two together form Airtable's signature button row.\n- Trust whitespace as the hero atmosphere. Hero bands are intentionally calm \u2014 no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.\n- Use `{component.signature-coral-card}`, `{component.signature-forest-card}`, and `{component.hero-card-dark}` to break editorial monotony. These are the brand's voltage moments.\n- Keep `{component.demo-grid-card}` heights uneven within a grid. Uniform heights feel like a spec sheet.\n- Treat the pricing surface as its own dialect: keep `{typography.pricing-display}`, `{typography.pricing-card-title}`, and `{component.button-pricing-pill}` together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.\n- Anchor every editorial band with `{spacing.section}` (96px) vertical padding.\n\n### Don't\n- Don't make `{colors.link}` (#1b61c9) the primary button color. It is the link color. The primary button is `{colors.primary}` (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.\n- Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as \"another SaaS template\" \u2014 not Airtable.\n- Don't bold display-weight type. `{typography.display-xl}` and `{typography.display-lg}` are intentionally weight 400 / 500 \u2014 going to 700 reads as marketing-page-template.\n- Don't use `{rounded.pill}` outside the pricing surface. It's a sub-system signal, not a general radius option.\n- Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white \u2192 signature card \u2192 white \u2192 cream \u2192 dark \u2192 white. Two whites in a row read as a typography blog.\n- Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.\n- Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Single-column body; top nav collapses to hamburger; demo-grid drops to 1-up; signature cards stay full-bleed; logo strip wraps to 2 rows; footer collapses to single-column |\n| Tablet | 768\u20131024px | 2-up demo-grid; top nav stays horizontal but tightens; cream-callout cards stack 2-up; pricing comparison table becomes horizontally scrollable |\n| Desktop | 1024\u20131440px | 3-up demo-grid (and 4-up for tighter content); full top-nav with all menu items visible; pricing tier cards render 4-across |\n| Wide | > 1440px | Same as Desktop with more outer breathing room; max content width caps at ~1280px and the page adds outer margin rather than scaling type up |\n\n### Touch Targets\n- `{component.button-primary}` and siblings render at 48 \u00D7 48px minimum (16px vertical padding + 16px line-height) \u2014 comfortably above WCAG AAA's 44 \u00D7 44.\n- `{component.button-icon-circular}` is exactly 40 \u00D7 40px \u2014 slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.\n- `{component.text-input}` height is 44px.\n\n### Collapsing Strategy\n- Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.\n- Card grids reduce columns rather than scaling cards down.\n- The `{component.feature-card-tabbed}` re-stacks the tab rail above the content pane on mobile.\n- The pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll.\n\n### Image Behavior\n- Demo-card UI screenshots crop to fit their container rather than scaling up.\n- Hero illustrations bleed full-width on mobile, losing horizontal margin.\n- Signature card images (inside coral / forest / dark cards) compress to their card width without cropping.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.signature-coral-card}`).\n2. When adding a new component, decide first which sub-system it belongs to: the main editorial system (Haas, `{rounded.lg}`/`{rounded.md}`) or the pricing sub-system (Inter Display, `{rounded.pill}`).\n3. Variants of an existing component (`-active`, `-disabled`, `-focus`) live as separate entries in `components:` \u2014 never as nested state objects.\n4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value. Hex codes appear at most once next to the reference.\n5. Never document hover. The system documents Default and Active/Pressed states only.\n6. Run `npx @google/design.md lint DESIGN.md` after edits \u2014 `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.\n7. When in doubt about emphasis: bigger type before bolder type, signature surface card before solid accent.\n\n## Known Gaps\n\n- The exact hex values of pastel demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`) are inferred from screenshot pixel sampling. Some product launches may swap these surfaces seasonally.\n- Hover behavior across all components is not documented (per global no-hover policy).\n- Animation and transition timings are not in scope.\n- Form validation states beyond `text-input-focus` are not extracted \u2014 error and success states for inputs would need a dedicated form page to confirm.\n- The pricing comparison table's checkmark glyph and column-divider widths are described structurally but not formalized as tokens.\n- The CSS variable `--theme_button-background-primary: #1b61c9` exists at `:root` but is not used as the primary CTA color anywhere on the marketing site. It maps to the link/info color role instead. Documented here so future extractions don't re-trip over the misleading variable name.\n";
+
+export { airtableBrief };