@hex-core/themes 0.1.1 → 0.2.0

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

@@ -0,0 +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":[]}

package/dist/presets/_briefs/bmw-m.d.ts

@@ -0,0 +1,3 @@
+declare 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 \u2014 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 \u2192 dark blue \u2192 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}` \u2014 #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** \u2014 cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes \u2014 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** \u2014 `{colors.m-blue-light}` (#0066b1) \u2192 `{colors.m-blue-dark}` (#1c69d4) \u2192 `{colors.m-red}` (#e22718) \u2014 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 \u2014 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}` \u2014 #000) with white type. The system inverts almost nothing \u2014 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 \u2014 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}` \u2014 #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 \u2014 the white text + outline IS the button).\n- **M Blue Light** (`{colors.m-blue-light}` \u2014 #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}` \u2014 #1c69d4): The middle stop. The same hex as `{colors.bmw-blue}` \u2014 BMW's heritage corporate blue, repurposed as the middle band of the M stripe.\n- **M Red** (`{colors.m-red}` \u2014 #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.\n- **Electric Blue** (`{colors.electric-blue}` \u2014 #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue \u2014 feels colder, more digital.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #000000): The default page floor across every marketing surface. True black.\n- **Surface Soft** (`{colors.surface-soft}` \u2014 #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips.\n- **Surface Card** (`{colors.surface-card}` \u2014 #1a1a1a): Cards, secondary buttons, icon-button backgrounds.\n- **Surface Elevated** (`{colors.surface-elevated}` \u2014 #262626): One step lighter, used for nested cards inside dark bands.\n- **Carbon Gray** (`{colors.carbon-gray}` \u2014 #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.\n\n### Hairlines & Borders\n- **Hairline** (`{colors.hairline}` \u2014 #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #262626): Same hex as `{colors.surface-elevated}` \u2014 borders feel like one-step elevations rather than ink lines.\n\n### Text\n- **Ink / On Dark** (`{colors.on-dark}` \u2014 #ffffff): All headline and primary text on dark canvas.\n- **Body** (`{colors.body}` \u2014 #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.\n- **Body Strong** (`{colors.body-strong}` \u2014 #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (`{colors.muted}` \u2014 #7e7e7e): Footer links, breadcrumbs, captions.\n\n### Semantic\n- **Warning** (`{colors.warning}` \u2014 #f4b400): Used very sparingly on technical-warning callouts.\n- **Success** (`{colors.success}` \u2014 #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 \u2014 the \"stamped\" voice\n- Light (300) for body paragraphs, descriptive copy, and secondary metadata \u2014 the \"engineered\" voice\n\nThe contrast between heavy display and light body is BMW's editorial signature \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 BMW Type's natural cap-height handles spacing on large sizes.\n\nUPPERCASE display is the default voice for h1/h2 \u2014 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 \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.md}` 16px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 40px \u00B7 `{spacing.xxl}` 64px \u00B7 `{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 \u2014 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 \u2014 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 \u2014 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 \u2014 no shadow | Feature photo cards, magazine cards, chatbot launcher |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features \u2014 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}` \u2192 `{colors.m-blue-dark}` \u2192 `{colors.m-red}`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true \"decorative\" element \u2014 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 \u2014 the dominant radius |\n| `{rounded.xs}` | 2px | Almost no use \u2014 reserved for legal CTAs |\n| `{rounded.sm}` | 4px | Small toggle pills on configurator surfaces |\n| `{rounded.md}` | 6px | Rare \u2014 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 \u2014 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`** \u2014 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`** \u2014 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 \u00D7 32px, height 48px. Type `{typography.button}` \u2014 uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.\n\n**`button-primary-outline`** \u2014 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`** \u2014 Used on rare light-surface contexts (configurator, account dialogs). Background `{colors.canvas}`, text `{colors.on-dark}` \u2014 black button with white text, inverted from the dark-canvas default.\n\n**`button-icon`** \u2014 Circular icon buttons (carousel controls, share, favorite). 48 \u00D7 48px, background `{colors.surface-card}`, white icon centered, rounded `{rounded.full}`. The only non-rectangular button shape in the system.\n\n**`carousel-arrow`** \u2014 Specific 48 \u00D7 48 circular arrow used in photo carousels. Same shape as `{component.button-icon}` with chevron glyph.\n\n**`text-link`** \u2014 Inline uppercase letterspaced links (\"VIEW ALL MODELS\", \"READ MORE\"). `{typography.label-uppercase}`, white on dark, no underline. The chevron arrow \u2192 glyph appears next to most link labels.\n\n### Cards & Containers\n\n**`hero-photo-band`** \u2014 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 \u2014 the photo IS the band.\n\n**`feature-photo-card`** \u2014 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`** \u2014 Used in the \"MORE NEW M MODELS\" 3-up grid. Background `{colors.canvas}` (no card surface \u2014 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`** \u2014 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`** \u2014 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`** \u2014 Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface \u2014 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`** \u2014 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`** \u2014 The category selector tabs used on the magazine and topics pages (e.g., \"ALL \u00B7 MAGAZINE \u00B7 MODELS \u00B7 LIFESTYLE \u00B7 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`** \u2014 Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 12px \u00D7 16px, height 48px. 1px hairline border. Focus state thickens the border to white.\n\n**`cookie-consent-card`** \u2014 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) \u2014 Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.\n\n### Signature Components\n\n**`m-stripe-divider`** \u2014 The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` \u2192 `{colors.m-blue-dark}` \u2192 `{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`** \u2014 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`** \u2014 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 \u2014 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 \u2014 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) \u2014 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 \u2014 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 \u2192 spec table \u2192 photo band \u2192 magazine grid \u2192 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 \u2014 never an action surface.\n- Don't bold uppercase tracking under 1.5px on button labels \u2014 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\u219248px; demo grid 1-up; photo cards stack full-width; footer 4 cols \u2192 1 |\n| Tablet | 768\u20131024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |\n| Desktop | 1024\u20131440px | 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 \u00D7 48px minimum \u2014 meets WCAG AAA.\n- `{component.button-icon}` and `{component.carousel-arrow}` are exactly 48 \u00D7 48 \u2014 comfortably above the 44 \u00D7 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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";
+
+export { bmwMBrief };