@hex-core/themes 0.2.4 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/binance.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const binanceBrief = `---\nversion: alpha\nname: Binance\ndescription: A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow (#FCD535) carries every primary CTA, brand accent, and value-claim moment. Type runs Binance's custom BinanceNova / BinancePlex stack at modest weights — the system trusts size and yellow voltage over bold weight. Marketing and product surfaces default to the dark theme; transactional surfaces (buy crypto, deposit, exchange) flip to a light theme that shares the same yellow CTAs and gray-blue hairlines. Trading green (up) and red (down) accents thread through both modes for price-direction signals.\n\ncolors:\n  primary: \"#fcd535\"\n  primary-active: \"#f0b90b\"\n  primary-disabled: \"#3a3a1f\"\n  ink: \"#181a20\"\n  body: \"#eaecef\"\n  body-on-light: \"#181a20\"\n  muted: \"#707a8a\"\n  muted-strong: \"#929aa5\"\n  hairline-on-light: \"#eaecef\"\n  hairline-on-dark: \"#2b3139\"\n  border-strong: \"#cdd1d6\"\n  canvas-light: \"#ffffff\"\n  canvas-dark: \"#0b0e11\"\n  surface-card-dark: \"#1e2329\"\n  surface-elevated-dark: \"#2b3139\"\n  surface-soft-light: \"#fafafa\"\n  surface-strong-light: \"#f5f5f5\"\n  on-primary: \"#181a20\"\n  on-dark: \"#ffffff\"\n  trading-up: \"#0ecb81\"\n  trading-down: \"#f6465d\"\n  accent-turquoise: \"#2dbdb6\"\n  info: \"#3b82f6\"\n  info-ring: \"#3b82f6\"\n\ntypography:\n  hero-display:\n    fontFamily: \"BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-lg:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 48px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -0.5px\n  display-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 40px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -0.3px\n  display-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 32px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 24px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 20px\n    fontWeight: 600\n    lineHeight: 1.35\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  number-display:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -0.3px\n  number-md:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  number-sm:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 12px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  button:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 600\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 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: 80px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.md}\"\n  button-primary-pill:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 14px 32px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n  button-secondary-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.button}\"\n  button-trading-up:\n    backgroundColor: \"{colors.trading-up}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 20px\n  button-trading-down:\n    backgroundColor: \"{colors.trading-down}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 20px\n  button-subscribe:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 6px 16px\n    height: 28px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.body-md}\"\n  top-nav-dark:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band-dark:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.hero-display}\"\n    padding: 80px\n  stat-callout-card:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.number-display}\"\n  trust-badge:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px 20px\n  markets-table-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  markets-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.number-md}\"\n    padding: 12px 0\n  price-up-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.trading-up}\"\n    typography: \"{typography.number-md}\"\n  price-down-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.trading-down}\"\n    typography: \"{typography.number-md}\"\n  search-input-on-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 10px 16px\n    height: 40px\n  text-input-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 16px\n    height: 40px\n  funds-safu-band:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  feature-photo-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.xl}\"\n  qr-promo-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  faq-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.md}\"\n    padding: 20px 0\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.xl}\"\n    padding: 48px\n  arena-hero-gradient:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px\n  buy-crypto-amount-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.number-display}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  steps-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  price-chart-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  conversion-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n  trader-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  footer-light:\n    backgroundColor: \"{colors.surface-soft-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    padding: 64px\n---\n\n## Overview\n\nBinance reads like a financial trading platform that wants to feel both authoritative and energetic. The base atmosphere is **deep near-black canvas** (\\`{colors.canvas-dark}\\` — #0b0e11) holding white type and a single, ubiquitous accent: **Binance Yellow** (\\`{colors.primary}\\` — #FCD535). That yellow does almost all of the brand's heavy lifting — it carries every primary CTA, every value-claim headline (\"FUNDS ARE SAFU\"), every \"Sign Up\" pill, every featured tier indicator, and the wordmark itself. There is no secondary brand color. The system trusts the yellow voltage to do the brand work, and it carries it.\n\nType runs Binance's custom **BinanceNova** (display + body) and **BinancePlex** (numerical / financial display) stack. BinanceNova carries display headlines, section titles, and body copy. BinancePlex appears on price tickers, large stat numbers (transaction volumes, user counts, prize pools) — anywhere a number wants to feel \"tabular and reliable.\" Both run at modest weights — display sizes use weight 600-700 (bolder than typical marketing because trading platforms need numbers to read at a glance), body stays at 400.\n\nThe product is **multi-theme**: marketing surfaces (homepage, smart-money, futures arena) default to dark, while transactional surfaces (buy crypto, deposit, withdraw) flip to a light theme. The same yellow CTAs and gray-blue hairlines (\\`{colors.hairline-on-light}\\` — #eaecef) thread through both — only canvas, surface, and text tones flip. Trading **green** (\\`{colors.trading-up}\\` — #0ecb81) and **red** (\\`{colors.trading-down}\\` — #f6465d) signal price direction in tables, charts, and price tickers across both modes.\n\n**Key Characteristics:**\n- Single accent color: \\`{colors.primary}\\` (#FCD535) does all brand voltage — primary CTAs, hero headlines, brand mark, badges. Used scarcely on dark for emphasis, ubiquitously on transactional dialogs.\n- Custom type stack: \\`BinanceNova\\` (display + body) and \\`BinancePlex\\` (numbers, prices, financial data). Big stat numbers always render in BinancePlex for tabular consistency.\n- Multi-theme: marketing pages default dark (\\`{colors.canvas-dark}\\`); transactional pages flip light (\\`{colors.canvas-light}\\`). Yellow CTAs and trading green/red are shared across both.\n- Light footer on dark body: the homepage uses \\`{colors.surface-soft-light}\\` (#fafafa) for the footer even when the body above it is dark — a deliberate inversion that visually closes the page.\n- Trading semantics: green up / red down (\\`{colors.trading-up}\\` / \\`{colors.trading-down}\\`) for price changes, applied as text color rather than badge background.\n- Card surfaces: \\`{colors.surface-card-dark}\\` (#1e2329) for elevated cards on dark; \\`{colors.canvas-light}\\` for cards on light. No gradient surfaces, no atmospheric backdrops — flat color blocks throughout.\n- Border radius is small to medium: \\`{rounded.md}\\` (6px) for primary buttons, \\`{rounded.lg}\\` (8px) for inputs and content cards, \\`{rounded.xl}\\` (12px) for elevated card containers, \\`{rounded.pill}\\` for prominent feature CTAs.\n- Spacing follows a 4-multiple scale; major editorial bands sit at \\`{spacing.section}\\` (80px) — slightly tighter than typical marketing-only sites because product pages need denser layouts.\n\n## Colors\n\n### Brand & Accent\n- **Binance Yellow** (\\`{colors.primary}\\` — #FCD535): The single brand color. Used for primary CTA backgrounds, the wordmark, brand-claim headlines (\"FUNDS ARE SAFU\"), trust badges (\"No.1 Trading Volume\"), large stat numbers in \\`{component.stat-callout-card}\\`, and inline links.\n- **Binance Yellow Active** (\\`{colors.primary-active}\\` — #f0b90b): The press / hover-darker variant. Slightly more saturated yellow.\n- **Binance Yellow Disabled** (\\`{colors.primary-disabled}\\` — #3a3a1f): A desaturated dark-yellow used on disabled CTAs over dark canvas.\n- **Accent Turquoise** (\\`{colors.accent-turquoise}\\` — #2dbdb6): A small secondary accent used very sparingly on Smart Money's \"Check Now\" CTA over dark surfaces. Treat as a single-product accent, not a system color.\n\n### Surface\n\nThe system has two canvas modes that map to product context:\n\n**Dark mode (marketing default):**\n- **Canvas Dark** (\\`{colors.canvas-dark}\\` — #0b0e11): The primary page floor. Near-black with a slight warm tint — never pure black.\n- **Surface Card Dark** (\\`{colors.surface-card-dark}\\` — #1e2329): Cards, navigation dropdowns, secondary buttons over dark canvas, markets table.\n- **Surface Elevated Dark** (\\`{colors.surface-elevated-dark}\\` — #2b3139): One step lighter, used for nested cards, hovered nav items, and chart background panels.\n\n**Light mode (transactional):**\n- **Canvas Light** (\\`{colors.canvas-light}\\` — #ffffff): The page floor on transactional pages (buy crypto, deposit forms, account dialogs).\n- **Surface Soft Light** (\\`{colors.surface-soft-light}\\` — #fafafa): Footer surface and disabled states.\n- **Surface Strong Light** (\\`{colors.surface-strong-light}\\` — #f5f5f5): Form input backgrounds in muted contexts.\n\n### Hairlines & Borders\n- **Hairline on Light** (\\`{colors.hairline-on-light}\\` — #eaecef): The 1px border tone on light surfaces. Dembrandt's frequency analysis confirms this as the highest-count token (1022 occurrences) — Binance uses hairlines liberally.\n- **Hairline on Dark** (\\`{colors.hairline-on-dark}\\` — #2b3139): The 1px border tone on dark surfaces. Same hex as \\`{colors.surface-elevated-dark}\\` — borders feel like surface steps, not ink lines.\n- **Border Strong** (\\`{colors.border-strong}\\` — #cdd1d6): A heavier border tone used on disabled secondary buttons.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #181a20): The strongest text on light surfaces. Display headlines on transactional pages.\n- **Body on Dark** (\\`{colors.body}\\` — #eaecef): Default running-text on dark canvas — deliberately not pure white, slightly cooler.\n- **Body on Light** (\\`{colors.body-on-light}\\` — #181a20): Same as ink — light-mode body text reuses the ink token.\n- **Muted** (\\`{colors.muted}\\` — #707a8a): Footer links, breadcrumbs, captions, table column headers. Works on both light and dark canvas.\n- **Muted Strong** (\\`{colors.muted-strong}\\` — #929aa5): A second-tier muted for emphasized labels.\n- **On Primary** (\\`{colors.on-primary}\\` — #181a20): Black text on yellow primary CTAs.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): Pure white for high-contrast headlines on dark canvas.\n\n### Trading Semantics\n- **Trading Up** (\\`{colors.trading-up}\\` — #0ecb81): Price-up green, used as text color in tables, charts, and inline ticker arrows. Never as a button background.\n- **Trading Down** (\\`{colors.trading-down}\\` — #f6465d): Price-down red. Same usage rules as trading-up.\n\n### Info / Focus\n- **Info** (\\`{colors.info}\\` — #3b82f6): Inline info badges and the focus-ring base. The Tailwind \\`--tw-ring-color\\` token surfaced by dembrandt — used on input focus.\n\n## Typography\n\n### Font Family\nThe system runs **BinanceNova** for display and body, and **BinancePlex** for numerical / financial data. Both are licensed Binance custom typefaces. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe split is functional, not decorative:\n- BinanceNova → editorial type (headlines, paragraphs, button labels, nav)\n- BinancePlex → tabular numerical type (prices, volumes, percentages, stat counters, prize pools)\n\nMixing them is not optional — BinanceNova on a price ticker would lose the trading-platform character; BinancePlex on a paragraph would feel monospace-cold.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.hero-display}\\` | 64px | 700 | 1.1 | -1px | Homepage h1 (\"316,258,026 USERS TRUST US\") |\n| \\`{typography.display-lg}\\` | 48px | 700 | 1.1 | -0.5px | Brand-claim headlines (\"FUNDS ARE SAFU\"), prize-pool hero (\"Futures Masters Arena\") |\n| \\`{typography.display-md}\\` | 40px | 600 | 1.15 | -0.3px | Section heads on long-scroll pages |\n| \\`{typography.display-sm}\\` | 32px | 600 | 1.2 | 0 | CTA band headlines (\"Secure, Low-Fee Trading on Binance\") |\n| \\`{typography.title-lg}\\` | 24px | 600 | 1.3 | 0 | Sub-section titles |\n| \\`{typography.title-md}\\` | 20px | 600 | 1.35 | 0 | QR-promo cards, feature card titles |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | Trust badges, FAQ rows, step labels |\n| \\`{typography.number-display}\\` | 40px | 700 | 1.1 | -0.3px | Big stat numbers (15,000 BTC, $429,423,449) — BinancePlex |\n| \\`{typography.number-md}\\` | 16px | 500 | 1.4 | 0 | Markets table prices, table cells — BinancePlex |\n| \\`{typography.number-sm}\\` | 14px | 500 | 1.4 | 0 | Inline prices, %  changes — BinancePlex |\n| \\`{typography.body-md}\\` | 14px | 400 | 1.5 | 0 | Default running-text — BinanceNova |\n| \\`{typography.body-sm}\\` | 13px | 400 | 1.5 | 0 | Cookie consent text, footer body |\n| \\`{typography.caption}\\` | 12px | 500 | 1.4 | 0 | Small meta labels |\n| \\`{typography.button}\\` | 14px | 600 | 1 | 0 | Standard CTA button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top nav menu items |\n\n### Principles\nDisplay sizes use weight 700 — heavier than most marketing systems. This makes sense for a trading platform: numbers need to read at a glance, headlines need to compete with chart visualizations and dense data tables. The system will not soften display weight to 400 the way Airtable or Stripe does.\n\n\\`{typography.number-display}\\` and the smaller number variants always use **BinancePlex**, even when surrounding body type uses BinanceNova. Prices, volumes, and stat counters render in BinancePlex regardless of context — it is the system's \"trustworthy number\" voice.\n\n### Note on Font Substitutes\nIf BinanceNova and BinancePlex are unavailable, **Inter** is the closest open-source substitute for BinanceNova and **JetBrains Mono** or **IBM Plex Sans** is the closest substitute for BinancePlex (depending on whether tabular monospace fidelity matters more than humanist proportions). Adjust display headlines down by ~3% in line-height to match BinanceNova's tighter cap height.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 80px.\n- **Section padding (vertical):** \\`{spacing.section}\\` (80px) — slightly tighter than airy marketing sites (96px) because Binance pages mix marketing bands with dense product surfaces (markets tables, FAQ accordions).\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for content cards and markets tables; \\`{spacing.xl}\\` (32px) for QR-promo cards and CTA bands; \\`{spacing.md}\\` (16px) for trust badges and table rows.\n- **Gutters:** \\`{spacing.lg}\\` (24px) between cards in 3-up grids; \\`{spacing.md}\\` (16px) inside footer column gutters and dense FAQ lists.\n\n### Grid & Container\n- **Max content width:** ~1280px centered on marketing pages; ~1440px on product surfaces (markets, smart-money tables) where horizontal density matters.\n- **Editorial body:** Single 12-column grid; product pages often use 8/4 split (main panel + side rail).\n- **Markets table:** 5-column header (Pair / Last Price / 24h Change / 24h Volume / Action), with the first column carrying coin icon + symbol pair.\n- **Footer:** 6-column link list at desktop, wrapping to 2-up at tablet and 1-up on mobile.\n\n### Whitespace Philosophy\nBinance is denser than typical marketing sites — long-scroll pages mix hero bands with markets tables, FAQ accordions, and feature grids without much breathing room between them. The system trusts contrast (yellow vs. dark canvas, green vs. red price cells) to do the visual separation work, not whitespace. Where whitespace appears, it's always uniform — \\`{spacing.section}\\` between every major band.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands, footer |\n| Soft hairline | 1px \\`{colors.hairline-on-dark}\\` or \\`{colors.hairline-on-light}\\` | Inputs, table dividers, FAQ row separators, secondary buttons |\n| Card surface | \\`{colors.surface-card-dark}\\` background on dark canvas, \\`{colors.canvas-light}\\` on light context — no shadow | All elevated cards (markets-table-card, QR-promo-card, feature-photo-card, trust-badges) |\n| Subtle drop shadow | Faint shadow visible only when a card sits over imagery | Used sparingly on the buy-crypto-amount-card on transactional pages |\n| Focus ring | \\`0 0 0 2px {colors.info-ring}\\` at 50% alpha | Input + button keyboard focus state |\n\nThe elevation philosophy is **flat surfaces with color-block separation**. Binance does not use heavy drop shadows or glassmorphism — depth comes from the contrast between \\`{colors.canvas-dark}\\` and \\`{colors.surface-card-dark}\\` (a 12-step lightness jump that reads as a clear elevation boundary).\n\n### Decorative Depth\n- **Yellow → dark vertical gradient backdrop** on the Futures Arena hero: \\`{colors.primary}\\` fading down to \\`{colors.canvas-dark}\\`. This is a single-page treatment used for product-launch / event hero surfaces, not a system-wide signature.\n- **Coin-stack illustrations** flanking large stat blocks (3D rendered crypto coins, trophy icons). These are illustrations, not tokens — treat as content rather than design system surface.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 2px | Almost no use — reserved for very small badges |\n| \\`{rounded.sm}\\` | 4px | Small inline buttons (subscribe, trading-up / trading-down inline) |\n| \\`{rounded.md}\\` | 6px | Standard CTA buttons, primary buttons, primary input fields |\n| \\`{rounded.lg}\\` | 8px | Search input, content cards, trust badges, sub-cards |\n| \\`{rounded.xl}\\` | 12px | Elevated card containers (markets-table-card, QR-promo-card, CTA bands) |\n| \\`{rounded.pill}\\` | 9999px | Prominent feature CTAs (\"Sign Up\" pill on dark, futures-arena \"Join Now\") |\n| \\`{rounded.full}\\` | 9999px / 50% | Coin icons, avatars |\n\nBinance's radius hierarchy is tighter than typical marketing systems — most surfaces sit at 6-12px. The pill radius is a deliberate exception used to signal \"this is a top-of-page action.\"\n\n### Photography & Iconography\n- Coin icons render as 24×24 or 32×32 rounded glyphs (often 50% radius on circular outline + the coin's brand color inside).\n- 3D rendered coin stacks and trophy illustrations are full-color illustrations with a slight floor shadow — not flat icons.\n- Photographic content (people-using-the-app section) crops to \\`{rounded.xl}\\` (12px) corners, full-bleed on mobile.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-dark\\`** — The marketing top nav on dark canvas. 64px tall, \\`{colors.canvas-dark}\\` background. Carries the yellow Binance wordmark at left, primary horizontal menu (Buy Crypto, Markets, Trade, Futures, Earn, Square, Smart Money, Campaigns), right-side cluster with language selector, light/dark toggle, \"Log In\" text link, \"Sign Up\" \\`{component.button-primary}\\`. The wordmark uses \\`{colors.primary}\\` for \"BINANCE\" type.\n\n**\\`top-nav-light\\`** — The transactional top nav on light canvas (buy crypto, deposit pages). Same layout but \\`{colors.canvas-light}\\` background and \\`{colors.ink}\\` menu items.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\` (black on yellow — the system's iconic combination), type \\`{typography.button}\\`, padding 12px × 24px, height 40px, rounded \\`{rounded.md}\\` (6px). Press state: \\`button-primary-active\\` darkens to \\`{colors.primary-active}\\` (#f0b90b). Disabled state: \\`button-primary-disabled\\` desaturates to \\`{colors.primary-disabled}\\`.\n\n**\\`button-primary-pill\\`** — A larger pill variant of the primary CTA used for top-of-page sign-up moments and product-launch heroes (Futures Arena \"Join Now\"). Same yellow + black combination, padding 14px × 32px, rounded \\`{rounded.pill}\\` (9999px). Use sparingly — the pill is a \"this is THE action\" signal.\n\n**\\`button-secondary-on-dark\\`** — Used over \\`{colors.canvas-dark}\\` for less-emphasized actions. Background \\`{colors.surface-card-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.md}\\`.\n\n**\\`button-secondary-on-light\\`** — Light-canvas equivalent. Background \\`{colors.canvas-light}\\` with \\`{colors.hairline-on-light}\\` 1px border, text \\`{colors.ink}\\`.\n\n**\\`button-tertiary-text\\`** — Inline text button with no background. Used for \"Log In\" in the top nav and inline \"Read More\" links.\n\n**\\`button-trading-up\\`** — A solid green button used on price-up signals (Buy / Long actions). Background \\`{colors.trading-up}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.sm}\\` (4px), padding 8px × 20px. Smaller and tighter than \\`{component.button-primary}\\` because it appears in dense trading interfaces.\n\n**\\`button-trading-down\\`** — Symmetric red variant for Sell / Short actions. Same shape, background \\`{colors.trading-down}\\`.\n\n**\\`button-subscribe\\`** — Compact yellow CTA used in the Smart Money traders table to subscribe to a top trader. Smaller height (28px) and tighter padding than the primary CTA — fits inside dense table rows. Same yellow + black combination.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.primary}\\` (yellow on dark, also yellow on light). No underline by default. Type inherits \\`{typography.body-md}\\`.\n\n### Cards & Containers\n\n**\\`hero-band-dark\\`** — Full-width dark band carrying the homepage h1 + sub-headline + dual CTA pair. Background \\`{colors.canvas-dark}\\`, padding \\`{spacing.section}\\` (80px). The h1 (\"316,258,026 USERS TRUST US\") uses \\`{typography.hero-display}\\` at 64px / 700 — the system's largest type role.\n\n**\\`stat-callout-card\\`** — Inline yellow stat numbers (15,000 BTC, 7,488,223, $429,423,449). Transparent background, text \\`{colors.primary}\\`, type \\`{typography.number-display}\\` in BinancePlex. Used as a flat layout block, not a card with surface — the yellow text alone carries the visual weight.\n\n**\\`trust-badge\\`** — Small dark cards holding \"No.1 Customer Service\" / \"No.1 Trading Volume\" claims. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.lg}\\` (8px), padding 16px × 20px. Yellow numeric or word badge (\"No.1\") sits next to a short label.\n\n**\\`markets-table-card\\`** — The right-side markets table on the homepage. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\` (12px), padding \\`{spacing.lg}\\` (24px). Carries a tab row (Popular / New listing / Top gainers), then a 5-column row of coin pairs with last price, 24h change %, action button. Each row uses \\`{component.markets-row}\\`.\n\n**\\`markets-row\\`** — A single row inside the markets table. Transparent background, 12px vertical padding, hairline divider between rows. Coin icon (32×32) + symbol on left; last price in \\`{typography.number-md}\\` (BinancePlex); 24h change cell colored by direction (\\`{component.price-up-cell}\\` or \\`{component.price-down-cell}\\`); right-aligned chevron icon for \"view detail.\"\n\n**\\`price-up-cell\\`** / **\\`price-down-cell\\`** — Colored text cells for price changes. Transparent background, text \\`{colors.trading-up}\\` or \\`{colors.trading-down}\\`, type \\`{typography.number-md}\\` in BinancePlex. Always paired with a small triangle arrow indicating direction.\n\n**\\`feature-photo-card\\`** — The \"Trade on the go\" section's photo strip — 3 lifestyle photos showing people using the Binance app. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\`. Photos crop edge-to-edge, no internal padding around the image.\n\n**\\`qr-promo-card\\`** — The \"Trade on the go. Anywhere, anytime.\" card with QR code. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\`, padding \\`{spacing.xl}\\` (32px). Contains an h2 in \\`{typography.title-md}\\`, a body paragraph, app store badges (iOS / Android), and a centered QR code.\n\n**\\`funds-safu-band\\`** — The yellow-headlined \"FUNDS ARE SAFU\" band. Background stays \\`{colors.canvas-dark}\\`, but the headline uses \\`{colors.primary}\\` at \\`{typography.display-lg}\\`. Below the headline, three large \\`{component.stat-callout-card}\\` numbers anchor the band: total BTC reserves, users helped, funds recovered.\n\n**\\`faq-row\\`** — A single FAQ accordion row. Transparent background, padding 20px vertical, hairline divider between rows. Closed state: question in \\`{typography.title-sm}\\` + chevron icon at right. Open state: question + answer body in \\`{typography.body-md}\\`.\n\n**\\`cta-band-dark\\`** — The \"Secure, Low-Fee Trading on Binance\" pre-footer CTA band. Background \\`{colors.surface-card-dark}\\` (one step elevated from canvas), rounded \\`{rounded.xl}\\`, padding \\`{spacing.xxl}\\` (48px). Carries an h2 in \\`{typography.display-sm}\\` and a \\`{component.button-primary}\\` aligned right.\n\n### Light-Mode Transactional Components\n\n**\\`buy-crypto-amount-card\\`** — The right-rail card on the Buy BTC page. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\` (8px), padding \\`{spacing.lg}\\` (24px). Carries an editable amount input in \\`{typography.number-display}\\` (BinancePlex), a currency selector, and a yellow \\`{component.button-primary}\\` for \"Continue\" / \"Confirm Order.\"\n\n**\\`steps-card\\`** — The \"How to Buy Crypto\" 3-up cards (Enter Amount → Confirm Order → Receive Crypto). Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\`. Each card has a small numbered icon, a \\`{typography.title-sm}\\` step name, and a body description.\n\n**\\`price-chart-card\\`** — The \"Bitcoin Markets\" card carrying the BTC price chart. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`. Top row carries pair selector ($79,065.04, +0.45%); main area is a candlestick / line chart in \\`{colors.trading-up}\\` and \\`{colors.trading-down}\\`; bottom row carries timeframe selector (24H / 1W / 1M / 3M / 1Y / ALL).\n\n**\\`conversion-cell\\`** — A single row in the BTC ↔ USD conversion table. Transparent background, text \\`{colors.body-on-light}\\`, type \\`{typography.body-md}\\`. Pair label on left (BTC, USDT, etc.); USD equivalent on right.\n\n### Inputs & Forms\n\n**\\`search-input-on-dark\\`** — The \"Search currencies\" input on the homepage hero. Background \\`{colors.surface-card-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\` (8px), padding 10px × 16px, height 40px. Carries a yellow \\`{component.button-primary-pill}\\` on the right side (\"Sign Up\").\n\n**\\`text-input-on-light\\`** — Standard input on transactional pages. Background \\`{colors.canvas-light}\\`, 1px \\`{colors.hairline-on-light}\\` border, rounded \\`{rounded.md}\\` (6px), padding 10px × 16px, height 40px. Focus state inherits the focus-ring shadow.\n\n**\\`cookie-consent-card\\`** — The cookie banner card visible on the homepage. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.md}\\` (16px). Body text in \\`{typography.body-sm}\\` (13px / 400) with three stacked button options (Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies).\n\n### Smart Money Sub-System\n\n**\\`trader-row\\`** — A single row in the top-traders table on /smart-money. Transparent background, padding 12px vertical, hairline divider between rows. Avatar + trader name + private/public badge on left; ROI %, AUM, mint date columns; yellow \\`{component.button-subscribe}\\` on right.\n\n### Signature Components\n\n**\\`arena-hero-gradient\\`** — The Futures Arena product-launch hero. A vertical gradient from \\`{colors.primary}\\` at top to \\`{colors.canvas-dark}\\` at bottom, with the prize-pool headline (4,000,000 USDT) in \\`{typography.display-lg}\\` centered. A \\`{component.button-primary-pill}\\` (\"Join Now\") sits below the headline. Used only on product-launch event surfaces — do not generalize to other heroes.\n\n### Footer\n\n**\\`footer-light\\`** — The light-gray footer that closes every page (including dark-canvas pages). Background \\`{colors.surface-soft-light}\\` (#fafafa), text \\`{colors.body-on-light}\\`. 6-column link list at desktop covering Community / About Us / Products / Business / Service / Learn columns. Vertical padding 64px. The deliberate light footer on a dark page is one of Binance's most distinctive layout choices — it visually closes the page with a \"marketing reset\" surface.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful.\n- Keep \\`{component.button-primary}\\` (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on \\`{colors.canvas-dark}\\` and \\`{colors.canvas-light}\\`.\n- Use \\`{component.button-trading-up}\\` (green) and \\`{component.button-trading-down}\\` (red) only for explicit Buy/Sell or Long/Short actions. Never use them for general \"confirm\" or \"cancel\" because they carry semantic price-direction meaning.\n- Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character.\n- Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission).\n- Anchor every editorial band with \\`{spacing.section}\\` (80px). Binance is denser than airy marketing sites — 80px is the right rhythm.\n\n### Don't\n- Don't introduce a second brand color. The system has exactly one accent (\\`{colors.primary}\\`) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token.\n- Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.\n- Don't use \\`{colors.trading-up}\\` / \\`{colors.trading-down}\\` as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface.\n- Don't soften display weight. \\`{typography.hero-display}\\` and \\`{typography.display-lg}\\` are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform.\n- Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel.\n- Don't invert \\`{component.button-primary}\\`'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Top nav collapses to hamburger; hero h1 drops from 64px to ~36px; markets table converts to a horizontally-scrollable card list; demo grids drop to 1-up; footer 6 columns wrap to 2 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens, secondary menu items hide behind a \"More\" dropdown; markets table 2-up; pricing/feature grids 2-up |\n| Desktop | 1024–1440px | Full top-nav with all primary menu items; 5-column markets table; trading dashboards in 8/4 split (chart + side rail) |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1280-1440px depending on surface |\n\n### Touch Targets\n- Primary CTAs render at minimum 40 × 40px (\\`{component.button-primary}\\` height + padding) — meets WCAG AAA's 44 × 44 with surrounding spacing.\n- Subscribe / inline action buttons are 28 × 28 — denser than ideal but matches industry trading platform norms.\n- Coin icons in markets tables are 32 × 32px, with the entire row tappable for 44px+ effective target.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.\n- Markets table reflows to a horizontally-scrollable single card per coin pair on mobile.\n- The hero stat numbers (\"316M USERS\") shrink proportionally rather than wrapping — Binance's biggest claim must always read as a single block.\n- Trading dashboards switch from chart + side-rail to chart-only with a separate \"Trade\" tab on mobile.\n- The light footer stays full-bleed at every breakpoint — it does not collapse to a separate dark variant.\n\n### Image Behavior\n- Coin icons stay at fixed 24/32px sizes regardless of breakpoint.\n- Lifestyle photos in the \"Trade on the go\" section crop responsively — wider at desktop, taller (vertical) at mobile.\n- 3D coin-stack illustrations are fixed-aspect-ratio assets that scale uniformly without cropping.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key directly (\\`{component.button-primary}\\`, \\`{component.markets-row}\\`).\n2. When adding a new component, decide first whether it lives in dark mode (marketing / product) or light mode (transactional). The same component appears in both with surface tone flipped.\n3. Variants of an existing component (\\`-active\\`, \\`-disabled\\`) live as separate entries in \\`components:\\` — never as nested state objects.\n4. Use \\`{token.refs}\\` everywhere prose mentions a color, a radius, a typography role, or a spacing value.\n5. Never document hover. The system documents Default and Active/Pressed states only.\n6. Numbers always use BinancePlex; copy always uses BinanceNova. Mixing them is a system violation.\n7. Trading green / red are semantic price tokens — never repurpose them for \"success\" or \"error\" generic states.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured \\`#eaecef\\` (light hairline, count 1022) as the highest-frequency token. The brand-defining \\`{colors.primary}\\` (#FCD535) appears far less frequently because it's used scarcely as accent — its system role had to be confirmed from screenshots.\n- BinanceNova and BinancePlex weight-axis values are not formalized as variable-font tokens — only the static weights observed in screenshots are documented.\n- Animation and transition timings (chart redraws, price-change flashes) are not in scope.\n- Form validation states beyond \\`{component.text-input-on-light}\\` defaults are not extracted — error / success input variants would need a sign-up or order-confirmation flow to confirm.\n- The trading dashboard surfaces (Spot / Futures / Margin) were not in the analyzed URL set; their order book, candlestick chart configuration, and position-management cards are not documented here.\n- The light/dark theme toggle behavior (whether transactional pages can be forced dark by user preference) is product behavior, not extracted from the marketing surfaces.\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/binance.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const binanceBrief = `---\nversion: alpha\nname: Binance\ndescription: A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow (#FCD535) carries every primary CTA, brand accent, and value-claim moment. Type runs Binance's custom BinanceNova / BinancePlex stack at modest weights — the system trusts size and yellow voltage over bold weight. Marketing and product surfaces default to the dark theme; transactional surfaces (buy crypto, deposit, exchange) flip to a light theme that shares the same yellow CTAs and gray-blue hairlines. Trading green (up) and red (down) accents thread through both modes for price-direction signals.\n\ncolors:\n  primary: \"#fcd535\"\n  primary-active: \"#f0b90b\"\n  primary-disabled: \"#3a3a1f\"\n  ink: \"#181a20\"\n  body: \"#eaecef\"\n  body-on-light: \"#181a20\"\n  muted: \"#707a8a\"\n  muted-strong: \"#929aa5\"\n  hairline-on-light: \"#eaecef\"\n  hairline-on-dark: \"#2b3139\"\n  border-strong: \"#cdd1d6\"\n  canvas-light: \"#ffffff\"\n  canvas-dark: \"#0b0e11\"\n  surface-card-dark: \"#1e2329\"\n  surface-elevated-dark: \"#2b3139\"\n  surface-soft-light: \"#fafafa\"\n  surface-strong-light: \"#f5f5f5\"\n  on-primary: \"#181a20\"\n  on-dark: \"#ffffff\"\n  trading-up: \"#0ecb81\"\n  trading-down: \"#f6465d\"\n  accent-turquoise: \"#2dbdb6\"\n  info: \"#3b82f6\"\n  info-ring: \"#3b82f6\"\n\ntypography:\n  hero-display:\n    fontFamily: \"BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-lg:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 48px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -0.5px\n  display-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 40px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -0.3px\n  display-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 32px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 24px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 20px\n    fontWeight: 600\n    lineHeight: 1.35\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  number-display:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: -0.3px\n  number-md:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  number-sm:\n    fontFamily: \"BinancePlex, BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 12px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  button:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 600\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"BinanceNova, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 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: 80px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.md}\"\n  button-primary-pill:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 14px 32px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n  button-secondary-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 24px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.button}\"\n  button-trading-up:\n    backgroundColor: \"{colors.trading-up}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 20px\n  button-trading-down:\n    backgroundColor: \"{colors.trading-down}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 8px 20px\n  button-subscribe:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.sm}\"\n    padding: 6px 16px\n    height: 28px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.body-md}\"\n  top-nav-dark:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band-dark:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.hero-display}\"\n    padding: 80px\n  stat-callout-card:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.number-display}\"\n  trust-badge:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px 20px\n  markets-table-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  markets-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.number-md}\"\n    padding: 12px 0\n  price-up-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.trading-up}\"\n    typography: \"{typography.number-md}\"\n  price-down-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.trading-down}\"\n    typography: \"{typography.number-md}\"\n  search-input-on-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 10px 16px\n    height: 40px\n  text-input-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 16px\n    height: 40px\n  funds-safu-band:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  feature-photo-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.xl}\"\n  qr-promo-card:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  faq-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.md}\"\n    padding: 20px 0\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-card-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.xl}\"\n    padding: 48px\n  arena-hero-gradient:\n    backgroundColor: \"{colors.canvas-dark}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 16px\n  buy-crypto-amount-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.number-display}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  steps-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  price-chart-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  conversion-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n  trader-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  footer-light:\n    backgroundColor: \"{colors.surface-soft-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    padding: 64px\n---\n\n## Overview\n\nBinance reads like a financial trading platform that wants to feel both authoritative and energetic. The base atmosphere is **deep near-black canvas** (\\`{colors.canvas-dark}\\` — #0b0e11) holding white type and a single, ubiquitous accent: **Binance Yellow** (\\`{colors.primary}\\` — #FCD535). That yellow does almost all of the brand's heavy lifting — it carries every primary CTA, every value-claim headline (\"FUNDS ARE SAFU\"), every \"Sign Up\" pill, every featured tier indicator, and the wordmark itself. There is no secondary brand color. The system trusts the yellow voltage to do the brand work, and it carries it.\n\nType runs Binance's custom **BinanceNova** (display + body) and **BinancePlex** (numerical / financial display) stack. BinanceNova carries display headlines, section titles, and body copy. BinancePlex appears on price tickers, large stat numbers (transaction volumes, user counts, prize pools) — anywhere a number wants to feel \"tabular and reliable.\" Both run at modest weights — display sizes use weight 600-700 (bolder than typical marketing because trading platforms need numbers to read at a glance), body stays at 400.\n\nThe product is **multi-theme**: marketing surfaces (homepage, smart-money, futures arena) default to dark, while transactional surfaces (buy crypto, deposit, withdraw) flip to a light theme. The same yellow CTAs and gray-blue hairlines (\\`{colors.hairline-on-light}\\` — #eaecef) thread through both — only canvas, surface, and text tones flip. Trading **green** (\\`{colors.trading-up}\\` — #0ecb81) and **red** (\\`{colors.trading-down}\\` — #f6465d) signal price direction in tables, charts, and price tickers across both modes.\n\n**Key Characteristics:**\n- Single accent color: \\`{colors.primary}\\` (#FCD535) does all brand voltage — primary CTAs, hero headlines, brand mark, badges. Used scarcely on dark for emphasis, ubiquitously on transactional dialogs.\n- Custom type stack: \\`BinanceNova\\` (display + body) and \\`BinancePlex\\` (numbers, prices, financial data). Big stat numbers always render in BinancePlex for tabular consistency.\n- Multi-theme: marketing pages default dark (\\`{colors.canvas-dark}\\`); transactional pages flip light (\\`{colors.canvas-light}\\`). Yellow CTAs and trading green/red are shared across both.\n- Light footer on dark body: the homepage uses \\`{colors.surface-soft-light}\\` (#fafafa) for the footer even when the body above it is dark — a deliberate inversion that visually closes the page.\n- Trading semantics: green up / red down (\\`{colors.trading-up}\\` / \\`{colors.trading-down}\\`) for price changes, applied as text color rather than badge background.\n- Card surfaces: \\`{colors.surface-card-dark}\\` (#1e2329) for elevated cards on dark; \\`{colors.canvas-light}\\` for cards on light. No gradient surfaces, no atmospheric backdrops — flat color blocks throughout.\n- Border radius is small to medium: \\`{rounded.md}\\` (6px) for primary buttons, \\`{rounded.lg}\\` (8px) for inputs and content cards, \\`{rounded.xl}\\` (12px) for elevated card containers, \\`{rounded.pill}\\` for prominent feature CTAs.\n- Spacing follows a 4-multiple scale; major editorial bands sit at \\`{spacing.section}\\` (80px) — slightly tighter than typical marketing-only sites because product pages need denser layouts.\n\n## Colors\n\n### Brand & Accent\n- **Binance Yellow** (\\`{colors.primary}\\` — #FCD535): The single brand color. Used for primary CTA backgrounds, the wordmark, brand-claim headlines (\"FUNDS ARE SAFU\"), trust badges (\"No.1 Trading Volume\"), large stat numbers in \\`{component.stat-callout-card}\\`, and inline links.\n- **Binance Yellow Active** (\\`{colors.primary-active}\\` — #f0b90b): The press / hover-darker variant. Slightly more saturated yellow.\n- **Binance Yellow Disabled** (\\`{colors.primary-disabled}\\` — #3a3a1f): A desaturated dark-yellow used on disabled CTAs over dark canvas.\n- **Accent Turquoise** (\\`{colors.accent-turquoise}\\` — #2dbdb6): A small secondary accent used very sparingly on Smart Money's \"Check Now\" CTA over dark surfaces. Treat as a single-product accent, not a system color.\n\n### Surface\n\nThe system has two canvas modes that map to product context:\n\n**Dark mode (marketing default):**\n- **Canvas Dark** (\\`{colors.canvas-dark}\\` — #0b0e11): The primary page floor. Near-black with a slight warm tint — never pure black.\n- **Surface Card Dark** (\\`{colors.surface-card-dark}\\` — #1e2329): Cards, navigation dropdowns, secondary buttons over dark canvas, markets table.\n- **Surface Elevated Dark** (\\`{colors.surface-elevated-dark}\\` — #2b3139): One step lighter, used for nested cards, hovered nav items, and chart background panels.\n\n**Light mode (transactional):**\n- **Canvas Light** (\\`{colors.canvas-light}\\` — #ffffff): The page floor on transactional pages (buy crypto, deposit forms, account dialogs).\n- **Surface Soft Light** (\\`{colors.surface-soft-light}\\` — #fafafa): Footer surface and disabled states.\n- **Surface Strong Light** (\\`{colors.surface-strong-light}\\` — #f5f5f5): Form input backgrounds in muted contexts.\n\n### Hairlines & Borders\n- **Hairline on Light** (\\`{colors.hairline-on-light}\\` — #eaecef): The 1px border tone on light surfaces. Dembrandt's frequency analysis confirms this as the highest-count token (1022 occurrences) — Binance uses hairlines liberally.\n- **Hairline on Dark** (\\`{colors.hairline-on-dark}\\` — #2b3139): The 1px border tone on dark surfaces. Same hex as \\`{colors.surface-elevated-dark}\\` — borders feel like surface steps, not ink lines.\n- **Border Strong** (\\`{colors.border-strong}\\` — #cdd1d6): A heavier border tone used on disabled secondary buttons.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #181a20): The strongest text on light surfaces. Display headlines on transactional pages.\n- **Body on Dark** (\\`{colors.body}\\` — #eaecef): Default running-text on dark canvas — deliberately not pure white, slightly cooler.\n- **Body on Light** (\\`{colors.body-on-light}\\` — #181a20): Same as ink — light-mode body text reuses the ink token.\n- **Muted** (\\`{colors.muted}\\` — #707a8a): Footer links, breadcrumbs, captions, table column headers. Works on both light and dark canvas.\n- **Muted Strong** (\\`{colors.muted-strong}\\` — #929aa5): A second-tier muted for emphasized labels.\n- **On Primary** (\\`{colors.on-primary}\\` — #181a20): Black text on yellow primary CTAs.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): Pure white for high-contrast headlines on dark canvas.\n\n### Trading Semantics\n- **Trading Up** (\\`{colors.trading-up}\\` — #0ecb81): Price-up green, used as text color in tables, charts, and inline ticker arrows. Never as a button background.\n- **Trading Down** (\\`{colors.trading-down}\\` — #f6465d): Price-down red. Same usage rules as trading-up.\n\n### Info / Focus\n- **Info** (\\`{colors.info}\\` — #3b82f6): Inline info badges and the focus-ring base. The Tailwind \\`--tw-ring-color\\` token surfaced by dembrandt — used on input focus.\n\n## Typography\n\n### Font Family\nThe system runs **BinanceNova** for display and body, and **BinancePlex** for numerical / financial data. Both are licensed Binance custom typefaces. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe split is functional, not decorative:\n- BinanceNova → editorial type (headlines, paragraphs, button labels, nav)\n- BinancePlex → tabular numerical type (prices, volumes, percentages, stat counters, prize pools)\n\nMixing them is not optional — BinanceNova on a price ticker would lose the trading-platform character; BinancePlex on a paragraph would feel monospace-cold.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.hero-display}\\` | 64px | 700 | 1.1 | -1px | Homepage h1 (\"316,258,026 USERS TRUST US\") |\n| \\`{typography.display-lg}\\` | 48px | 700 | 1.1 | -0.5px | Brand-claim headlines (\"FUNDS ARE SAFU\"), prize-pool hero (\"Futures Masters Arena\") |\n| \\`{typography.display-md}\\` | 40px | 600 | 1.15 | -0.3px | Section heads on long-scroll pages |\n| \\`{typography.display-sm}\\` | 32px | 600 | 1.2 | 0 | CTA band headlines (\"Secure, Low-Fee Trading on Binance\") |\n| \\`{typography.title-lg}\\` | 24px | 600 | 1.3 | 0 | Sub-section titles |\n| \\`{typography.title-md}\\` | 20px | 600 | 1.35 | 0 | QR-promo cards, feature card titles |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | Trust badges, FAQ rows, step labels |\n| \\`{typography.number-display}\\` | 40px | 700 | 1.1 | -0.3px | Big stat numbers (15,000 BTC, $429,423,449) — BinancePlex |\n| \\`{typography.number-md}\\` | 16px | 500 | 1.4 | 0 | Markets table prices, table cells — BinancePlex |\n| \\`{typography.number-sm}\\` | 14px | 500 | 1.4 | 0 | Inline prices, %  changes — BinancePlex |\n| \\`{typography.body-md}\\` | 14px | 400 | 1.5 | 0 | Default running-text — BinanceNova |\n| \\`{typography.body-sm}\\` | 13px | 400 | 1.5 | 0 | Cookie consent text, footer body |\n| \\`{typography.caption}\\` | 12px | 500 | 1.4 | 0 | Small meta labels |\n| \\`{typography.button}\\` | 14px | 600 | 1 | 0 | Standard CTA button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top nav menu items |\n\n### Principles\nDisplay sizes use weight 700 — heavier than most marketing systems. This makes sense for a trading platform: numbers need to read at a glance, headlines need to compete with chart visualizations and dense data tables. The system will not soften display weight to 400 the way Airtable or Stripe does.\n\n\\`{typography.number-display}\\` and the smaller number variants always use **BinancePlex**, even when surrounding body type uses BinanceNova. Prices, volumes, and stat counters render in BinancePlex regardless of context — it is the system's \"trustworthy number\" voice.\n\n### Note on Font Substitutes\nIf BinanceNova and BinancePlex are unavailable, **Inter** is the closest open-source substitute for BinanceNova and **JetBrains Mono** or **IBM Plex Sans** is the closest substitute for BinancePlex (depending on whether tabular monospace fidelity matters more than humanist proportions). Adjust display headlines down by ~3% in line-height to match BinanceNova's tighter cap height.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 80px.\n- **Section padding (vertical):** \\`{spacing.section}\\` (80px) — slightly tighter than airy marketing sites (96px) because Binance pages mix marketing bands with dense product surfaces (markets tables, FAQ accordions).\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for content cards and markets tables; \\`{spacing.xl}\\` (32px) for QR-promo cards and CTA bands; \\`{spacing.md}\\` (16px) for trust badges and table rows.\n- **Gutters:** \\`{spacing.lg}\\` (24px) between cards in 3-up grids; \\`{spacing.md}\\` (16px) inside footer column gutters and dense FAQ lists.\n\n### Grid & Container\n- **Max content width:** ~1280px centered on marketing pages; ~1440px on product surfaces (markets, smart-money tables) where horizontal density matters.\n- **Editorial body:** Single 12-column grid; product pages often use 8/4 split (main panel + side rail).\n- **Markets table:** 5-column header (Pair / Last Price / 24h Change / 24h Volume / Action), with the first column carrying coin icon + symbol pair.\n- **Footer:** 6-column link list at desktop, wrapping to 2-up at tablet and 1-up on mobile.\n\n### Whitespace Philosophy\nBinance is denser than typical marketing sites — long-scroll pages mix hero bands with markets tables, FAQ accordions, and feature grids without much breathing room between them. The system trusts contrast (yellow vs. dark canvas, green vs. red price cells) to do the visual separation work, not whitespace. Where whitespace appears, it's always uniform — \\`{spacing.section}\\` between every major band.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands, footer |\n| Soft hairline | 1px \\`{colors.hairline-on-dark}\\` or \\`{colors.hairline-on-light}\\` | Inputs, table dividers, FAQ row separators, secondary buttons |\n| Card surface | \\`{colors.surface-card-dark}\\` background on dark canvas, \\`{colors.canvas-light}\\` on light context — no shadow | All elevated cards (markets-table-card, QR-promo-card, feature-photo-card, trust-badges) |\n| Subtle drop shadow | Faint shadow visible only when a card sits over imagery | Used sparingly on the buy-crypto-amount-card on transactional pages |\n| Focus ring | \\`0 0 0 2px {colors.info-ring}\\` at 50% alpha | Input + button keyboard focus state |\n\nThe elevation philosophy is **flat surfaces with color-block separation**. Binance does not use heavy drop shadows or glassmorphism — depth comes from the contrast between \\`{colors.canvas-dark}\\` and \\`{colors.surface-card-dark}\\` (a 12-step lightness jump that reads as a clear elevation boundary).\n\n### Decorative Depth\n- **Yellow → dark vertical gradient backdrop** on the Futures Arena hero: \\`{colors.primary}\\` fading down to \\`{colors.canvas-dark}\\`. This is a single-page treatment used for product-launch / event hero surfaces, not a system-wide signature.\n- **Coin-stack illustrations** flanking large stat blocks (3D rendered crypto coins, trophy icons). These are illustrations, not tokens — treat as content rather than design system surface.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 2px | Almost no use — reserved for very small badges |\n| \\`{rounded.sm}\\` | 4px | Small inline buttons (subscribe, trading-up / trading-down inline) |\n| \\`{rounded.md}\\` | 6px | Standard CTA buttons, primary buttons, primary input fields |\n| \\`{rounded.lg}\\` | 8px | Search input, content cards, trust badges, sub-cards |\n| \\`{rounded.xl}\\` | 12px | Elevated card containers (markets-table-card, QR-promo-card, CTA bands) |\n| \\`{rounded.pill}\\` | 9999px | Prominent feature CTAs (\"Sign Up\" pill on dark, futures-arena \"Join Now\") |\n| \\`{rounded.full}\\` | 9999px / 50% | Coin icons, avatars |\n\nBinance's radius hierarchy is tighter than typical marketing systems — most surfaces sit at 6-12px. The pill radius is a deliberate exception used to signal \"this is a top-of-page action.\"\n\n### Photography & Iconography\n- Coin icons render as 24×24 or 32×32 rounded glyphs (often 50% radius on circular outline + the coin's brand color inside).\n- 3D rendered coin stacks and trophy illustrations are full-color illustrations with a slight floor shadow — not flat icons.\n- Photographic content (people-using-the-app section) crops to \\`{rounded.xl}\\` (12px) corners, full-bleed on mobile.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-dark\\`** — The marketing top nav on dark canvas. 64px tall, \\`{colors.canvas-dark}\\` background. Carries the yellow Binance wordmark at left, primary horizontal menu (Buy Crypto, Markets, Trade, Futures, Earn, Square, Smart Money, Campaigns), right-side cluster with language selector, light/dark toggle, \"Log In\" text link, \"Sign Up\" \\`{component.button-primary}\\`. The wordmark uses \\`{colors.primary}\\` for \"BINANCE\" type.\n\n**\\`top-nav-light\\`** — The transactional top nav on light canvas (buy crypto, deposit pages). Same layout but \\`{colors.canvas-light}\\` background and \\`{colors.ink}\\` menu items.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\` (black on yellow — the system's iconic combination), type \\`{typography.button}\\`, padding 12px × 24px, height 40px, rounded \\`{rounded.md}\\` (6px). Press state: \\`button-primary-active\\` darkens to \\`{colors.primary-active}\\` (#f0b90b). Disabled state: \\`button-primary-disabled\\` desaturates to \\`{colors.primary-disabled}\\`.\n\n**\\`button-primary-pill\\`** — A larger pill variant of the primary CTA used for top-of-page sign-up moments and product-launch heroes (Futures Arena \"Join Now\"). Same yellow + black combination, padding 14px × 32px, rounded \\`{rounded.pill}\\` (9999px). Use sparingly — the pill is a \"this is THE action\" signal.\n\n**\\`button-secondary-on-dark\\`** — Used over \\`{colors.canvas-dark}\\` for less-emphasized actions. Background \\`{colors.surface-card-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.md}\\`.\n\n**\\`button-secondary-on-light\\`** — Light-canvas equivalent. Background \\`{colors.canvas-light}\\` with \\`{colors.hairline-on-light}\\` 1px border, text \\`{colors.ink}\\`.\n\n**\\`button-tertiary-text\\`** — Inline text button with no background. Used for \"Log In\" in the top nav and inline \"Read More\" links.\n\n**\\`button-trading-up\\`** — A solid green button used on price-up signals (Buy / Long actions). Background \\`{colors.trading-up}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.sm}\\` (4px), padding 8px × 20px. Smaller and tighter than \\`{component.button-primary}\\` because it appears in dense trading interfaces.\n\n**\\`button-trading-down\\`** — Symmetric red variant for Sell / Short actions. Same shape, background \\`{colors.trading-down}\\`.\n\n**\\`button-subscribe\\`** — Compact yellow CTA used in the Smart Money traders table to subscribe to a top trader. Smaller height (28px) and tighter padding than the primary CTA — fits inside dense table rows. Same yellow + black combination.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.primary}\\` (yellow on dark, also yellow on light). No underline by default. Type inherits \\`{typography.body-md}\\`.\n\n### Cards & Containers\n\n**\\`hero-band-dark\\`** — Full-width dark band carrying the homepage h1 + sub-headline + dual CTA pair. Background \\`{colors.canvas-dark}\\`, padding \\`{spacing.section}\\` (80px). The h1 (\"316,258,026 USERS TRUST US\") uses \\`{typography.hero-display}\\` at 64px / 700 — the system's largest type role.\n\n**\\`stat-callout-card\\`** — Inline yellow stat numbers (15,000 BTC, 7,488,223, $429,423,449). Transparent background, text \\`{colors.primary}\\`, type \\`{typography.number-display}\\` in BinancePlex. Used as a flat layout block, not a card with surface — the yellow text alone carries the visual weight.\n\n**\\`trust-badge\\`** — Small dark cards holding \"No.1 Customer Service\" / \"No.1 Trading Volume\" claims. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.lg}\\` (8px), padding 16px × 20px. Yellow numeric or word badge (\"No.1\") sits next to a short label.\n\n**\\`markets-table-card\\`** — The right-side markets table on the homepage. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\` (12px), padding \\`{spacing.lg}\\` (24px). Carries a tab row (Popular / New listing / Top gainers), then a 5-column row of coin pairs with last price, 24h change %, action button. Each row uses \\`{component.markets-row}\\`.\n\n**\\`markets-row\\`** — A single row inside the markets table. Transparent background, 12px vertical padding, hairline divider between rows. Coin icon (32×32) + symbol on left; last price in \\`{typography.number-md}\\` (BinancePlex); 24h change cell colored by direction (\\`{component.price-up-cell}\\` or \\`{component.price-down-cell}\\`); right-aligned chevron icon for \"view detail.\"\n\n**\\`price-up-cell\\`** / **\\`price-down-cell\\`** — Colored text cells for price changes. Transparent background, text \\`{colors.trading-up}\\` or \\`{colors.trading-down}\\`, type \\`{typography.number-md}\\` in BinancePlex. Always paired with a small triangle arrow indicating direction.\n\n**\\`feature-photo-card\\`** — The \"Trade on the go\" section's photo strip — 3 lifestyle photos showing people using the Binance app. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\`. Photos crop edge-to-edge, no internal padding around the image.\n\n**\\`qr-promo-card\\`** — The \"Trade on the go. Anywhere, anytime.\" card with QR code. Background \\`{colors.surface-card-dark}\\`, rounded \\`{rounded.xl}\\`, padding \\`{spacing.xl}\\` (32px). Contains an h2 in \\`{typography.title-md}\\`, a body paragraph, app store badges (iOS / Android), and a centered QR code.\n\n**\\`funds-safu-band\\`** — The yellow-headlined \"FUNDS ARE SAFU\" band. Background stays \\`{colors.canvas-dark}\\`, but the headline uses \\`{colors.primary}\\` at \\`{typography.display-lg}\\`. Below the headline, three large \\`{component.stat-callout-card}\\` numbers anchor the band: total BTC reserves, users helped, funds recovered.\n\n**\\`faq-row\\`** — A single FAQ accordion row. Transparent background, padding 20px vertical, hairline divider between rows. Closed state: question in \\`{typography.title-sm}\\` + chevron icon at right. Open state: question + answer body in \\`{typography.body-md}\\`.\n\n**\\`cta-band-dark\\`** — The \"Secure, Low-Fee Trading on Binance\" pre-footer CTA band. Background \\`{colors.surface-card-dark}\\` (one step elevated from canvas), rounded \\`{rounded.xl}\\`, padding \\`{spacing.xxl}\\` (48px). Carries an h2 in \\`{typography.display-sm}\\` and a \\`{component.button-primary}\\` aligned right.\n\n### Light-Mode Transactional Components\n\n**\\`buy-crypto-amount-card\\`** — The right-rail card on the Buy BTC page. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\` (8px), padding \\`{spacing.lg}\\` (24px). Carries an editable amount input in \\`{typography.number-display}\\` (BinancePlex), a currency selector, and a yellow \\`{component.button-primary}\\` for \"Continue\" / \"Confirm Order.\"\n\n**\\`steps-card\\`** — The \"How to Buy Crypto\" 3-up cards (Enter Amount → Confirm Order → Receive Crypto). Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\`. Each card has a small numbered icon, a \\`{typography.title-sm}\\` step name, and a body description.\n\n**\\`price-chart-card\\`** — The \"Bitcoin Markets\" card carrying the BTC price chart. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`. Top row carries pair selector ($79,065.04, +0.45%); main area is a candlestick / line chart in \\`{colors.trading-up}\\` and \\`{colors.trading-down}\\`; bottom row carries timeframe selector (24H / 1W / 1M / 3M / 1Y / ALL).\n\n**\\`conversion-cell\\`** — A single row in the BTC ↔ USD conversion table. Transparent background, text \\`{colors.body-on-light}\\`, type \\`{typography.body-md}\\`. Pair label on left (BTC, USDT, etc.); USD equivalent on right.\n\n### Inputs & Forms\n\n**\\`search-input-on-dark\\`** — The \"Search currencies\" input on the homepage hero. Background \\`{colors.surface-card-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\` (8px), padding 10px × 16px, height 40px. Carries a yellow \\`{component.button-primary-pill}\\` on the right side (\"Sign Up\").\n\n**\\`text-input-on-light\\`** — Standard input on transactional pages. Background \\`{colors.canvas-light}\\`, 1px \\`{colors.hairline-on-light}\\` border, rounded \\`{rounded.md}\\` (6px), padding 10px × 16px, height 40px. Focus state inherits the focus-ring shadow.\n\n**\\`cookie-consent-card\\`** — The cookie banner card visible on the homepage. Background \\`{colors.canvas-light}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.md}\\` (16px). Body text in \\`{typography.body-sm}\\` (13px / 400) with three stacked button options (Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies).\n\n### Smart Money Sub-System\n\n**\\`trader-row\\`** — A single row in the top-traders table on /smart-money. Transparent background, padding 12px vertical, hairline divider between rows. Avatar + trader name + private/public badge on left; ROI %, AUM, mint date columns; yellow \\`{component.button-subscribe}\\` on right.\n\n### Signature Components\n\n**\\`arena-hero-gradient\\`** — The Futures Arena product-launch hero. A vertical gradient from \\`{colors.primary}\\` at top to \\`{colors.canvas-dark}\\` at bottom, with the prize-pool headline (4,000,000 USDT) in \\`{typography.display-lg}\\` centered. A \\`{component.button-primary-pill}\\` (\"Join Now\") sits below the headline. Used only on product-launch event surfaces — do not generalize to other heroes.\n\n### Footer\n\n**\\`footer-light\\`** — The light-gray footer that closes every page (including dark-canvas pages). Background \\`{colors.surface-soft-light}\\` (#fafafa), text \\`{colors.body-on-light}\\`. 6-column link list at desktop covering Community / About Us / Products / Business / Service / Learn columns. Vertical padding 64px. The deliberate light footer on a dark page is one of Binance's most distinctive layout choices — it visually closes the page with a \"marketing reset\" surface.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful.\n- Keep \\`{component.button-primary}\\` (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on \\`{colors.canvas-dark}\\` and \\`{colors.canvas-light}\\`.\n- Use \\`{component.button-trading-up}\\` (green) and \\`{component.button-trading-down}\\` (red) only for explicit Buy/Sell or Long/Short actions. Never use them for general \"confirm\" or \"cancel\" because they carry semantic price-direction meaning.\n- Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character.\n- Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission).\n- Anchor every editorial band with \\`{spacing.section}\\` (80px). Binance is denser than airy marketing sites — 80px is the right rhythm.\n\n### Don't\n- Don't introduce a second brand color. The system has exactly one accent (\\`{colors.primary}\\`) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token.\n- Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.\n- Don't use \\`{colors.trading-up}\\` / \\`{colors.trading-down}\\` as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface.\n- Don't soften display weight. \\`{typography.hero-display}\\` and \\`{typography.display-lg}\\` are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform.\n- Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel.\n- Don't invert \\`{component.button-primary}\\`'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Top nav collapses to hamburger; hero h1 drops from 64px to ~36px; markets table converts to a horizontally-scrollable card list; demo grids drop to 1-up; footer 6 columns wrap to 2 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens, secondary menu items hide behind a \"More\" dropdown; markets table 2-up; pricing/feature grids 2-up |\n| Desktop | 1024–1440px | Full top-nav with all primary menu items; 5-column markets table; trading dashboards in 8/4 split (chart + side rail) |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1280-1440px depending on surface |\n\n### Touch Targets\n- Primary CTAs render at minimum 40 × 40px (\\`{component.button-primary}\\` height + padding) — meets WCAG AAA's 44 × 44 with surrounding spacing.\n- Subscribe / inline action buttons are 28 × 28 — denser than ideal but matches industry trading platform norms.\n- Coin icons in markets tables are 32 × 32px, with the entire row tappable for 44px+ effective target.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.\n- Markets table reflows to a horizontally-scrollable single card per coin pair on mobile.\n- The hero stat numbers (\"316M USERS\") shrink proportionally rather than wrapping — Binance's biggest claim must always read as a single block.\n- Trading dashboards switch from chart + side-rail to chart-only with a separate \"Trade\" tab on mobile.\n- The light footer stays full-bleed at every breakpoint — it does not collapse to a separate dark variant.\n\n### Image Behavior\n- Coin icons stay at fixed 24/32px sizes regardless of breakpoint.\n- Lifestyle photos in the \"Trade on the go\" section crop responsively — wider at desktop, taller (vertical) at mobile.\n- 3D coin-stack illustrations are fixed-aspect-ratio assets that scale uniformly without cropping.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key directly (\\`{component.button-primary}\\`, \\`{component.markets-row}\\`).\n2. When adding a new component, decide first whether it lives in dark mode (marketing / product) or light mode (transactional). The same component appears in both with surface tone flipped.\n3. Variants of an existing component (\\`-active\\`, \\`-disabled\\`) live as separate entries in \\`components:\\` — never as nested state objects.\n4. Use \\`{token.refs}\\` everywhere prose mentions a color, a radius, a typography role, or a spacing value.\n5. Never document hover. The system documents Default and Active/Pressed states only.\n6. Numbers always use BinancePlex; copy always uses BinanceNova. Mixing them is a system violation.\n7. Trading green / red are semantic price tokens — never repurpose them for \"success\" or \"error\" generic states.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured \\`#eaecef\\` (light hairline, count 1022) as the highest-frequency token. The brand-defining \\`{colors.primary}\\` (#FCD535) appears far less frequently because it's used scarcely as accent — its system role had to be confirmed from screenshots.\n- BinanceNova and BinancePlex weight-axis values are not formalized as variable-font tokens — only the static weights observed in screenshots are documented.\n- Animation and transition timings (chart redraws, price-change flashes) are not in scope.\n- Form validation states beyond \\`{component.text-input-on-light}\\` defaults are not extracted — error / success input variants would need a sign-up or order-confirmation flow to confirm.\n- The trading dashboard surfaces (Spot / Futures / Margin) were not in the analyzed URL set; their order book, candlestick chart configuration, and position-management cards are not documented here.\n- The light/dark theme toggle behavior (whether transactional pages can be forced dark by user preference) is product behavior, not extracted from the marketing surfaces.\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/bmw-m.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/bmw-m.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const bmwMBrief = `---\nversion: alpha\nname: BMW M\ndescription: A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic.\n\ncolors:\n  primary: \"#ffffff\"\n  ink: \"#ffffff\"\n  body: \"#bbbbbb\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#7e7e7e\"\n  hairline: \"#3c3c3c\"\n  hairline-strong: \"#262626\"\n  canvas: \"#000000\"\n  surface-card: \"#1a1a1a\"\n  surface-elevated: \"#262626\"\n  surface-soft: \"#0d0d0d\"\n  on-primary: \"#000000\"\n  on-dark: \"#ffffff\"\n  m-blue-light: \"#0066b1\"\n  m-blue-dark: \"#1c69d4\"\n  m-red: \"#e22718\"\n  bmw-blue: \"#1c69d4\"\n  electric-blue: \"#0653b6\"\n  carbon-gray: \"#2b2b2b\"\n  warning: \"#f4b400\"\n  success: \"#0fa336\"\n\ntypography:\n  display-xl:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 80px\n    fontWeight: 700\n    lineHeight: 1\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 18px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  label-uppercase:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  body-md:\n    fontFamily: \"BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif\"\n    fontSize: 16px\n    fontWeight: 300\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"BMWTypeNextLatin Light, sans-serif\"\n    fontSize: 14px\n    fontWeight: 300\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n  button:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1\n    letterSpacing: 1.5px\n  nav-link:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 6px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 40px\n  xxl: 64px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n    height: 48px\n  button-primary-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n    height: 48px\n  button-on-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n  button-icon:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 48px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.label-uppercase}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  m-stripe-divider:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    height: 4px\n  feature-photo-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  model-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  magazine-article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.label-uppercase}\"\n    padding: 12px 0\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.label-uppercase}\"\n    padding: 12px 0\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 12px 16px\n    height: 48px\n  chatbot-launcher:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  cta-band-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  motorsport-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n  carousel-arrow:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 48px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBMW M's marketing surface is a near-pure black canvas (\\`{colors.canvas}\\` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (\\`{colors.hairline}\\`), all-caps button labels with no fill until hovered.\n\nThe **M tricolor stripe** — \\`{colors.m-blue-light}\\` (#0066b1) → \\`{colors.m-blue-dark}\\` (#1c69d4) → \\`{colors.m-red}\\` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.\n\nType voice runs **BMW Type Next Latin** in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.\n\n**Key Characteristics:**\n- Near-pure black canvas (\\`{colors.canvas}\\` — #000) with white type. The system inverts almost nothing — there is no light-mode marketing surface.\n- Display headlines in UPPERCASE BMW Type Next Latin at weight 700. Sub-heads stay sentence-case at lighter weight.\n- M tricolor (\\`{colors.m-blue-light}\\` / \\`{colors.m-blue-dark}\\` / \\`{colors.m-red}\\`) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.\n- Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.\n- Buttons are flat with \\`{rounded.none}\\` (0px) corners and uppercase letterspaced labels. The \"industrial precision\" rectangular silhouette IS the brand.\n- Border radius is mostly zero across the system. The few exceptions: \\`{rounded.full}\\` on circular icon buttons (carousel arrows, chatbot launcher) and \\`{rounded.sm}\\` on a handful of small toggle pills.\n- Spacing is generous and grid-aligned: \\`{spacing.section}\\` (96px) between major bands; \\`{spacing.xxl}\\` (64px) inside hero photo bands; \\`{spacing.xl}\\` (40px) inside content cards.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #ffffff): The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button).\n- **M Blue Light** (\\`{colors.m-blue-light}\\` — #0066b1): The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome.\n- **M Blue Dark** (\\`{colors.m-blue-dark}\\` — #1c69d4): The middle stop. The same hex as \\`{colors.bmw-blue}\\` — BMW's heritage corporate blue, repurposed as the middle band of the M stripe.\n- **M Red** (\\`{colors.m-red}\\` — #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.\n- **Electric Blue** (\\`{colors.electric-blue}\\` — #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #000000): The default page floor across every marketing surface. True black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips.\n- **Surface Card** (\\`{colors.surface-card}\\` — #1a1a1a): Cards, secondary buttons, icon-button backgrounds.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #262626): One step lighter, used for nested cards inside dark bands.\n- **Carbon Gray** (\\`{colors.carbon-gray}\\` — #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.\n\n### Hairlines & Borders\n- **Hairline** (\\`{colors.hairline}\\` — #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #262626): Same hex as \\`{colors.surface-elevated}\\` — borders feel like one-step elevations rather than ink lines.\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text on dark canvas.\n- **Body** (\\`{colors.body}\\` — #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (\\`{colors.muted}\\` — #7e7e7e): Footer links, breadcrumbs, captions.\n\n### Semantic\n- **Warning** (\\`{colors.warning}\\` — #f4b400): Used very sparingly on technical-warning callouts.\n- **Success** (\\`{colors.success}\\` — #0fa336): Order-confirmation states (rare on marketing surfaces).\n\n## Typography\n\n### Font Family\n**BMW Type Next Latin** is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe split is a deliberate weight-pair:\n- Display (700) for headlines, navigation labels, button text, and category labels — the \"stamped\" voice\n- Light (300) for body paragraphs, descriptive copy, and secondary metadata — the \"engineered\" voice\n\nThe contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 80px | 700 | 1.0 | 0 | Hero h1 (\"THE ULTIMATE\", \"MORE BMW M.\") |\n| \\`{typography.display-lg}\\` | 56px | 700 | 1.05 | 0 | Section heads (\"MORE FROM BMW M MAGAZINE.\") |\n| \\`{typography.display-md}\\` | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |\n| \\`{typography.display-sm}\\` | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |\n| \\`{typography.title-lg}\\` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |\n| \\`{typography.title-md}\\` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |\n| \\`{typography.title-sm}\\` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |\n| \\`{typography.label-uppercase}\\` | 14px | 700 | 1.3 | 1.5px | Category tabs, \"VIEW MORE\" inline labels |\n| \\`{typography.body-md}\\` | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |\n| \\`{typography.body-sm}\\` | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |\n| \\`{typography.nav-link}\\` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |\n\n### Principles\nThe system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel \"machined\" rather than \"typed.\" Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.\n\nUPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.\n\n### Note on Font Substitutes\nIf BMW Type Next Latin is unavailable, **Inter** (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. **Saira Condensed** is an alternative for headlines if a slightly more compressed feel is desired.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 40px · \\`{spacing.xxl}\\` 64px · \\`{spacing.section}\\` 96px.\n- **Section padding (vertical):** \\`{spacing.section}\\` (96px) between major editorial bands.\n- **Hero photo bands:** \\`{spacing.xxl}\\` (64px) internal vertical padding around the hero h1 + sub-headline pair.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for content and model cards; \\`{spacing.xl}\\` (40px) for spec-cell tables.\n- **Gutters:** \\`{spacing.lg}\\` (24px) between cards in 3-up grids; \\`{spacing.md}\\` (16px) inside footer columns.\n\n### Grid & Container\n- **Max content width:** ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.\n- **Editorial body:** Single 12-column grid; photo bands bleed full-bleed (no max-width).\n- **Card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Footer:** 4-column link list at desktop, 2-up at tablet, 1-up at mobile.\n\n### Whitespace Philosophy\nBMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform \\`{spacing.section}\\` (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Section dividers, card outlines, table rows |\n| Card surface | \\`{colors.surface-card}\\` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |\n\nThe system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated \\`{colors.surface-card}\\`.\n\n### Decorative Depth\n- **M Stripe Divider** (\\`{component.m-stripe-divider}\\`): A 4px-tall horizontal divider carrying the M tricolor (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true \"decorative\" element — used sparingly to mark significance.\n- **Carbon-fiber surfaces**: The technical-spec page uses \\`{colors.carbon-gray}\\` (#2b2b2b) cells with subtle texture overlay. This is a single-page treatment, not a system-wide pattern.\n- **Photographic depth**: Full-bleed cars are the depth. Lighting in the photography (track lights, sunset rim-light) does the elevation work that drop shadows would do in a SaaS system.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |\n| \\`{rounded.xs}\\` | 2px | Almost no use — reserved for legal CTAs |\n| \\`{rounded.sm}\\` | 4px | Small toggle pills on configurator surfaces |\n| \\`{rounded.md}\\` | 6px | Rare — small dropdown menu items |\n| \\`{rounded.full}\\` | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |\n\nThe radius hierarchy is \"almost always 0, sometimes circular.\" This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.\n\n### Photography Geometry\nHero photography fills full-width with no rounding. Photo cards inside grids retain \\`{rounded.none}\\` corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Black nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the BMW M logo at left (M tricolor + BMW roundel + \"M\" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in \\`{typography.nav-link}\\` with sentence-case labels.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.canvas}\\` (or transparent over photography), text \\`{colors.on-dark}\\` (white), 1px white border outline, rounded \\`{rounded.none}\\` (0px), padding 16px × 32px, height 48px. Type \\`{typography.button}\\` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.\n\n**\\`button-primary-outline\\`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.\n\n**\\`button-on-light\\`** — Used on rare light-surface contexts (configurator, account dialogs). Background \\`{colors.canvas}\\`, text \\`{colors.on-dark}\\` — black button with white text, inverted from the dark-canvas default.\n\n**\\`button-icon\\`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background \\`{colors.surface-card}\\`, white icon centered, rounded \\`{rounded.full}\\`. The only non-rectangular button shape in the system.\n\n**\\`carousel-arrow\\`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as \\`{component.button-icon}\\` with chevron glyph.\n\n**\\`text-link\\`** — Inline uppercase letterspaced links (\"VIEW ALL MODELS\", \"READ MORE\"). \\`{typography.label-uppercase}\\`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.\n\n### Cards & Containers\n\n**\\`hero-photo-band\\`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses \\`{typography.display-xl}\\` (80px / 700) and sits left-aligned over the photo, often with a small subtitle in \\`{typography.body-md}\\` below. Vertical padding \\`{spacing.xxl}\\` (64px). No card frame — the photo IS the band.\n\n**\\`feature-photo-card\\`** — Used in 3-up grids for \"MORE FROM BMW M MAGAZINE\" and similar editorial sections. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\`, internal padding \\`{spacing.lg}\\` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in \\`{typography.label-uppercase}\\`, a \\`{typography.title-lg}\\` title, and a short body description.\n\n**\\`model-card\\`** — Used in the \"MORE NEW M MODELS\" 3-up grid. Background \\`{colors.canvas}\\` (no card surface — just photo on black), rounded \\`{rounded.none}\\`. Top: 16:10 hero shot of the model. Below: model name in \\`{typography.display-md}\\` (40px / 700), short specs line in \\`{typography.body-sm}\\`, a \\`{component.text-link}\\` (\"EXPLORE THIS MODEL\").\n\n**\\`magazine-article-card\\`** — A more text-forward card variant used on the magazine overview page. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.none}\\`. Carries a small thumbnail at top, a category label in \\`{typography.label-uppercase}\\`, headline in \\`{typography.title-lg}\\`, and a body excerpt.\n\n**\\`spec-cell\\`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background \\`{colors.surface-soft}\\` (#0d0d0d), rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Each cell holds a value in \\`{typography.display-sm}\\` (32px / 700) at top and a label in \\`{typography.label-uppercase}\\` below.\n\n**\\`motorsport-photo-card\\`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.\n\n**\\`chatbot-launcher\\`** — A right-side card-style entry point (\"BMW M CHATBOT\") on the homepage. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Carries an h3 title, a short prompt, and a \\`{component.button-primary}\\` to launch.\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — The category selector tabs used on the magazine and topics pages (e.g., \"ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT\"). Tabs render as text-only labels in \\`{typography.label-uppercase}\\`. Active state changes text color from \\`{colors.body}\\` to \\`{colors.on-dark}\\` and adds a 2px white underline below the label. No background fill, no rounded corners.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input on dark surfaces. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.none}\\` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.\n\n**\\`cookie-consent-card\\`** — A right-side cookie-banner card visible on the homepage. Background \\`{colors.canvas}\\` with 1px hairline, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Body text in \\`{typography.body-sm}\\` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.\n\n### Signature Components\n\n**\\`m-stripe-divider\\`** — The 4px horizontal stripe carrying the M tricolor (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.\n\n**\\`cta-band-photo\\`** — A pre-footer \"Drive an M\" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in \\`{typography.display-md}\\` and a \\`{component.button-primary-outline}\\` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.\n\n### Footer\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in \\`{typography.caption}\\` and language selector. The footer never inverts — it stays black even when the body might transition.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.\n- Use UPPERCASE display headlines in \\`{typography.display-xl}\\` or \\`{typography.display-lg}\\`. Sentence-case display reads as off-brand.\n- Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.\n- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.\n- Use \\`{rounded.none}\\` (0px) by default. Reserve \\`{rounded.full}\\` for circular icon buttons only.\n- Letter-space all-caps labels at 1.5px. The \"machined\" feel is non-negotiable.\n- Use \\`{spacing.section}\\` (96px) between major editorial bands for grid-aligned vertical rhythm.\n\n### Don't\n- Don't introduce a brand color outside the M tricolor (\\`{colors.m-blue-light}\\` / \\`{colors.m-blue-dark}\\` / \\`{colors.m-red}\\`) and the heritage \\`{colors.bmw-blue}\\`.\n- Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.\n- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.\n- Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.\n- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.\n- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.\n- Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel \"machined.\"\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |\n| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` renders at 48 × 48px minimum — meets WCAG AAA.\n- \\`{component.button-icon}\\` and \\`{component.carousel-arrow}\\` are exactly 48 × 48 — comfortably above the 44 × 44 minimum.\n- \\`{component.text-input}\\` height is 48px.\n- Category tabs render as text-only labels with 12px vertical padding; effective tap area meets 44px with surrounding spacing.\n\n### Collapsing Strategy\n- Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.\n- Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.\n- Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.\n- Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at \\`{typography.display-sm}\\` regardless of column count.\n- The M-stripe divider stays at 4px height across all breakpoints.\n\n### Image Behavior\n- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.\n- Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.\n- The M wordmark + tricolor logo scales proportionally with viewport width.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.hero-photo-band}\\`, \\`{component.spec-cell}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Only use \\`{rounded.full}\\` if it's a circular icon button.\n3. Variants (\\`-active\\`, \\`-disabled\\`) live as separate entries in \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Never document hover states. Default and Active/Pressed only.\n6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.\n7. The M tricolor is brand-identity-only — never extend it to system tokens for \"primary action.\"\n8. When in doubt about emphasis: bigger photography before bigger type.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.\n- The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.\n- BMW Type Next Latin weight axis values beyond Light (300) and regular (700) are not documented — only the static weights observed in screenshots.\n- Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.\n- Form validation states beyond \\`{component.text-input}\\` defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.\n- The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.\n- The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/bmw-m.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const bmwMBrief = `---\nversion: alpha\nname: BMW M\ndescription: A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic.\n\ncolors:\n  primary: \"#ffffff\"\n  ink: \"#ffffff\"\n  body: \"#bbbbbb\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#7e7e7e\"\n  hairline: \"#3c3c3c\"\n  hairline-strong: \"#262626\"\n  canvas: \"#000000\"\n  surface-card: \"#1a1a1a\"\n  surface-elevated: \"#262626\"\n  surface-soft: \"#0d0d0d\"\n  on-primary: \"#000000\"\n  on-dark: \"#ffffff\"\n  m-blue-light: \"#0066b1\"\n  m-blue-dark: \"#1c69d4\"\n  m-red: \"#e22718\"\n  bmw-blue: \"#1c69d4\"\n  electric-blue: \"#0653b6\"\n  carbon-gray: \"#2b2b2b\"\n  warning: \"#f4b400\"\n  success: \"#0fa336\"\n\ntypography:\n  display-xl:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 80px\n    fontWeight: 700\n    lineHeight: 1\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 56px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 18px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  label-uppercase:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  body-md:\n    fontFamily: \"BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif\"\n    fontSize: 16px\n    fontWeight: 300\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"BMWTypeNextLatin Light, sans-serif\"\n    fontSize: 14px\n    fontWeight: 300\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n  button:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1\n    letterSpacing: 1.5px\n  nav-link:\n    fontFamily: \"BMWTypeNextLatin, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 6px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 40px\n  xxl: 64px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n    height: 48px\n  button-primary-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n    height: 48px\n  button-on-light:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 32px\n  button-icon:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 48px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.label-uppercase}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  m-stripe-divider:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    height: 4px\n  feature-photo-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  model-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  magazine-article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.label-uppercase}\"\n    padding: 12px 0\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.label-uppercase}\"\n    padding: 12px 0\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 12px 16px\n    height: 48px\n  chatbot-launcher:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  cta-band-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  motorsport-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n  carousel-arrow:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 48px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBMW M's marketing surface is a near-pure black canvas (\\`{colors.canvas}\\` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (\\`{colors.hairline}\\`), all-caps button labels with no fill until hovered.\n\nThe **M tricolor stripe** — \\`{colors.m-blue-light}\\` (#0066b1) → \\`{colors.m-blue-dark}\\` (#1c69d4) → \\`{colors.m-red}\\` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.\n\nType voice runs **BMW Type Next Latin** in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.\n\n**Key Characteristics:**\n- Near-pure black canvas (\\`{colors.canvas}\\` — #000) with white type. The system inverts almost nothing — there is no light-mode marketing surface.\n- Display headlines in UPPERCASE BMW Type Next Latin at weight 700. Sub-heads stay sentence-case at lighter weight.\n- M tricolor (\\`{colors.m-blue-light}\\` / \\`{colors.m-blue-dark}\\` / \\`{colors.m-red}\\`) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.\n- Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.\n- Buttons are flat with \\`{rounded.none}\\` (0px) corners and uppercase letterspaced labels. The \"industrial precision\" rectangular silhouette IS the brand.\n- Border radius is mostly zero across the system. The few exceptions: \\`{rounded.full}\\` on circular icon buttons (carousel arrows, chatbot launcher) and \\`{rounded.sm}\\` on a handful of small toggle pills.\n- Spacing is generous and grid-aligned: \\`{spacing.section}\\` (96px) between major bands; \\`{spacing.xxl}\\` (64px) inside hero photo bands; \\`{spacing.xl}\\` (40px) inside content cards.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #ffffff): The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button).\n- **M Blue Light** (\\`{colors.m-blue-light}\\` — #0066b1): The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome.\n- **M Blue Dark** (\\`{colors.m-blue-dark}\\` — #1c69d4): The middle stop. The same hex as \\`{colors.bmw-blue}\\` — BMW's heritage corporate blue, repurposed as the middle band of the M stripe.\n- **M Red** (\\`{colors.m-red}\\` — #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.\n- **Electric Blue** (\\`{colors.electric-blue}\\` — #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #000000): The default page floor across every marketing surface. True black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips.\n- **Surface Card** (\\`{colors.surface-card}\\` — #1a1a1a): Cards, secondary buttons, icon-button backgrounds.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #262626): One step lighter, used for nested cards inside dark bands.\n- **Carbon Gray** (\\`{colors.carbon-gray}\\` — #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.\n\n### Hairlines & Borders\n- **Hairline** (\\`{colors.hairline}\\` — #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #262626): Same hex as \\`{colors.surface-elevated}\\` — borders feel like one-step elevations rather than ink lines.\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text on dark canvas.\n- **Body** (\\`{colors.body}\\` — #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (\\`{colors.muted}\\` — #7e7e7e): Footer links, breadcrumbs, captions.\n\n### Semantic\n- **Warning** (\\`{colors.warning}\\` — #f4b400): Used very sparingly on technical-warning callouts.\n- **Success** (\\`{colors.success}\\` — #0fa336): Order-confirmation states (rare on marketing surfaces).\n\n## Typography\n\n### Font Family\n**BMW Type Next Latin** is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe split is a deliberate weight-pair:\n- Display (700) for headlines, navigation labels, button text, and category labels — the \"stamped\" voice\n- Light (300) for body paragraphs, descriptive copy, and secondary metadata — the \"engineered\" voice\n\nThe contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 80px | 700 | 1.0 | 0 | Hero h1 (\"THE ULTIMATE\", \"MORE BMW M.\") |\n| \\`{typography.display-lg}\\` | 56px | 700 | 1.05 | 0 | Section heads (\"MORE FROM BMW M MAGAZINE.\") |\n| \\`{typography.display-md}\\` | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |\n| \\`{typography.display-sm}\\` | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |\n| \\`{typography.title-lg}\\` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |\n| \\`{typography.title-md}\\` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |\n| \\`{typography.title-sm}\\` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |\n| \\`{typography.label-uppercase}\\` | 14px | 700 | 1.3 | 1.5px | Category tabs, \"VIEW MORE\" inline labels |\n| \\`{typography.body-md}\\` | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |\n| \\`{typography.body-sm}\\` | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |\n| \\`{typography.nav-link}\\` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |\n\n### Principles\nThe system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel \"machined\" rather than \"typed.\" Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.\n\nUPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.\n\n### Note on Font Substitutes\nIf BMW Type Next Latin is unavailable, **Inter** (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. **Saira Condensed** is an alternative for headlines if a slightly more compressed feel is desired.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 40px · \\`{spacing.xxl}\\` 64px · \\`{spacing.section}\\` 96px.\n- **Section padding (vertical):** \\`{spacing.section}\\` (96px) between major editorial bands.\n- **Hero photo bands:** \\`{spacing.xxl}\\` (64px) internal vertical padding around the hero h1 + sub-headline pair.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for content and model cards; \\`{spacing.xl}\\` (40px) for spec-cell tables.\n- **Gutters:** \\`{spacing.lg}\\` (24px) between cards in 3-up grids; \\`{spacing.md}\\` (16px) inside footer columns.\n\n### Grid & Container\n- **Max content width:** ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.\n- **Editorial body:** Single 12-column grid; photo bands bleed full-bleed (no max-width).\n- **Card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Footer:** 4-column link list at desktop, 2-up at tablet, 1-up at mobile.\n\n### Whitespace Philosophy\nBMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform \\`{spacing.section}\\` (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Section dividers, card outlines, table rows |\n| Card surface | \\`{colors.surface-card}\\` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |\n\nThe system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated \\`{colors.surface-card}\\`.\n\n### Decorative Depth\n- **M Stripe Divider** (\\`{component.m-stripe-divider}\\`): A 4px-tall horizontal divider carrying the M tricolor (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true \"decorative\" element — used sparingly to mark significance.\n- **Carbon-fiber surfaces**: The technical-spec page uses \\`{colors.carbon-gray}\\` (#2b2b2b) cells with subtle texture overlay. This is a single-page treatment, not a system-wide pattern.\n- **Photographic depth**: Full-bleed cars are the depth. Lighting in the photography (track lights, sunset rim-light) does the elevation work that drop shadows would do in a SaaS system.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |\n| \\`{rounded.xs}\\` | 2px | Almost no use — reserved for legal CTAs |\n| \\`{rounded.sm}\\` | 4px | Small toggle pills on configurator surfaces |\n| \\`{rounded.md}\\` | 6px | Rare — small dropdown menu items |\n| \\`{rounded.full}\\` | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |\n\nThe radius hierarchy is \"almost always 0, sometimes circular.\" This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.\n\n### Photography Geometry\nHero photography fills full-width with no rounding. Photo cards inside grids retain \\`{rounded.none}\\` corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Black nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the BMW M logo at left (M tricolor + BMW roundel + \"M\" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in \\`{typography.nav-link}\\` with sentence-case labels.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.canvas}\\` (or transparent over photography), text \\`{colors.on-dark}\\` (white), 1px white border outline, rounded \\`{rounded.none}\\` (0px), padding 16px × 32px, height 48px. Type \\`{typography.button}\\` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.\n\n**\\`button-primary-outline\\`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.\n\n**\\`button-on-light\\`** — Used on rare light-surface contexts (configurator, account dialogs). Background \\`{colors.canvas}\\`, text \\`{colors.on-dark}\\` — black button with white text, inverted from the dark-canvas default.\n\n**\\`button-icon\\`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background \\`{colors.surface-card}\\`, white icon centered, rounded \\`{rounded.full}\\`. The only non-rectangular button shape in the system.\n\n**\\`carousel-arrow\\`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as \\`{component.button-icon}\\` with chevron glyph.\n\n**\\`text-link\\`** — Inline uppercase letterspaced links (\"VIEW ALL MODELS\", \"READ MORE\"). \\`{typography.label-uppercase}\\`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.\n\n### Cards & Containers\n\n**\\`hero-photo-band\\`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses \\`{typography.display-xl}\\` (80px / 700) and sits left-aligned over the photo, often with a small subtitle in \\`{typography.body-md}\\` below. Vertical padding \\`{spacing.xxl}\\` (64px). No card frame — the photo IS the band.\n\n**\\`feature-photo-card\\`** — Used in 3-up grids for \"MORE FROM BMW M MAGAZINE\" and similar editorial sections. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\`, internal padding \\`{spacing.lg}\\` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in \\`{typography.label-uppercase}\\`, a \\`{typography.title-lg}\\` title, and a short body description.\n\n**\\`model-card\\`** — Used in the \"MORE NEW M MODELS\" 3-up grid. Background \\`{colors.canvas}\\` (no card surface — just photo on black), rounded \\`{rounded.none}\\`. Top: 16:10 hero shot of the model. Below: model name in \\`{typography.display-md}\\` (40px / 700), short specs line in \\`{typography.body-sm}\\`, a \\`{component.text-link}\\` (\"EXPLORE THIS MODEL\").\n\n**\\`magazine-article-card\\`** — A more text-forward card variant used on the magazine overview page. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.none}\\`. Carries a small thumbnail at top, a category label in \\`{typography.label-uppercase}\\`, headline in \\`{typography.title-lg}\\`, and a body excerpt.\n\n**\\`spec-cell\\`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background \\`{colors.surface-soft}\\` (#0d0d0d), rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Each cell holds a value in \\`{typography.display-sm}\\` (32px / 700) at top and a label in \\`{typography.label-uppercase}\\` below.\n\n**\\`motorsport-photo-card\\`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.\n\n**\\`chatbot-launcher\\`** — A right-side card-style entry point (\"BMW M CHATBOT\") on the homepage. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Carries an h3 title, a short prompt, and a \\`{component.button-primary}\\` to launch.\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — The category selector tabs used on the magazine and topics pages (e.g., \"ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT\"). Tabs render as text-only labels in \\`{typography.label-uppercase}\\`. Active state changes text color from \\`{colors.body}\\` to \\`{colors.on-dark}\\` and adds a 2px white underline below the label. No background fill, no rounded corners.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input on dark surfaces. Background \\`{colors.surface-card}\\`, text \\`{colors.on-dark}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.none}\\` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.\n\n**\\`cookie-consent-card\\`** — A right-side cookie-banner card visible on the homepage. Background \\`{colors.canvas}\\` with 1px hairline, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Body text in \\`{typography.body-sm}\\` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.\n\n### Signature Components\n\n**\\`m-stripe-divider\\`** — The 4px horizontal stripe carrying the M tricolor (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.\n\n**\\`cta-band-photo\\`** — A pre-footer \"Drive an M\" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in \\`{typography.display-md}\\` and a \\`{component.button-primary-outline}\\` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.\n\n### Footer\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in \\`{typography.caption}\\` and language selector. The footer never inverts — it stays black even when the body might transition.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.\n- Use UPPERCASE display headlines in \\`{typography.display-xl}\\` or \\`{typography.display-lg}\\`. Sentence-case display reads as off-brand.\n- Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.\n- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.\n- Use \\`{rounded.none}\\` (0px) by default. Reserve \\`{rounded.full}\\` for circular icon buttons only.\n- Letter-space all-caps labels at 1.5px. The \"machined\" feel is non-negotiable.\n- Use \\`{spacing.section}\\` (96px) between major editorial bands for grid-aligned vertical rhythm.\n\n### Don't\n- Don't introduce a brand color outside the M tricolor (\\`{colors.m-blue-light}\\` / \\`{colors.m-blue-dark}\\` / \\`{colors.m-red}\\`) and the heritage \\`{colors.bmw-blue}\\`.\n- Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.\n- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.\n- Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.\n- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.\n- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.\n- Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel \"machined.\"\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |\n| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` renders at 48 × 48px minimum — meets WCAG AAA.\n- \\`{component.button-icon}\\` and \\`{component.carousel-arrow}\\` are exactly 48 × 48 — comfortably above the 44 × 44 minimum.\n- \\`{component.text-input}\\` height is 48px.\n- Category tabs render as text-only labels with 12px vertical padding; effective tap area meets 44px with surrounding spacing.\n\n### Collapsing Strategy\n- Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.\n- Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.\n- Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.\n- Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at \\`{typography.display-sm}\\` regardless of column count.\n- The M-stripe divider stays at 4px height across all breakpoints.\n\n### Image Behavior\n- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.\n- Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.\n- The M wordmark + tricolor logo scales proportionally with viewport width.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.hero-photo-band}\\`, \\`{component.spec-cell}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Only use \\`{rounded.full}\\` if it's a circular icon button.\n3. Variants (\\`-active\\`, \\`-disabled\\`) live as separate entries in \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Never document hover states. Default and Active/Pressed only.\n6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.\n7. The M tricolor is brand-identity-only — never extend it to system tokens for \"primary action.\"\n8. When in doubt about emphasis: bigger photography before bigger type.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.\n- The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.\n- BMW Type Next Latin weight axis values beyond Light (300) and regular (700) are not documented — only the static weights observed in screenshots.\n- Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.\n- Form validation states beyond \\`{component.text-input}\\` defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.\n- The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.\n- The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/bmw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/bmw.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const bmwBrief = `---\nversion: alpha\nname: BMW\ndescription: BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a \"Learn More\" link.\n\ncolors:\n  primary: \"#1c69d4\"\n  primary-active: \"#0653b6\"\n  primary-disabled: \"#d6d6d6\"\n  ink: \"#262626\"\n  body: \"#3c3c3c\"\n  body-strong: \"#1a1a1a\"\n  muted: \"#6b6b6b\"\n  muted-soft: \"#9a9a9a\"\n  hairline: \"#e6e6e6\"\n  hairline-strong: \"#cccccc\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#fafafa\"\n  surface-strong: \"#ebebeb\"\n  surface-dark: \"#1a2129\"\n  surface-dark-elevated: \"#262e38\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#bbbbbb\"\n  m-blue-light: \"#0066b1\"\n  m-blue-dark: \"#1c69d4\"\n  m-red: \"#e22718\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#dc2626\"\n\ntypography:\n  display-xl:\n    fontFamily: \"'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 48px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\n    lineHeight: 1.25\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 20px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n  label-uppercase:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 13px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 0.5px\n  nav-link:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.3px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 8px\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: 80px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 32px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.none}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.none}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-secondary-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  hero-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 80px\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  model-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  model-card-photo:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.none}\"\n  feature-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  inventory-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n  filter-chip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.none}\"\n    padding: 8px 14px\n  filter-chip-active:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.none}\"\n  configurator-option-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 24px\n  configurator-option-tile-selected:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.none}\"\n    padding: 15px 23px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 16px\n    height: 48px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  m-stripe-divider:\n    backgroundColor: transparent\n    rounded: \"{rounded.none}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBMW's corporate site carries a far more **measured, corporate-automotive** interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: \\`{colors.canvas}\\` (#ffffff) is the base surface, \\`{colors.surface-card}\\` (#fafafa) carries the soft-grey card plates, and dark navy \\`{colors.surface-dark}\\` (#1a2129) appears only inside hero bands — one per page, framing the lead model render.\n\nType runs BMW's licensed **BMW Type Next Latin** at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's \"European-engineered\" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.\n\nThe brand action color, **BMW corporate blue** (\\`{colors.primary}\\` — #1c69d4), works alone across every primary CTA — buttons are **rectangular, 0px corner**, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.\n\nThe configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.\n\n**Key Characteristics:**\n- Light \\`{colors.canvas}\\` is the base surface; dark navy \\`{colors.surface-dark}\\` appears only inside hero bands — page rhythm relies on contrast.\n- BMW corporate blue (\\`{colors.primary}\\` — #1c69d4) acts as the single primary action color.\n- BMW Type Next Latin: weight 700 display against weight 300 body is the signature.\n- Buttons are **rectangular, 0px radius** — corporate dialect, distinct from M's sportier radii.\n- Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.\n- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.\n- M tricolor stripe appears only in M-model contexts — not part of the corporate language.\n- Section rhythm holds at \\`{spacing.section}\\` (80px) for every major band.\n\n## Colors\n\n### Brand & Accent\n- **BMW Blue (Primary)** (\\`{colors.primary}\\` — #1c69d4): The single brand action color. All primary CTAs, \"Learn More\" link prefixes (blue text), nav-link active state. Press shifts to \\`{colors.primary-active}\\` (#0653b6).\n- **M Blue Light** (\\`{colors.m-blue-light}\\` — #0066b1) + **M Blue Dark** (\\`{colors.m-blue-dark}\\` — #1c69d4) + **M Red** (\\`{colors.m-red}\\` — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the \"M\" badge. Never as CTA colors.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page surface.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): Soft grey for the footer and sub-navigation bands.\n- **Surface Card** (\\`{colors.surface-card}\\` — #fafafa): The light plate behind a model card's photo block.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #ebebeb): A slightly heavier grey used as a section divider.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #262e38): One step lighter, used for nested cards on top of the dark hero.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #262626): All display and primary text. Not pure black — soft against photography.\n- **Body** (\\`{colors.body}\\` — #3c3c3c): Default running text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #1a1a1a): Emphasized paragraphs and lead text.\n- **Muted** (\\`{colors.muted}\\` — #6b6b6b): Footer links, breadcrumbs, captions.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #9a9a9a): Disabled text, fine-print legal.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on a blue button.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on a dark hero band.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #bbbbbb): A slightly muted white for secondary text on dark bands.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #22c55e): Confirmation messages and \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **BMW Type Next Latin** in two cuts: regular (display + UI labels) and **BMW Type Next Latin Light** (body + secondary copy). Fallback stack: \\`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe display/body split is functional:\n- BMW Type Next Latin (700) → display headlines, button labels, nav links\n- BMW Type Next Latin Light (300) → paragraphs, descriptive copy\n- BMW Type Next Latin (400) → caption, neutral nav-link contexts\n\nThis three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 700 | 1.05 | 0 | Hero h1 (\"iX3\", model name) |\n| \\`{typography.display-lg}\\` | 48px | 700 | 1.1 | 0 | Section heads |\n| \\`{typography.display-md}\\` | 32px | 700 | 1.15 | 0 | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 700 | 1.25 | 0 | CTA-band headlines |\n| \\`{typography.title-lg}\\` | 20px | 700 | 1.3 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 700 | 1.4 | 0 | Inventory card title, list label |\n| \\`{typography.body-md}\\` | 16px | 300 (Light) | 1.55 | 0 | Default body — BMW Type Next Latin Light |\n| \\`{typography.body-sm}\\` | 14px | 300 (Light) | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |\n| \\`{typography.label-uppercase}\\` | 13px | 700 | 1.3 | 1.5px | \"LEARN MORE\" inline links, category tabs |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |\n| \\`{typography.nav-link}\\` | 14px | 400 | 1.4 | 0.3px | Top-nav menu items |\n\n### Principles\n- The **700/300 contrast** is the editorial signature. Weight 500 is absent from the system.\n- **No negative letter-spacing** — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.\n- **UPPERCASE inline links** — \"LEARN MORE\"-style CTAs run uppercase with 1.5px tracking. The \"machined precision\" voice.\n- **Weight 400 lives in a narrow lane** — only caption and nav-link, both neutral utility roles.\n\n### Note on Font Substitutes\nBMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:\n- **Inter** (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.\n- **Saira Condensed** — for a slightly more compressed BMW Type feel.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 8px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 80px.\n- **Section padding:** \\`{spacing.section}\\` (80px) for every major editorial band.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for model and feature cards.\n\n### Grid & Container\n- **Max content width:** ~1440px center-aligned.\n- **Editorial body:** A single 12-column grid.\n- **Model card grids:** 4-up or 5-up at desktop, 2-up at tablet, 1-up on mobile.\n- **Configurator inventory grids:** 3-up filter row + 4-up vehicle cards, dense layout.\n\n### Whitespace Philosophy\nBMW's whitespace strategy is tighter than BMW M's motorsport-aerated grenadier — the corporate side is more utility-driven. Section rhythm is 80px (not M's 96px). Card padding is 24px (not M's 32px). The page is denser, more dealership-functional.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Configurator option tile, table divider |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Model card photo plate |\n| Photographic | Edge-to-edge photography | Hero band, model renders |\n\nThe system never uses a drop shadow. Depth comes entirely from (a) color-block contrast (light canvas vs dark hero) and (b) photographic subject + lighting.\n\n### Decorative Depth\n- **\\`m-stripe-divider\\`** — a 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Not part of the main corporate flow.\n- **Photographic depth** — full-bleed vehicle photography (lighting + subject) does the work chrome would otherwise do.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Every button, card, input, configurator chip — the dominant radius |\n| \\`{rounded.xs}\\` | 2px | Very small badges, very rare |\n| \\`{rounded.sm}\\` | 4px | Small inline button (rare) |\n| \\`{rounded.md}\\` | 8px | Mobile-only collapse cards (rare) |\n| \\`{rounded.lg}\\` | 12px | Very rare — modal/dialog corners |\n| \\`{rounded.pill}\\` | 9999px | Filter chips in some contexts (rare) |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar, circular icon button |\n\nThe radius hierarchy is binary: **rectangular for everything, circular only for icon buttons.** A clear departure from the soft-cornered SaaS dialect of Apple or Cal.com — closer to BMW corporate-automotive's \"engineered precision\" voice.\n\n### Photography Geometry\n- Hero photography is full-bleed at 16:9 or 21:9 cinematic ratio.\n- Model card photos sit at 16:10, edge-to-edge with \\`{rounded.none}\\` corners.\n- Configurator vehicle renders sit on a white studio background, full silhouette visible.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — A white sticky nav bar pinned to the top of the page. 64px tall, \\`{colors.canvas}\\` background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in \\`{typography.nav-link}\\` (14px / 400 / 0.3px tracking).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\` (BMW Blue #1c69d4), text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded \\`{rounded.none}\\` (0px — rectangular). Press state: \\`button-primary-active\\` shifts to \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — A white button with a hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border, same padding + height + radius.\n\n**\\`button-secondary-on-dark\\`** — Used over a dark hero band. Background transparent, text \\`{colors.on-dark}\\`, 1px \\`{colors.on-dark}\\` border, same rectangular shape.\n\n**\\`button-text-link\\`** — An inline UPPERCASE letter-spaced link. No background, text \\`{colors.ink}\\`, type \\`{typography.label-uppercase}\\` (13px / 700 / 1.5px tracking). Reads as \"LEARN MORE\", terminated by a \\`›\\` chevron.\n\n**\\`text-link\\`** — An inline link inside body copy. \\`{colors.ink}\\` text, no underline by default; underlines per context.\n\n### Cards & Containers\n\n**\\`hero-band-dark\\`** — Full-width dark navy hero. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, vertical padding \\`{spacing.section}\\` (80px). Centered: model name in \\`{typography.display-xl}\\` (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single \\`{component.button-primary}\\` (blue) or \\`{component.button-secondary-on-dark}\\`.\n\n**\\`hero-photo-band\\`** — A light-canvas model showcase band. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.\n\n**\\`model-card\\`** — Used in 4-up or 5-up model card grids on the homepage (\"BMW iX3\", \"BMW iX\", \"BMW 5 Series\"). Background \\`{colors.canvas}\\`, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Contents: model render at the top (\\`{component.model-card-photo}\\` on \\`{colors.surface-card}\\`), model name in \\`{typography.title-md}\\` (18px / 700) below, a one-line tagline in \\`{typography.body-sm}\\` (14px / 300), and a \\`{component.button-text-link}\\` (\"LEARN MORE ›\").\n\n**\\`model-card-photo\\`** — The card's photo plate. Background \\`{colors.surface-card}\\` (#fafafa — soft grey), rounded \\`{rounded.none}\\`, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.\n\n**\\`feature-photo-card\\`** — A feature/lifestyle card. Background \\`{colors.canvas}\\`, padding \\`{spacing.lg}\\`. 16:9 photo at the top, \\`{typography.title-md}\\` headline + body excerpt below.\n\n**\\`spec-cell\\`** — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top (\\`{typography.display-sm}\\` 24px / 700), label below (\\`{typography.label-uppercase}\\`).\n\n### Inventory & Configurator\n\n**\\`inventory-card\\`** — One card per vehicle on the dealer inventory page. Background \\`{colors.canvas}\\`, padding \\`{spacing.md}\\` (16px), rounded \\`{rounded.none}\\`. Vehicle photo on top, model + variant name + price + \"View\" link below.\n\n**\\`filter-chip\\`** + **\\`filter-chip-active\\`** — Inventory filter chips (model, year, price range). Inactive: background \\`{colors.canvas}\\`, 1px \\`{colors.hairline-strong}\\` border, text \\`{colors.ink}\\`, type \\`{typography.caption}\\`. Active: background \\`{colors.ink}\\`, text \\`{colors.on-dark}\\`. Padding 8px × 14px, radius \\`{rounded.none}\\`.\n\n**\\`configurator-option-tile\\`** + **\\`configurator-option-tile-selected\\`** — Configurator selection cell (color, wheels, upholstery). Inactive: background \\`{colors.canvas}\\`, 1px hairline. Selected: 2px \\`{colors.primary}\\` border. Padding 16px × 24px, radius \\`{rounded.none}\\`.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.none}\\` (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.\n\n**\\`cookie-consent-card\\`** — Cookie banner. Background \\`{colors.canvas}\\`, 1px hairline, padding \\`{spacing.lg}\\` (24px), \\`{typography.body-sm}\\` (14px / 300 — Light even in legal copy).\n\n### Tabs / Tags\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Category sub-nav. Inactive: transparent + \\`{colors.muted}\\` UPPERCASE label. Active: transparent + \\`{colors.ink}\\` UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.\n\n### Brand Signature\n\n**\\`m-stripe-divider\\`** — A 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.\n\n### CTA / Footer\n\n**\\`cta-band-photo\\`** — A pre-footer \"Discover the New iX3\"-style band. Background \\`{colors.surface-dark}\\` with a full-bleed vehicle photo. Centered headline in \\`{typography.display-md}\\` (32px / 700) + a single \\`{component.button-secondary-on-dark}\\`. 80px padding.\n\n**\\`footer\\`** — The closing soft-grey footer. Background \\`{colors.surface-soft}\\` (#f7f7f7 — not pure white — soft grey), text \\`{colors.body}\\`. A 4-column link list: Models / Services / Dealers / About. Vertical padding 64px. Below, a copyright line in \\`{typography.body-sm}\\` with \\`{colors.muted}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Sit every page on \\`{colors.canvas}\\` (pure white); reserve \\`{colors.surface-dark}\\` for hero bands only.\n- Pair primary CTAs with \\`{colors.primary}\\` (BMW Blue) + \\`{colors.on-primary}\\` white text + \\`{rounded.none}\\` 0px corners — the corporate signature.\n- Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.\n- Use UPPERCASE letter-spaced links like \"LEARN MORE\" as inline CTAs.\n- Place the model card photo on \\`{colors.surface-card}\\` with the title beneath — the standard BMW corporate pattern.\n- Hold section rhythm at \\`{spacing.section}\\` (80px) — tighter than BMW M's 96px.\n- Reserve the M tricolor stripe for M-model contexts and motorsport dividers.\n\n### Don't\n- Don't add a brand color other than blue — BMW Blue is the only primary action color.\n- Don't use pill or rounded buttons — \\`{rounded.none}\\` (0px) rectangular IS the brand button.\n- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.\n- Don't bold body type — Light 300 is the BMW corporate editorial voice.\n- Don't add drop shadows to cards — depth comes from photo + color-block contrast.\n- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.\n- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.\n- Don't mix languages in a single page — UI language must stay consistent.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |\n| Tablet | 768–1024px | Top nav narrows, secondary menu hides under \"More\"; model card 2-up; inventory 2-up |\n| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |\n| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |\n\n### Touch Targets\n- \\`{component.button-primary}\\` minimum 48 × 48px — above WCAG AAA (44 × 44).\n- \\`{component.text-input}\\` height 48px.\n- Category tabs run with 12px vertical padding, giving an effective tap area > 44px.\n\n### Collapsing Strategy\n- The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.\n- The hero band's internal layout drops to a single column.\n- Model card grid 4-up/5-up → 2-up → 1-up.\n- The configurator filter chip row scrolls horizontally on mobile.\n- The M tricolor stripe stays at 4px height across every breakpoint.\n\n### Image Behavior\n- Model renders scale at every breakpoint while preserving native aspect ratios.\n- Hero photography may shift to a more vertical crop on mobile (art direction).\n- Inventory vehicle photos may move from 16:9 to 4:3 on mobile.\n\n## Iteration Guide\n\n1. Focus on a single component. Reference its YAML key directly (\\`{component.model-card}\\`, \\`{component.button-primary}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Use \\`{rounded.full}\\` only for circular icon buttons.\n3. Variants (\\`-active\\`, \\`-disabled\\`, \\`-selected\\`) live as separate entries inside the \\`components:\\` block.\n4. \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state is never documented. Only Default and Active/Pressed states.\n6. Display headlines stay BMW Type Next Latin 700; body stays Light 300; the trio is fixed.\n7. Keep UI strings in a single language — match the locale of the page.\n\n## Known Gaps\n\n- BMW Type Next Latin is licensed to BMW and not published as a public web font; Inter at weights 700/300 is documented as the substitute.\n- Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope here.\n- Form validation states beyond \\`{component.text-input}\\` focus were not extracted — error/success states would need a dedicated form page.\n- The dealer inventory sub-domain shares typography and color with the main corporate site; only UI density rises (filters, tables, prices).\n- A cookie consent overlay can occlude part of the hero — the lead hero band content may not be fully captured.\n- The M tricolor stripe appears infrequently on this corporate site; full motorsport context lives on the BMW M site.\n`;\n"],"mappings":";AACO,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/bmw.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const bmwBrief = `---\nversion: alpha\nname: BMW\ndescription: BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a \"Learn More\" link.\n\ncolors:\n  primary: \"#1c69d4\"\n  primary-active: \"#0653b6\"\n  primary-disabled: \"#d6d6d6\"\n  ink: \"#262626\"\n  body: \"#3c3c3c\"\n  body-strong: \"#1a1a1a\"\n  muted: \"#6b6b6b\"\n  muted-soft: \"#9a9a9a\"\n  hairline: \"#e6e6e6\"\n  hairline-strong: \"#cccccc\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f7f7f7\"\n  surface-card: \"#fafafa\"\n  surface-strong: \"#ebebeb\"\n  surface-dark: \"#1a2129\"\n  surface-dark-elevated: \"#262e38\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#bbbbbb\"\n  m-blue-light: \"#0066b1\"\n  m-blue-dark: \"#1c69d4\"\n  m-red: \"#e22718\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#dc2626\"\n\ntypography:\n  display-xl:\n    fontFamily: \"'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n    fontSize: 64px\n    fontWeight: 700\n    lineHeight: 1.05\n    letterSpacing: 0\n  display-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 48px\n    fontWeight: 700\n    lineHeight: 1.1\n    letterSpacing: 0\n  display-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 32px\n    fontWeight: 700\n    lineHeight: 1.15\n    letterSpacing: 0\n  display-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 24px\n    fontWeight: 700\n    lineHeight: 1.25\n    letterSpacing: 0\n  title-lg:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 20px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 700\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 16px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 300\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.5px\n  label-uppercase:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 13px\n    fontWeight: 700\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 0.5px\n  nav-link:\n    fontFamily: \"'BMW Type Next Latin', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0.3px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 8px\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: 80px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 32px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.none}\"\n  button-primary-disabled:\n    backgroundColor: \"{colors.primary-disabled}\"\n    textColor: \"{colors.muted}\"\n    rounded: \"{rounded.none}\"\n  button-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-secondary-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  hero-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 80px\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 80px\n  model-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  model-card-photo:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.none}\"\n  feature-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  inventory-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n  filter-chip:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.none}\"\n    padding: 8px 14px\n  filter-chip-active:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.none}\"\n  configurator-option-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px 24px\n  configurator-option-tile-selected:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.none}\"\n    padding: 15px 23px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 16px\n    height: 48px\n  cookie-consent-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  category-tab-active:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label-uppercase}\"\n    rounded: \"{rounded.none}\"\n  m-stripe-divider:\n    backgroundColor: transparent\n    rounded: \"{rounded.none}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBMW's corporate site carries a far more **measured, corporate-automotive** interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: \\`{colors.canvas}\\` (#ffffff) is the base surface, \\`{colors.surface-card}\\` (#fafafa) carries the soft-grey card plates, and dark navy \\`{colors.surface-dark}\\` (#1a2129) appears only inside hero bands — one per page, framing the lead model render.\n\nType runs BMW's licensed **BMW Type Next Latin** at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's \"European-engineered\" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.\n\nThe brand action color, **BMW corporate blue** (\\`{colors.primary}\\` — #1c69d4), works alone across every primary CTA — buttons are **rectangular, 0px corner**, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.\n\nThe configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.\n\n**Key Characteristics:**\n- Light \\`{colors.canvas}\\` is the base surface; dark navy \\`{colors.surface-dark}\\` appears only inside hero bands — page rhythm relies on contrast.\n- BMW corporate blue (\\`{colors.primary}\\` — #1c69d4) acts as the single primary action color.\n- BMW Type Next Latin: weight 700 display against weight 300 body is the signature.\n- Buttons are **rectangular, 0px radius** — corporate dialect, distinct from M's sportier radii.\n- Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.\n- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.\n- M tricolor stripe appears only in M-model contexts — not part of the corporate language.\n- Section rhythm holds at \\`{spacing.section}\\` (80px) for every major band.\n\n## Colors\n\n### Brand & Accent\n- **BMW Blue (Primary)** (\\`{colors.primary}\\` — #1c69d4): The single brand action color. All primary CTAs, \"Learn More\" link prefixes (blue text), nav-link active state. Press shifts to \\`{colors.primary-active}\\` (#0653b6).\n- **M Blue Light** (\\`{colors.m-blue-light}\\` — #0066b1) + **M Blue Dark** (\\`{colors.m-blue-dark}\\` — #1c69d4) + **M Red** (\\`{colors.m-red}\\` — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the \"M\" badge. Never as CTA colors.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page surface.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f7f7f7): Soft grey for the footer and sub-navigation bands.\n- **Surface Card** (\\`{colors.surface-card}\\` — #fafafa): The light plate behind a model card's photo block.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #ebebeb): A slightly heavier grey used as a section divider.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #262e38): One step lighter, used for nested cards on top of the dark hero.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #262626): All display and primary text. Not pure black — soft against photography.\n- **Body** (\\`{colors.body}\\` — #3c3c3c): Default running text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #1a1a1a): Emphasized paragraphs and lead text.\n- **Muted** (\\`{colors.muted}\\` — #6b6b6b): Footer links, breadcrumbs, captions.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #9a9a9a): Disabled text, fine-print legal.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on a blue button.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on a dark hero band.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #bbbbbb): A slightly muted white for secondary text on dark bands.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #22c55e): Confirmation messages and \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **BMW Type Next Latin** in two cuts: regular (display + UI labels) and **BMW Type Next Latin Light** (body + secondary copy). Fallback stack: \\`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\`.\n\nThe display/body split is functional:\n- BMW Type Next Latin (700) → display headlines, button labels, nav links\n- BMW Type Next Latin Light (300) → paragraphs, descriptive copy\n- BMW Type Next Latin (400) → caption, neutral nav-link contexts\n\nThis three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 700 | 1.05 | 0 | Hero h1 (\"iX3\", model name) |\n| \\`{typography.display-lg}\\` | 48px | 700 | 1.1 | 0 | Section heads |\n| \\`{typography.display-md}\\` | 32px | 700 | 1.15 | 0 | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 700 | 1.25 | 0 | CTA-band headlines |\n| \\`{typography.title-lg}\\` | 20px | 700 | 1.3 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 700 | 1.4 | 0 | Inventory card title, list label |\n| \\`{typography.body-md}\\` | 16px | 300 (Light) | 1.55 | 0 | Default body — BMW Type Next Latin Light |\n| \\`{typography.body-sm}\\` | 14px | 300 (Light) | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |\n| \\`{typography.label-uppercase}\\` | 13px | 700 | 1.3 | 1.5px | \"LEARN MORE\" inline links, category tabs |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |\n| \\`{typography.nav-link}\\` | 14px | 400 | 1.4 | 0.3px | Top-nav menu items |\n\n### Principles\n- The **700/300 contrast** is the editorial signature. Weight 500 is absent from the system.\n- **No negative letter-spacing** — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.\n- **UPPERCASE inline links** — \"LEARN MORE\"-style CTAs run uppercase with 1.5px tracking. The \"machined precision\" voice.\n- **Weight 400 lives in a narrow lane** — only caption and nav-link, both neutral utility roles.\n\n### Note on Font Substitutes\nBMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:\n- **Inter** (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.\n- **Saira Condensed** — for a slightly more compressed BMW Type feel.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 8px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.md}\\` 16px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 80px.\n- **Section padding:** \\`{spacing.section}\\` (80px) for every major editorial band.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for model and feature cards.\n\n### Grid & Container\n- **Max content width:** ~1440px center-aligned.\n- **Editorial body:** A single 12-column grid.\n- **Model card grids:** 4-up or 5-up at desktop, 2-up at tablet, 1-up on mobile.\n- **Configurator inventory grids:** 3-up filter row + 4-up vehicle cards, dense layout.\n\n### Whitespace Philosophy\nBMW's whitespace strategy is tighter than BMW M's motorsport-aerated grenadier — the corporate side is more utility-driven. Section rhythm is 80px (not M's 96px). Card padding is 24px (not M's 32px). The page is denser, more dealership-functional.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Configurator option tile, table divider |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Model card photo plate |\n| Photographic | Edge-to-edge photography | Hero band, model renders |\n\nThe system never uses a drop shadow. Depth comes entirely from (a) color-block contrast (light canvas vs dark hero) and (b) photographic subject + lighting.\n\n### Decorative Depth\n- **\\`m-stripe-divider\\`** — a 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Not part of the main corporate flow.\n- **Photographic depth** — full-bleed vehicle photography (lighting + subject) does the work chrome would otherwise do.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Every button, card, input, configurator chip — the dominant radius |\n| \\`{rounded.xs}\\` | 2px | Very small badges, very rare |\n| \\`{rounded.sm}\\` | 4px | Small inline button (rare) |\n| \\`{rounded.md}\\` | 8px | Mobile-only collapse cards (rare) |\n| \\`{rounded.lg}\\` | 12px | Very rare — modal/dialog corners |\n| \\`{rounded.pill}\\` | 9999px | Filter chips in some contexts (rare) |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar, circular icon button |\n\nThe radius hierarchy is binary: **rectangular for everything, circular only for icon buttons.** A clear departure from the soft-cornered SaaS dialect of Apple or Cal.com — closer to BMW corporate-automotive's \"engineered precision\" voice.\n\n### Photography Geometry\n- Hero photography is full-bleed at 16:9 or 21:9 cinematic ratio.\n- Model card photos sit at 16:10, edge-to-edge with \\`{rounded.none}\\` corners.\n- Configurator vehicle renders sit on a white studio background, full silhouette visible.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — A white sticky nav bar pinned to the top of the page. 64px tall, \\`{colors.canvas}\\` background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in \\`{typography.nav-link}\\` (14px / 400 / 0.3px tracking).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\` (BMW Blue #1c69d4), text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded \\`{rounded.none}\\` (0px — rectangular). Press state: \\`button-primary-active\\` shifts to \\`{colors.primary-active}\\`.\n\n**\\`button-secondary\\`** — A white button with a hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border, same padding + height + radius.\n\n**\\`button-secondary-on-dark\\`** — Used over a dark hero band. Background transparent, text \\`{colors.on-dark}\\`, 1px \\`{colors.on-dark}\\` border, same rectangular shape.\n\n**\\`button-text-link\\`** — An inline UPPERCASE letter-spaced link. No background, text \\`{colors.ink}\\`, type \\`{typography.label-uppercase}\\` (13px / 700 / 1.5px tracking). Reads as \"LEARN MORE\", terminated by a \\`›\\` chevron.\n\n**\\`text-link\\`** — An inline link inside body copy. \\`{colors.ink}\\` text, no underline by default; underlines per context.\n\n### Cards & Containers\n\n**\\`hero-band-dark\\`** — Full-width dark navy hero. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, vertical padding \\`{spacing.section}\\` (80px). Centered: model name in \\`{typography.display-xl}\\` (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single \\`{component.button-primary}\\` (blue) or \\`{component.button-secondary-on-dark}\\`.\n\n**\\`hero-photo-band\\`** — A light-canvas model showcase band. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.\n\n**\\`model-card\\`** — Used in 4-up or 5-up model card grids on the homepage (\"BMW iX3\", \"BMW iX\", \"BMW 5 Series\"). Background \\`{colors.canvas}\\`, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Contents: model render at the top (\\`{component.model-card-photo}\\` on \\`{colors.surface-card}\\`), model name in \\`{typography.title-md}\\` (18px / 700) below, a one-line tagline in \\`{typography.body-sm}\\` (14px / 300), and a \\`{component.button-text-link}\\` (\"LEARN MORE ›\").\n\n**\\`model-card-photo\\`** — The card's photo plate. Background \\`{colors.surface-card}\\` (#fafafa — soft grey), rounded \\`{rounded.none}\\`, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.\n\n**\\`feature-photo-card\\`** — A feature/lifestyle card. Background \\`{colors.canvas}\\`, padding \\`{spacing.lg}\\`. 16:9 photo at the top, \\`{typography.title-md}\\` headline + body excerpt below.\n\n**\\`spec-cell\\`** — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top (\\`{typography.display-sm}\\` 24px / 700), label below (\\`{typography.label-uppercase}\\`).\n\n### Inventory & Configurator\n\n**\\`inventory-card\\`** — One card per vehicle on the dealer inventory page. Background \\`{colors.canvas}\\`, padding \\`{spacing.md}\\` (16px), rounded \\`{rounded.none}\\`. Vehicle photo on top, model + variant name + price + \"View\" link below.\n\n**\\`filter-chip\\`** + **\\`filter-chip-active\\`** — Inventory filter chips (model, year, price range). Inactive: background \\`{colors.canvas}\\`, 1px \\`{colors.hairline-strong}\\` border, text \\`{colors.ink}\\`, type \\`{typography.caption}\\`. Active: background \\`{colors.ink}\\`, text \\`{colors.on-dark}\\`. Padding 8px × 14px, radius \\`{rounded.none}\\`.\n\n**\\`configurator-option-tile\\`** + **\\`configurator-option-tile-selected\\`** — Configurator selection cell (color, wheels, upholstery). Inactive: background \\`{colors.canvas}\\`, 1px hairline. Selected: 2px \\`{colors.primary}\\` border. Padding 16px × 24px, radius \\`{rounded.none}\\`.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.none}\\` (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.\n\n**\\`cookie-consent-card\\`** — Cookie banner. Background \\`{colors.canvas}\\`, 1px hairline, padding \\`{spacing.lg}\\` (24px), \\`{typography.body-sm}\\` (14px / 300 — Light even in legal copy).\n\n### Tabs / Tags\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Category sub-nav. Inactive: transparent + \\`{colors.muted}\\` UPPERCASE label. Active: transparent + \\`{colors.ink}\\` UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.\n\n### Brand Signature\n\n**\\`m-stripe-divider\\`** — A 4px-tall horizontal tricolor stripe (\\`{colors.m-blue-light}\\` → \\`{colors.m-blue-dark}\\` → \\`{colors.m-red}\\`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.\n\n### CTA / Footer\n\n**\\`cta-band-photo\\`** — A pre-footer \"Discover the New iX3\"-style band. Background \\`{colors.surface-dark}\\` with a full-bleed vehicle photo. Centered headline in \\`{typography.display-md}\\` (32px / 700) + a single \\`{component.button-secondary-on-dark}\\`. 80px padding.\n\n**\\`footer\\`** — The closing soft-grey footer. Background \\`{colors.surface-soft}\\` (#f7f7f7 — not pure white — soft grey), text \\`{colors.body}\\`. A 4-column link list: Models / Services / Dealers / About. Vertical padding 64px. Below, a copyright line in \\`{typography.body-sm}\\` with \\`{colors.muted}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Sit every page on \\`{colors.canvas}\\` (pure white); reserve \\`{colors.surface-dark}\\` for hero bands only.\n- Pair primary CTAs with \\`{colors.primary}\\` (BMW Blue) + \\`{colors.on-primary}\\` white text + \\`{rounded.none}\\` 0px corners — the corporate signature.\n- Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.\n- Use UPPERCASE letter-spaced links like \"LEARN MORE\" as inline CTAs.\n- Place the model card photo on \\`{colors.surface-card}\\` with the title beneath — the standard BMW corporate pattern.\n- Hold section rhythm at \\`{spacing.section}\\` (80px) — tighter than BMW M's 96px.\n- Reserve the M tricolor stripe for M-model contexts and motorsport dividers.\n\n### Don't\n- Don't add a brand color other than blue — BMW Blue is the only primary action color.\n- Don't use pill or rounded buttons — \\`{rounded.none}\\` (0px) rectangular IS the brand button.\n- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.\n- Don't bold body type — Light 300 is the BMW corporate editorial voice.\n- Don't add drop shadows to cards — depth comes from photo + color-block contrast.\n- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.\n- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.\n- Don't mix languages in a single page — UI language must stay consistent.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |\n| Tablet | 768–1024px | Top nav narrows, secondary menu hides under \"More\"; model card 2-up; inventory 2-up |\n| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |\n| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |\n\n### Touch Targets\n- \\`{component.button-primary}\\` minimum 48 × 48px — above WCAG AAA (44 × 44).\n- \\`{component.text-input}\\` height 48px.\n- Category tabs run with 12px vertical padding, giving an effective tap area > 44px.\n\n### Collapsing Strategy\n- The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.\n- The hero band's internal layout drops to a single column.\n- Model card grid 4-up/5-up → 2-up → 1-up.\n- The configurator filter chip row scrolls horizontally on mobile.\n- The M tricolor stripe stays at 4px height across every breakpoint.\n\n### Image Behavior\n- Model renders scale at every breakpoint while preserving native aspect ratios.\n- Hero photography may shift to a more vertical crop on mobile (art direction).\n- Inventory vehicle photos may move from 16:9 to 4:3 on mobile.\n\n## Iteration Guide\n\n1. Focus on a single component. Reference its YAML key directly (\\`{component.model-card}\\`, \\`{component.button-primary}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Use \\`{rounded.full}\\` only for circular icon buttons.\n3. Variants (\\`-active\\`, \\`-disabled\\`, \\`-selected\\`) live as separate entries inside the \\`components:\\` block.\n4. \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state is never documented. Only Default and Active/Pressed states.\n6. Display headlines stay BMW Type Next Latin 700; body stays Light 300; the trio is fixed.\n7. Keep UI strings in a single language — match the locale of the page.\n\n## Known Gaps\n\n- BMW Type Next Latin is licensed to BMW and not published as a public web font; Inter at weights 700/300 is documented as the substitute.\n- Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope here.\n- Form validation states beyond \\`{component.text-input}\\` focus were not extracted — error/success states would need a dedicated form page.\n- The dealer inventory sub-domain shares typography and color with the main corporate site; only UI density rises (filters, tables, prices).\n- A cookie consent overlay can occlude part of the hero — the lead hero band content may not be fully captured.\n- The M tricolor stripe appears infrequently on this corporate site; full motorsport context lives on the BMW M site.\n`;\n"],"mappings":";AACO,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}