@hex-core/themes 0.2.4 → 0.2.7

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/bugatti.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const bugattiBrief = `---\nversion: alpha\nname: Bugatti\ndescription: An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces — Bugatti Display, Bugatti Text Regular, and Bugatti Monospace — and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome — only photography, typography, and the brand wordmark.\n\ncolors:\n  primary: \"#ffffff\"\n  ink: \"#ffffff\"\n  body: \"#cccccc\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#999999\"\n  muted-soft: \"#666666\"\n  hairline: \"#262626\"\n  hairline-strong: \"#3a3a3a\"\n  canvas: \"#000000\"\n  surface-soft: \"#0d0d0d\"\n  surface-card: \"#141414\"\n  surface-elevated: \"#1f1f1f\"\n  on-primary: \"#000000\"\n  on-dark: \"#ffffff\"\n  on-photo: \"#ffffff\"\n  link: \"#c3d9f3\"\n  warning: \"#d4a017\"\n  success: \"#5fa657\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: 4px\n  display-lg:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: 3px\n  display-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: 2px\n  display-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  wordmark:\n    fontFamily: \"Bugatti Display, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 6px\n  title-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1px\n  title-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  caption-uppercase:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 11px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n  body-md:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 2.5px\n  nav-link:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n\nrounded:\n  none: 0px\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: 40px\n  xxl: 64px\n  section: 120px\n\ncomponents:\n  button-primary:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 14px 32px\n    height: 44px\n  button-icon:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 40px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.link}\"\n    typography: \"{typography.button}\"\n  top-nav:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 56px\n  wordmark-display:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.wordmark}\"\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  caption-overlay:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.caption-uppercase}\"\n  career-callout-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n    width: 320px\n  model-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.none}\"\n  newsroom-article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  career-listing-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  text-input:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 12px 0\n    height: 44px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  date-pill:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  category-tag:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (\\`{colors.canvas}\\` — #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome — only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.\n\nThe system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the \"BUGATTI\" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates — anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.\n\nDisplay sizes use weight 400 (regular) — never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the \"engineered precision\" feel that no other luxury maker matches.\n\n**Key Characteristics:**\n- Pure black canvas (\\`{colors.canvas}\\` — #000000) with white type. The system does not have a light mode.\n- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).\n- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.\n- No accent color. The only non-monochrome color anywhere on the site is \\`{colors.link}\\` (#c3d9f3) — a desaturated ice-blue used on inline anchor links, and even that appears rarely.\n- Buttons are pill-shaped (\\`{rounded.pill}\\`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.\n- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are \\`{colors.surface-card}\\` (#141414) at most — a barely-different-from-black tone.\n- Section rhythm is generous — \\`{spacing.section}\\` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #ffffff): The single brand color. White type and white CTA outlines on the black canvas.\n- **Link** (\\`{colors.link}\\` — #c3d9f3): The only non-monochrome color in the system — a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #000000): The default page floor across every surface. Pure black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.\n- **Surface Card** (\\`{colors.surface-card}\\` — #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black — no contrast jump.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #1f1f1f): One step further from black, used for nested cards on rare dense pages.\n- **Hairline** (\\`{colors.hairline}\\` — #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border — only an underline hairline).\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text on dark canvas.\n- **Body** (\\`{colors.body}\\` — #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (\\`{colors.muted}\\` — #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).\n\n### Semantic\n- **Warning** (\\`{colors.warning}\\` — #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.\n- **Success** (\\`{colors.success}\\` — #5fa657): Order confirmation states (rare on marketing pages).\n\n## Typography\n\n### Font Family\nThe system runs **three custom Bugatti typefaces** as a rigid trinity:\n1. **Bugatti Display** — All display headlines (h1, h2, h3), the \"BUGATTI\" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.\n2. **Bugatti Text Regular** — A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.\n3. **Bugatti Monospace** — Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.\n\nThe split is functional and absolute. Bugatti Display in a button breaks the \"machined precision\" voice; Bugatti Monospace in a paragraph breaks the \"engineered elegance\" voice; Bugatti Text in a button is unthinkable.\n\nThe fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for Bugatti Display, \\`Garamond, \"Times New Roman\", serif\\` for Bugatti Text Regular, and \\`ui-monospace, \"SF Mono\", \"Cascadia Mono\", monospace\\` for Bugatti Monospace.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.1 | 4px | Hero h1 (\"THE BUGATTI F.K.P. HOMMAGE\", \"TOURBILLON\") — Bugatti Display, uppercase, wide-tracked |\n| \\`{typography.display-lg}\\` | 48px | 400 | 1.15 | 3px | Section heads — Bugatti Display, uppercase |\n| \\`{typography.display-md}\\` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names — Bugatti Display |\n| \\`{typography.display-sm}\\` | 24px | 400 | 1.3 | 1.5px | Card titles — Bugatti Display |\n| \\`{typography.wordmark}\\` | 14px | 400 | 1.0 | 6px | The \"BUGATTI\" brand wordmark in the top nav — Bugatti Display, the widest tracking in the system |\n| \\`{typography.title-md}\\` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs — Bugatti Display |\n| \\`{typography.title-sm}\\` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |\n| \\`{typography.caption-uppercase}\\` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, \"EXPLORE OUR OPPORTUNITIES\" — Bugatti Monospace, uppercase |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body — Bugatti Text Regular (a serif face), sentence case, no tracking |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal — Bugatti Text Regular |\n| \\`{typography.button}\\` | 14px | 400 | 1.0 | 2.5px | All button labels — Bugatti Monospace, uppercase, 2.5px tracking |\n| \\`{typography.nav-link}\\` | 12px | 400 | 1.4 | 2px | Top-nav menu items (\"MENU\", \"STORE\") — Bugatti Monospace |\n\n### Principles\nThe system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:\n1. **Size** — 64px hero vs 16px body is a 4× hierarchy\n2. **Letter-spacing** — 6px wordmark vs 0px body\n3. **Case** — Uppercase display vs sentence-case body\n4. **Family contrast** — Display vs Text Regular vs Monospace\n\nGoing to weight 700 anywhere would break the \"modest engineering\" feel and make Bugatti read like a generic luxury template.\n\nThe serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose — which is the brand's editorial philosophy.\n\n### Note on Font Substitutes\nIf Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:\n- **Bugatti Display** → **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing\n- **Bugatti Text Regular** → **Cormorant Garamond** (regular) or **EB Garamond**\n- **Bugatti Monospace** → **JetBrains Mono** or **IBM Plex Mono** (regular weight)\n\nThe substitution preserves the three-family split, which is more important than exact typeface match.\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}\\` 120px.\n- **Section padding:** \\`{spacing.section}\\` (120px) — longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for newsroom and content cards; \\`{spacing.md}\\` (16px) for the career callout card; \\`{spacing.xxl}\\` (64px) inside hero photo bands.\n- **Gutters:** \\`{spacing.xl}\\` (40px) between cards in 2-up grids — wider than typical because Bugatti's grids are sparse.\n\n### Grid & Container\n- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.\n- **Editorial body:** Single 12-column grid; photo bands are full-bleed.\n- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.\n- **Career listings:** Single column with 80px row spacing.\n\n### Whitespace Philosophy\nBugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional — it lets the car breathe. Compressing the whitespace to \"fit more content\" breaks the brand's fundamental contract: that less is more.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, photo bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Section dividers, table rows |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Career callout, newsroom article container |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases — depth via subject + lens, not chrome |\n\nThe system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated \\`{colors.surface-card}\\`.\n\n### Decorative Depth\n- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | All cards, photo containers, inputs, spec cells — the dominant radius |\n| \\`{rounded.pill}\\` | 9999px | All buttons (the only rounded element in the system) |\n| \\`{rounded.full}\\` | 9999px / 50% | Circular icon buttons, avatar surfaces |\n\nThe radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between — those would feel \"designed\" rather than \"engineered.\"\n\n### Photography Geometry\nHero photography fills full-width with no rounding. Photo cards inside grids retain \\`{rounded.none}\\` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries \"MENU\" at left, the centered **wordmark-display** (\"BUGATTI\" in 14px Bugatti Display with 6px tracking), and \"STORE\" at right with a small bag icon. All labels in \\`{typography.nav-link}\\` (Bugatti Monospace, 12px, 2px tracking, uppercase).\n\n**\\`wordmark-display\\`** — The \"BUGATTI\" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background **transparent**, text \\`{colors.on-dark}\\` (white), 1px white outline, rounded \\`{rounded.pill}\\` (9999px), padding 14px × 32px, height 44px. Type \\`{typography.button}\\` — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.\n\n**\\`button-icon\\`** — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded \\`{rounded.full}\\`. Same outline-only treatment as the primary button.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.link}\\` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits \\`{typography.body-md}\\` (Bugatti Text Regular, serif).\n\n### Cards & Containers\n\n**\\`hero-photo-band\\`** — Full-width black band with full-bleed automotive photography. The h1 in \\`{typography.display-xl}\\` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (\\`{typography.caption-uppercase}\\`) below the headline and a single \\`{component.button-primary}\\` further down. Vertical padding 96px-200px depending on photo height.\n\n**\\`career-callout-card\\`** — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt (\"Are you ready for a new adventure?\"). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\` (0px), padding \\`{spacing.md}\\` (16px), width 320px. Carries a small thumbnail at top, body line, and a \\`{typography.caption-uppercase}\\` link (\"EXPLORE OUR OPPORTUNITIES\").\n\n**\\`model-photo-card\\`** — Used in model showcases (Tourbillon page, model lineup grid). Background \\`{colors.canvas}\\` (no card surface — just photo on black), rounded \\`{rounded.none}\\`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in \\`{typography.display-md}\\` (32px Bugatti Display, 2px tracking), short specs line in \\`{typography.caption-uppercase}\\` (11px Bugatti Monospace), a \\`{component.text-link}\\` (\"DISCOVER\").\n\n**\\`newsroom-article-card\\`** — Used on the newsroom page (newsroom.bugatti.com). Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Carries a 16:9 thumbnail, a \\`{component.date-pill}\\` (\"12. NOVEMBER 2025\"), a \\`{typography.title-md}\\` headline, and a body excerpt in \\`{typography.body-md}\\` (Bugatti Text Regular serif).\n\n**\\`career-listing-row\\`** — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in \\`{typography.title-md}\\` (Bugatti Display 20px) at left; location + department in \\`{typography.caption-uppercase}\\` at right; chevron arrow (→) at far right.\n\n**\\`spec-cell\\`** — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in \\`{typography.title-md}\\` at top and a label in \\`{typography.caption-uppercase}\\` below. Padding 24px vertical.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input on dark canvas. Background **transparent**, text \\`{colors.on-dark}\\`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type \\`{typography.body-md}\\` (Bugatti Text Regular). Placeholder in \\`{colors.muted}\\`. Focus thickens the bottom border to white.\n\n### Tags & Captions\n\n**\\`caption-overlay\\`** — Photo-overlay caption (e.g., \"HONORING THE OEYRON AND ITS VISIONARY CREATOR\"). Centered or left-aligned over photography in \\`{typography.caption-uppercase}\\` (Bugatti Monospace, 11px, 2px tracking, white).\n\n**\\`category-tag\\`** + **\\`date-pill\\`** — Both render as transparent inline labels in \\`{typography.caption-uppercase}\\`, color \\`{colors.muted}\\`. No background fill, no border. The \"tag\" is the type itself.\n\n### CTA / Footer\n\n**\\`cta-band-photo\\`** — A pre-footer \"Discover Bugatti\" band with full-bleed photography of a Bugatti car at speed and a centered headline in \\`{typography.display-md}\\` + a \\`{component.button-primary}\\` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.muted}\\`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in \\`{typography.body-sm}\\` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.\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 entirely.\n- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.\n- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.\n- Keep \\`{component.button-primary}\\` transparent with a 1px white outline. The transparent pill IS the brand button.\n- Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.\n- Use \\`{spacing.section}\\` (120px) between major editorial bands. The whitespace is part of the brand.\n- Reserve \\`{colors.link}\\` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.\n\n### Don't\n- Don't introduce any accent color outside \\`{colors.link}\\`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.\n- Don't bold any type. The system has no bold weight — every typeface stays at 400.\n- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.\n- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.\n- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.\n- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.\n- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |\n| Desktop | 1024–1440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` renders at minimum 44 × 44px (matches WCAG AAA).\n- \\`{component.button-icon}\\` is exactly 40 × 40px.\n- \\`{component.text-input}\\` height is 44px.\n- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.\n\n### Collapsing Strategy\n- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.\n- Hero photography stays full-bleed at every breakpoint. Photo crops adjust — wider crops at desktop, vertical crops on mobile.\n- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).\n- 2-up newsroom grid collapses to 1-up at < 768px.\n- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.\n\n### Image Behavior\n- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).\n- Newsroom thumbnails retain 16:9 ratio and 0px corners.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.hero-photo-band}\\`, \\`{component.career-callout-card}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Only \\`{component.button-primary}\\` and \\`{component.button-icon}\\` use pill / full radius.\n3. Variants live as separate entries in \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Never document hover. Default and Active/Pressed states only.\n6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.\n7. When in doubt about emphasis: bigger photography before bigger type.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured only 3 colors at root level (\\`#000000\\`, \\`#999999\\`, \\`#c3d9f3\\`). The white text (#ffffff) and dark surface tones (\\`#0d0d0d\\`, \\`#141414\\`, \\`#1f1f1f\\`) were inferred from screenshot — Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.\n- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.\n- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.\n- Form validation states beyond the underline-only \\`{component.text-input}\\` are not extracted — error / success states are inferred from general standards, not from the analyzed surfaces.\n- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.\n- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces — no design-system-level differences observed, only language localization.\n- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/bugatti.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const bugattiBrief = `---\nversion: alpha\nname: Bugatti\ndescription: An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces — Bugatti Display, Bugatti Text Regular, and Bugatti Monospace — and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome — only photography, typography, and the brand wordmark.\n\ncolors:\n  primary: \"#ffffff\"\n  ink: \"#ffffff\"\n  body: \"#cccccc\"\n  body-strong: \"#e6e6e6\"\n  muted: \"#999999\"\n  muted-soft: \"#666666\"\n  hairline: \"#262626\"\n  hairline-strong: \"#3a3a3a\"\n  canvas: \"#000000\"\n  surface-soft: \"#0d0d0d\"\n  surface-card: \"#141414\"\n  surface-elevated: \"#1f1f1f\"\n  on-primary: \"#000000\"\n  on-dark: \"#ffffff\"\n  on-photo: \"#ffffff\"\n  link: \"#c3d9f3\"\n  warning: \"#d4a017\"\n  success: \"#5fa657\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: 4px\n  display-lg:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: 3px\n  display-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 32px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: 2px\n  display-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 24px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  wordmark:\n    fontFamily: \"Bugatti Display, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 6px\n  title-md:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1px\n  title-sm:\n    fontFamily: \"Bugatti Display, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.3\n    letterSpacing: 1.5px\n  caption-uppercase:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 11px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n  body-md:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Bugatti Text Regular, serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1\n    letterSpacing: 2.5px\n  nav-link:\n    fontFamily: \"Bugatti Monospace, ui-monospace, monospace\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 2px\n\nrounded:\n  none: 0px\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: 40px\n  xxl: 64px\n  section: 120px\n\ncomponents:\n  button-primary:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 14px 32px\n    height: 44px\n  button-icon:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.full}\"\n    size: 40px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.link}\"\n    typography: \"{typography.button}\"\n  top-nav:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.nav-link}\"\n    height: 56px\n  wordmark-display:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.wordmark}\"\n  hero-photo-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  caption-overlay:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.caption-uppercase}\"\n  career-callout-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.none}\"\n    padding: 16px\n    width: 320px\n  model-photo-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    rounded: \"{rounded.none}\"\n  newsroom-article-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  career-listing-row:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  text-input:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 12px 0\n    height: 44px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    padding: 24px 0\n  date-pill:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  category-tag:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.caption-uppercase}\"\n  cta-band-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-md}\"\n    padding: 80px\n  footer:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nBugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (\\`{colors.canvas}\\` — #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome — only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.\n\nThe system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the \"BUGATTI\" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates — anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.\n\nDisplay sizes use weight 400 (regular) — never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the \"engineered precision\" feel that no other luxury maker matches.\n\n**Key Characteristics:**\n- Pure black canvas (\\`{colors.canvas}\\` — #000000) with white type. The system does not have a light mode.\n- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).\n- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.\n- No accent color. The only non-monochrome color anywhere on the site is \\`{colors.link}\\` (#c3d9f3) — a desaturated ice-blue used on inline anchor links, and even that appears rarely.\n- Buttons are pill-shaped (\\`{rounded.pill}\\`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.\n- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are \\`{colors.surface-card}\\` (#141414) at most — a barely-different-from-black tone.\n- Section rhythm is generous — \\`{spacing.section}\\` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #ffffff): The single brand color. White type and white CTA outlines on the black canvas.\n- **Link** (\\`{colors.link}\\` — #c3d9f3): The only non-monochrome color in the system — a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #000000): The default page floor across every surface. Pure black.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.\n- **Surface Card** (\\`{colors.surface-card}\\` — #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black — no contrast jump.\n- **Surface Elevated** (\\`{colors.surface-elevated}\\` — #1f1f1f): One step further from black, used for nested cards on rare dense pages.\n- **Hairline** (\\`{colors.hairline}\\` — #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border — only an underline hairline).\n\n### Text\n- **Ink / On Dark** (\\`{colors.on-dark}\\` — #ffffff): All headline and primary text on dark canvas.\n- **Body** (\\`{colors.body}\\` — #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.\n- **Body Strong** (\\`{colors.body-strong}\\` — #e6e6e6): Emphasized body / lead paragraph.\n- **Muted** (\\`{colors.muted}\\` — #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).\n\n### Semantic\n- **Warning** (\\`{colors.warning}\\` — #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.\n- **Success** (\\`{colors.success}\\` — #5fa657): Order confirmation states (rare on marketing pages).\n\n## Typography\n\n### Font Family\nThe system runs **three custom Bugatti typefaces** as a rigid trinity:\n1. **Bugatti Display** — All display headlines (h1, h2, h3), the \"BUGATTI\" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.\n2. **Bugatti Text Regular** — A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.\n3. **Bugatti Monospace** — Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.\n\nThe split is functional and absolute. Bugatti Display in a button breaks the \"machined precision\" voice; Bugatti Monospace in a paragraph breaks the \"engineered elegance\" voice; Bugatti Text in a button is unthinkable.\n\nThe fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for Bugatti Display, \\`Garamond, \"Times New Roman\", serif\\` for Bugatti Text Regular, and \\`ui-monospace, \"SF Mono\", \"Cascadia Mono\", monospace\\` for Bugatti Monospace.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.1 | 4px | Hero h1 (\"THE BUGATTI F.K.P. HOMMAGE\", \"TOURBILLON\") — Bugatti Display, uppercase, wide-tracked |\n| \\`{typography.display-lg}\\` | 48px | 400 | 1.15 | 3px | Section heads — Bugatti Display, uppercase |\n| \\`{typography.display-md}\\` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names — Bugatti Display |\n| \\`{typography.display-sm}\\` | 24px | 400 | 1.3 | 1.5px | Card titles — Bugatti Display |\n| \\`{typography.wordmark}\\` | 14px | 400 | 1.0 | 6px | The \"BUGATTI\" brand wordmark in the top nav — Bugatti Display, the widest tracking in the system |\n| \\`{typography.title-md}\\` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs — Bugatti Display |\n| \\`{typography.title-sm}\\` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |\n| \\`{typography.caption-uppercase}\\` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, \"EXPLORE OUR OPPORTUNITIES\" — Bugatti Monospace, uppercase |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default body — Bugatti Text Regular (a serif face), sentence case, no tracking |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal — Bugatti Text Regular |\n| \\`{typography.button}\\` | 14px | 400 | 1.0 | 2.5px | All button labels — Bugatti Monospace, uppercase, 2.5px tracking |\n| \\`{typography.nav-link}\\` | 12px | 400 | 1.4 | 2px | Top-nav menu items (\"MENU\", \"STORE\") — Bugatti Monospace |\n\n### Principles\nThe system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:\n1. **Size** — 64px hero vs 16px body is a 4× hierarchy\n2. **Letter-spacing** — 6px wordmark vs 0px body\n3. **Case** — Uppercase display vs sentence-case body\n4. **Family contrast** — Display vs Text Regular vs Monospace\n\nGoing to weight 700 anywhere would break the \"modest engineering\" feel and make Bugatti read like a generic luxury template.\n\nThe serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose — which is the brand's editorial philosophy.\n\n### Note on Font Substitutes\nIf Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:\n- **Bugatti Display** → **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing\n- **Bugatti Text Regular** → **Cormorant Garamond** (regular) or **EB Garamond**\n- **Bugatti Monospace** → **JetBrains Mono** or **IBM Plex Mono** (regular weight)\n\nThe substitution preserves the three-family split, which is more important than exact typeface match.\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}\\` 120px.\n- **Section padding:** \\`{spacing.section}\\` (120px) — longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.\n- **Card internal padding:** \\`{spacing.lg}\\` (24px) for newsroom and content cards; \\`{spacing.md}\\` (16px) for the career callout card; \\`{spacing.xxl}\\` (64px) inside hero photo bands.\n- **Gutters:** \\`{spacing.xl}\\` (40px) between cards in 2-up grids — wider than typical because Bugatti's grids are sparse.\n\n### Grid & Container\n- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.\n- **Editorial body:** Single 12-column grid; photo bands are full-bleed.\n- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.\n- **Career listings:** Single column with 80px row spacing.\n\n### Whitespace Philosophy\nBugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional — it lets the car breathe. Compressing the whitespace to \"fit more content\" breaks the brand's fundamental contract: that less is more.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body, top nav, footer, photo bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Section dividers, table rows |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Career callout, newsroom article container |\n| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases — depth via subject + lens, not chrome |\n\nThe system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated \\`{colors.surface-card}\\`.\n\n### Decorative Depth\n- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | All cards, photo containers, inputs, spec cells — the dominant radius |\n| \\`{rounded.pill}\\` | 9999px | All buttons (the only rounded element in the system) |\n| \\`{rounded.full}\\` | 9999px / 50% | Circular icon buttons, avatar surfaces |\n\nThe radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between — those would feel \"designed\" rather than \"engineered.\"\n\n### Photography Geometry\nHero photography fills full-width with no rounding. Photo cards inside grids retain \\`{rounded.none}\\` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries \"MENU\" at left, the centered **wordmark-display** (\"BUGATTI\" in 14px Bugatti Display with 6px tracking), and \"STORE\" at right with a small bag icon. All labels in \\`{typography.nav-link}\\` (Bugatti Monospace, 12px, 2px tracking, uppercase).\n\n**\\`wordmark-display\\`** — The \"BUGATTI\" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background **transparent**, text \\`{colors.on-dark}\\` (white), 1px white outline, rounded \\`{rounded.pill}\\` (9999px), padding 14px × 32px, height 44px. Type \\`{typography.button}\\` — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.\n\n**\\`button-icon\\`** — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded \\`{rounded.full}\\`. Same outline-only treatment as the primary button.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.link}\\` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits \\`{typography.body-md}\\` (Bugatti Text Regular, serif).\n\n### Cards & Containers\n\n**\\`hero-photo-band\\`** — Full-width black band with full-bleed automotive photography. The h1 in \\`{typography.display-xl}\\` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (\\`{typography.caption-uppercase}\\`) below the headline and a single \\`{component.button-primary}\\` further down. Vertical padding 96px-200px depending on photo height.\n\n**\\`career-callout-card\\`** — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt (\"Are you ready for a new adventure?\"). Background \\`{colors.surface-card}\\`, rounded \\`{rounded.none}\\` (0px), padding \\`{spacing.md}\\` (16px), width 320px. Carries a small thumbnail at top, body line, and a \\`{typography.caption-uppercase}\\` link (\"EXPLORE OUR OPPORTUNITIES\").\n\n**\\`model-photo-card\\`** — Used in model showcases (Tourbillon page, model lineup grid). Background \\`{colors.canvas}\\` (no card surface — just photo on black), rounded \\`{rounded.none}\\`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in \\`{typography.display-md}\\` (32px Bugatti Display, 2px tracking), short specs line in \\`{typography.caption-uppercase}\\` (11px Bugatti Monospace), a \\`{component.text-link}\\` (\"DISCOVER\").\n\n**\\`newsroom-article-card\\`** — Used on the newsroom page (newsroom.bugatti.com). Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.none}\\`, padding \\`{spacing.lg}\\` (24px). Carries a 16:9 thumbnail, a \\`{component.date-pill}\\` (\"12. NOVEMBER 2025\"), a \\`{typography.title-md}\\` headline, and a body excerpt in \\`{typography.body-md}\\` (Bugatti Text Regular serif).\n\n**\\`career-listing-row\\`** — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in \\`{typography.title-md}\\` (Bugatti Display 20px) at left; location + department in \\`{typography.caption-uppercase}\\` at right; chevron arrow (→) at far right.\n\n**\\`spec-cell\\`** — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in \\`{typography.title-md}\\` at top and a label in \\`{typography.caption-uppercase}\\` below. Padding 24px vertical.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input on dark canvas. Background **transparent**, text \\`{colors.on-dark}\\`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type \\`{typography.body-md}\\` (Bugatti Text Regular). Placeholder in \\`{colors.muted}\\`. Focus thickens the bottom border to white.\n\n### Tags & Captions\n\n**\\`caption-overlay\\`** — Photo-overlay caption (e.g., \"HONORING THE OEYRON AND ITS VISIONARY CREATOR\"). Centered or left-aligned over photography in \\`{typography.caption-uppercase}\\` (Bugatti Monospace, 11px, 2px tracking, white).\n\n**\\`category-tag\\`** + **\\`date-pill\\`** — Both render as transparent inline labels in \\`{typography.caption-uppercase}\\`, color \\`{colors.muted}\\`. No background fill, no border. The \"tag\" is the type itself.\n\n### CTA / Footer\n\n**\\`cta-band-photo\\`** — A pre-footer \"Discover Bugatti\" band with full-bleed photography of a Bugatti car at speed and a centered headline in \\`{typography.display-md}\\` + a \\`{component.button-primary}\\` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.\n\n**\\`footer\\`** — Black footer that closes every page. Background \\`{colors.canvas}\\`, text \\`{colors.muted}\\`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in \\`{typography.body-sm}\\` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.\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 entirely.\n- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.\n- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.\n- Keep \\`{component.button-primary}\\` transparent with a 1px white outline. The transparent pill IS the brand button.\n- Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.\n- Use \\`{spacing.section}\\` (120px) between major editorial bands. The whitespace is part of the brand.\n- Reserve \\`{colors.link}\\` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.\n\n### Don't\n- Don't introduce any accent color outside \\`{colors.link}\\`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.\n- Don't bold any type. The system has no bold weight — every typeface stays at 400.\n- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.\n- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.\n- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.\n- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.\n- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |\n| Desktop | 1024–1440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |\n| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` renders at minimum 44 × 44px (matches WCAG AAA).\n- \\`{component.button-icon}\\` is exactly 40 × 40px.\n- \\`{component.text-input}\\` height is 44px.\n- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.\n\n### Collapsing Strategy\n- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.\n- Hero photography stays full-bleed at every breakpoint. Photo crops adjust — wider crops at desktop, vertical crops on mobile.\n- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).\n- 2-up newsroom grid collapses to 1-up at < 768px.\n- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.\n\n### Image Behavior\n- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).\n- Newsroom thumbnails retain 16:9 ratio and 0px corners.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.hero-photo-band}\\`, \\`{component.career-callout-card}\\`).\n2. New components default to \\`{rounded.none}\\` (0px). Only \\`{component.button-primary}\\` and \\`{component.button-icon}\\` use pill / full radius.\n3. Variants live as separate entries in \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Never document hover. Default and Active/Pressed states only.\n6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.\n7. When in doubt about emphasis: bigger photography before bigger type.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured only 3 colors at root level (\\`#000000\\`, \\`#999999\\`, \\`#c3d9f3\\`). The white text (#ffffff) and dark surface tones (\\`#0d0d0d\\`, \\`#141414\\`, \\`#1f1f1f\\`) were inferred from screenshot — Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.\n- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.\n- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.\n- Form validation states beyond the underline-only \\`{component.text-input}\\` are not extracted — error / success states are inferred from general standards, not from the analyzed surfaces.\n- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.\n- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces — no design-system-level differences observed, only language localization.\n- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/cal.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const calBrief = `---\nversion: alpha\nname: Cal.com\ndescription: A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors.\n\ncolors:\n  primary: \"#111111\"\n  primary-active: \"#242424\"\n  primary-disabled: \"#e5e7eb\"\n  ink: \"#111111\"\n  body: \"#374151\"\n  muted: \"#6b7280\"\n  muted-soft: \"#898989\"\n  hairline: \"#e5e7eb\"\n  hairline-soft: \"#f3f4f6\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f8f9fa\"\n  surface-card: \"#f5f5f5\"\n  surface-strong: \"#e5e7eb\"\n  surface-dark: \"#101010\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a1a1aa\"\n  brand-accent: \"#3b82f6\"\n  success: \"#10b981\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  badge-orange: \"#fb923c\"\n  badge-pink: \"#ec4899\"\n  badge-violet: \"#8b5cf6\"\n  badge-emerald: \"#34d399\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -2px\n  display-lg:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.5px\n  display-md:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1px\n  display-sm:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.5px\n  title-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: -0.3px\n  title-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 600\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\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-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  nav-pill-group:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.pill}\"\n    padding: 6px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-app-mockup-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  feature-icon-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  product-mockup-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    padding: 8px 14px\n    rounded: \"{rounded.md}\"\n  category-tab-active:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  avatar-circle:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  rating-stars:\n    backgroundColor: transparent\n    textColor: \"{colors.badge-orange}\"\n    typography: \"{typography.caption}\"\n  cta-band-light:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  footer:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark-soft}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nCal.com's marketing surface is a clean, friendly modern-SaaS interface — white canvas (\\`{colors.canvas}\\` — #ffffff) with black primary CTAs (\\`{colors.primary}\\` — #111111), custom **Cal Sans** display typography, and \\`{colors.surface-card}\\` (#f5f5f5) light-gray cards holding product UI fragments. The system reads as confidently engineered without trying to impress — every band has clear hierarchy, generous whitespace, and a single primary action.\n\nType voice splits cleanly into two roles: **Cal Sans** (the brand's custom geometric display face — used for h1, h2, h3, and hero headlines) and **Inter** (used for everything else — body, buttons, nav, captions). Cal Sans uses weight 600 with negative letter-spacing (-0.5px to -2px depending on size) — it feels modern, slightly condensed, distinctly Cal.com.\n\nComponent voltage comes from **product UI fragments shown directly inside cards** — calendar widgets, scheduling forms, automation diagrams, integration tiles. Cal.com doesn't paint marketing illustrations of the product; it shows the actual product chrome at small scale embedded in the marketing flow.\n\nThe footer flips to \\`{colors.surface-dark}\\` (#101010) — a deep near-black that visually closes every long-scroll page. The footer is the only dark surface in the system; everything above stays white-with-light-gray-cards.\n\n**Key Characteristics:**\n- White canvas with black primary CTA (\\`{colors.primary}\\` — #111111). Buttons are \\`{rounded.md}\\` (8px) with confident weight-600 labels. Standard friendly-SaaS button.\n- Custom \\`Cal Sans\\` display typeface for headlines (substituted with Inter weight 600 here). Negative letter-spacing on display sizes — geometric, precise, slightly condensed.\n- Light-gray card surfaces (\\`{colors.surface-card}\\` — #f5f5f5) for feature cards, testimonials, and pricing tiers (non-featured). The featured pricing tier flips to \\`{colors.surface-dark}\\` (the only dark card on light pages).\n- Product UI fragments embedded directly in cards — Cal.com shows real schedule pickers, calendar widgets, integration grids inside its marketing cards. Brand voltage from real product chrome at small scale.\n- Nav-pill-group (\\`{component.nav-pill-group}\\`) — a small pill-radius wrapper around grouped nav segments (e.g., the sub-nav switcher between product views). The pill wrapper is one of the system's signature interactive components.\n- Avatars are circular (\\`{rounded.full}\\`), 36px diameter, used in testimonial rows and team-listing surfaces.\n- Footer is dark navy (\\`{colors.surface-dark}\\` — #101010) with light text (\\`{colors.on-dark-soft}\\` — #a1a1aa). The dark footer closes every page even though the body above is white.\n- Spacing rhythm is \\`{spacing.section}\\` (96px) between major bands — tight enough to feel modern-SaaS but generous enough to breathe.\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons + inputs, \\`{rounded.lg}\\` (12px) for content cards, \\`{rounded.xl}\\` (16px) for the hero app-mockup container, \\`{rounded.pill}\\` for nav-pill-group + badges, \\`{rounded.full}\\` for avatars + icon buttons.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #111111): The dominant action color. All primary CTAs, h1/h2 display type. Press state shifts to \\`{colors.primary-active}\\` (#242424).\n- **Brand Accent** (\\`{colors.brand-accent}\\` — #3b82f6): Used sparely on inline links and on a small badge / \"Customer story\" highlight. Cal.com is a near-monochrome brand — the blue appears rarely.\n- **Badge Pastels** — A small pastel set for category badges and avatar fills: \\`{colors.badge-orange}\\` (#fb923c), \\`{colors.badge-pink}\\` (#ec4899), \\`{colors.badge-violet}\\` (#8b5cf6), \\`{colors.badge-emerald}\\` (#34d399). These appear on tag pills and small accent moments inside product UI fragments — never on hero CTAs.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page floor.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f8f9fa): Nav-pill-group background, very-soft section dividers.\n- **Surface Card** (\\`{colors.surface-card}\\` — #f5f5f5): Feature cards, testimonial cards, badge pills, default avatar fills.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #e5e7eb): Hairline border alternative; disabled button background.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #101010): The footer background — the only dark surface on every page. Also used for the featured pricing tier card.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a1a1a): Used for nested cards inside the dark footer or featured pricing card.\n- **Hairline** (\\`{colors.hairline}\\` — #e5e7eb): The 1px border tone on light surfaces. Used on input borders, table dividers, content card outlines (sometimes).\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f3f4f6): A barely-visible divider used between sections that share the white canvas.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #111111): All headlines and primary text.\n- **Body** (\\`{colors.body}\\` — #374151): Default running-text color.\n- **Muted** (\\`{colors.muted}\\` — #6b7280): Secondary text — sub-headings, breadcrumbs, footer body.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #898989): Tertiary text — captions, fine-print, copyright lines.\n- **On Primary / On Dark** (\\`{colors.on-primary}\\` / \\`{colors.on-dark}\\` — #ffffff): Text on primary buttons and dark footer.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a1a1aa): Footer body text — slightly muted white for the link rows.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #10b981): Confirmation states, success badges in product UI.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #ef4444): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Cal Sans** for display + brand wordmark and **Inter** for everything else. Cal Sans is Cal.com's custom geometric display typeface — slightly condensed, weight 600, negative letter-spacing. Inter handles body, buttons, navigation, captions, and tabular code blocks. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for both families.\n\nThe split is functional:\n- Cal Sans (display, 600 weight, -0.5 to -2px tracking) — h1, h2, h3\n- Inter (body + UI, 400-600 weight, 0 letter-spacing) — paragraphs, labels, buttons, nav\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 600 | 1.05 | -2px | Homepage h1 (\"The better way to schedule your meetings\") — Cal Sans |\n| \\`{typography.display-lg}\\` | 48px | 600 | 1.1 | -1.5px | Section heads (\"Your all-purpose scheduling app\") — Cal Sans |\n| \\`{typography.display-md}\\` | 36px | 600 | 1.15 | -1px | Sub-section heads, card titles — Cal Sans |\n| \\`{typography.display-sm}\\` | 28px | 600 | 1.2 | -0.5px | CTA-band heads, pricing tier prices — Cal Sans |\n| \\`{typography.title-lg}\\` | 22px | 600 | 1.3 | -0.3px | Pricing plan names — Inter |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.4 | 0 | Feature card titles, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default running-text |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| \\`{typography.code}\\` | 14px | 400 | 1.5 | 0 | Code snippets, API examples — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 600 | 1.0 | 0 | Standard button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nCal Sans is the brand voice — every display headline uses it. Inter handles the supporting type. The boundary is strict: never put body copy in Cal Sans, never put a display headline in Inter. Cal Sans without negative letter-spacing reads as off-brand — the -0.5 to -2px tracking is part of the voice.\n\nDisplay weight stays at 600 across all sizes — never 700, never 500. The middle weight is what makes Cal Sans feel modern and confident without becoming bombastic.\n\n### Note on Font Substitutes\nIf Cal Sans is unavailable, **Inter** at weight 600 with -0.04em letter-spacing is a usable approximation. The geometric character of Cal Sans differs from Inter's humanist forms, but the substitution preserves the weight + tracking signature. **Manrope** at weight 700 is another close alternative.\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}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) — the universal vertical rhythm between editorial bands.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards and pricing tier cards; \\`{spacing.lg}\\` (24px) for testimonial and product-mockup cards.\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:** ~1200px centered on marketing pages.\n- **Editorial body:** Single 12-column grid; hero band often uses 7/5 split (h1 left, app mockup card right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 4-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Footer:** 4-column link list at desktop, wrapping to 2-up at tablet, 1-up at mobile.\n\n### Whitespace Philosophy\nCal.com uses generous but not excessive whitespace — section padding sits at 96px (modern-SaaS standard), and card internal padding stays at 32px. The rhythm is calibrated for fast scanning: every band has a single h1 + h2 + supporting cards, never densely packed lists. The result reads as confident-not-shouting.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Inputs, table dividers, occasionally on cards |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Feature cards, testimonials |\n| Subtle drop shadow | Faint shadow at low alpha | Pricing tier cards, hover-elevated states (the system uses \\`0 1px 2px rgba(0,0,0,0.05)\\` and \\`0 4px 12px rgba(0,0,0,0.08)\\`) |\n| Featured tier | \\`{colors.surface-dark}\\` background, no shadow needed | The featured pricing tier inverts to dark surface — color contrast does the elevation work |\n\nThe elevation philosophy is **soft and modern** — small drop shadows on elevated cards, color-block contrast for emphasis. No heavy shadows, no neumorphism, no glassmorphism.\n\n### Decorative Depth\n- Calendar widgets and product UI fragments embedded inside marketing cards carry their own internal shadows from the product UI itself — these are not system tokens, they're product chrome shown as content.\n- Avatar circles in testimonial sections sometimes carry pastel fill colors (\\`{colors.badge-orange}\\`, \\`{colors.badge-pink}\\`, etc.) — adds a small chromatic flourish without breaking the monochrome brand voice.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Almost no use — reserved for badge accents |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons, dropdown items |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs, category tabs |\n| \\`{rounded.lg}\\` | 12px | Content cards (feature cards, testimonial cards, pricing tier cards) |\n| \\`{rounded.xl}\\` | 16px | Hero app-mockup card (a slightly larger radius for the marquee component) |\n| \\`{rounded.pill}\\` | 9999px | Nav-pill-group, badge pills |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatars, icon buttons |\n\n### Photography Geometry\nAvatar photos use \\`{rounded.full}\\` (perfect circles) at 36px or 40px. Product UI fragments inside marketing cards retain their native chrome (which often has its own internal radii — e.g., calendar grid cells, button rows). Hero illustration zones use 16:9 or 4:3 ratios with \\`{rounded.xl}\\` corners.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — White nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the Cal.com wordmark + logo at left (the lowercase \"Cal.com\" with the brand circle), primary horizontal menu (Product, Solutions, Resources, Pricing, Enterprise) center, right-side cluster with \"Sign in\" text-link, \"Sign up free\" \\`{component.button-primary}\\`, and a sometimes-visible language selector. Menu items in \\`{typography.nav-link}\\` (Inter 14px / 500).\n\n**\\`nav-pill-group\\`** — A small pill-radius wrapper around 2-3 sub-nav segments (e.g., the product-mode switcher between \"Personal\" / \"Teams\" / \"Enterprise\"). Background \\`{colors.surface-soft}\\` with internal padding 6px, rounded \\`{rounded.pill}\\`. Active segment renders as a white-canvas pill with a subtle drop shadow inside the wrapper. The pill-in-pill treatment is one of Cal.com's signature interactive components.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\` (#111111), text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). Active state \\`button-primary-active\\` shifts to \\`{colors.primary-active}\\` (#242424).\n\n**\\`button-secondary\\`** — White button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border, same padding + height + radius as primary.\n\n**\\`button-icon-circular\\`** — 36 × 36px circular icon button. Background \\`{colors.canvas}\\`, hairline border, ink-color icon. Used for share, \"view more\", carousel arrows.\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" in the top nav and inline CTA links inside cards.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.ink}\\` (the brand keeps inline links monochrome). Underlined on hover (not documented per the no-hover policy, but mentioned for context).\n\n### Cards & Containers\n\n**\\`hero-band\\`** — White-canvas hero with a 7-5 grid: h1 + sub-headline + button row on the left, \\`{component.hero-app-mockup-card}\\` on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-app-mockup-card\\`** — A larger product-UI mockup card showing the actual Cal.com booking widget with calendar grid, time slots, and a primary \"Confirm\" button inside. Background \\`{colors.canvas}\\`, 1px hairline border, rounded \\`{rounded.xl}\\` (16px), subtle drop shadow. Used as the hero's right-side artifact.\n\n**\\`feature-card\\`** — Used in 3-up feature grids (\"With us, appointment scheduling is easy\"). Background \\`{colors.surface-card}\\` (#f5f5f5), rounded \\`{rounded.lg}\\` (12px), internal padding \\`{spacing.xl}\\` (32px). Carries a small icon at top, an \\`{typography.title-md}\\` headline, and a body description in \\`{typography.body-md}\\`.\n\n**\\`feature-icon-card\\`** — A simpler card variant used in 4-up feature grids on lower-density bands. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Carries a small icon, \\`{typography.title-sm}\\` title, short description.\n\n**\\`product-mockup-card\\`** — A card showing actual Cal.com product UI fragments (workflow editor, calendar grid, integration grid, automation flow). Background \\`{colors.canvas}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). The product UI inside has its own internal chrome — these cards display the product, they don't decorate around it.\n\n**\\`testimonial-card\\`** — Used in customer-quote grids. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Top row carries a \\`{component.avatar-circle}\\` + name + role; below sits the testimonial quote in \\`{typography.body-md}\\`.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.canvas}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px). Carries the plan name in \\`{typography.title-lg}\\`, price in \\`{typography.display-sm}\\`, feature checklist in \\`{typography.body-md}\\`, and a \\`{component.button-primary}\\` at the bottom.\n\n**\\`pricing-tier-card-featured\\`** — The featured tier (typically \"Teams\"). Background flips to \\`{colors.surface-dark}\\` (#101010), text inverts to \\`{colors.on-dark}\\`. The dark surface IS the featured-tier signal — no accent border, no badge, no scale shift.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px. 1px hairline border in \\`{colors.hairline}\\`.\n\n**\\`text-input-focused\\`** — Focus state. Border thickens or shifts to \\`{colors.ink}\\` for emphasis.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small pill label used for category tags (\"Product\", \"Article\", \"New\") and pastel-fill avatar substitutes. Background \\`{colors.surface-card}\\` or one of the badge pastels (\\`{colors.badge-orange}\\`, \\`{colors.badge-pink}\\`, etc.), text \\`{colors.ink}\\`, type \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n**\\`avatar-circle\\`** — 36px diameter, rounded \\`{rounded.full}\\`. Either holds a photo or a pastel fill with initials in \\`{typography.caption}\\`.\n\n**\\`rating-stars\\`** — Inline star rating in \\`{colors.badge-orange}\\` (#fb923c). Used near testimonial avatars to display a 5-star satisfaction score.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Used inside the nav-pill-group. Inactive: transparent background, \\`{colors.muted}\\` text. Active: \\`{colors.canvas}\\` background, \\`{colors.ink}\\` text, subtle drop shadow inside the pill-group wrapper. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-light\\`** — A pre-footer \"Smarter, simpler scheduling\" CTA card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xxl}\\` (48px). Carries an h2 in \\`{typography.display-sm}\\`, a sub-line, and a \\`{component.button-primary}\\` centered.\n\n**\\`footer\\`** — Dark navy footer that closes every page. Background \\`{colors.surface-dark}\\` (#101010), text \\`{colors.on-dark-soft}\\`. 4-column link list at desktop covering Product / Solutions / Company / Resources. Vertical padding 64px. The Cal.com wordmark sits at the top-left in \\`{colors.on-dark}\\`. The footer is the only dark surface on every page — the deliberate inversion visually closes the page.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (#111111) for primary CTAs and h1/h2 type. Cal.com's button is near-black, not blue.\n- Use Cal Sans for every display headline. Pair with Inter body. Never blur the boundary.\n- Apply negative letter-spacing on display sizes (-0.5 to -2px). Cal Sans without it reads as off-brand.\n- Use \\`{component.feature-card}\\` (light gray) and \\`{component.product-mockup-card}\\` (white with chrome) deliberately — the gray cards signal \"abstract feature claim\", white cards signal \"look at the actual product\".\n- Embed real product UI fragments inside marketing cards. Don't paint marketing illustrations of the product when you can show the product itself.\n- Keep avatar circles at 36px, perfect circles, sometimes with pastel fills. Avatars are the only place where badge pastels appear.\n- Use \\`{component.nav-pill-group}\\` for grouped sub-nav segments. The pill-in-pill treatment is signature.\n- End every page with the dark footer. The light-to-dark transition is part of the editorial rhythm.\n\n### Don't\n- Don't use accent colors (\\`{colors.brand-accent}\\`, badge pastels) on primary CTAs. The system is monochrome at the action layer.\n- Don't bold display weight beyond 600. Cal Sans at 700 reads as bombastic.\n- Don't use rounded radius beyond \\`{rounded.xl}\\` (16px) on cards. Larger radii read as consumer-app, not professional booking software.\n- Don't put dark surface cards anywhere except the footer and the featured pricing tier. The dark surface is a deliberate, scarce signal.\n- Don't repeat the same surface mode in two consecutive bands. Cal.com's pacing alternates white → light-gray → white → product-mockup-card → white → dark-footer.\n- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-app-mockup-card stacks below content; feature grids 1-up; pricing 1-up; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up |\n| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` at minimum 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG's 44 × 44 but the centered icon and full-circle silhouette compensate.\n- \\`{component.text-input}\\` height is 40px.\n- \\`{component.category-tab}\\` rendered inside nav-pill-group has 8 × 14 padding; effective tap area meets 44px+ with the surrounding pill.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; menu opens as a full-screen sheet.\n- Hero band's 7-5 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the app-mockup card below.\n- Feature grids reduce columns rather than scaling cards down.\n- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.\n- Nav-pill-group wraps to multi-row on tablet if the segments don't fit horizontally.\n- Avatar + testimonial card layouts stay grid-aligned at every breakpoint.\n\n### Image Behavior\n- Product UI fragments inside cards retain native aspect ratios; the cards themselves resize.\n- Avatar photos crop to circles at every breakpoint.\n- Hero app-mockup card scales proportionally on mobile — the calendar grid stays legible.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key directly (\\`{component.feature-card}\\`, \\`{component.pricing-tier-card-featured}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries in \\`components:\\`.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Cal Sans 600 with negative letter-spacing. Body stays Inter 400. The trinity does not blur.\n6. The dark footer is the only dark surface on most pages. Don't add other dark cards casually.\n7. When in doubt about emphasis: bigger Cal Sans before bolder Cal Sans.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured \\`Buttons: 0 variants\\` — Cal.com renders most CTAs as styled \\`<a>\\` link elements rather than \\`<button>\\` tags, which dembrandt's button selector doesn't capture. Button styles are documented from screenshot ground-truth + standard Cal Sans / Inter baselines.\n- Cal Sans is licensed to Cal.com and not available as a public web font; substitutes are documented in the typography section.\n- The badge pastel set (orange / pink / violet / emerald) is documented from observed avatar fill colors; exact hex values may shift seasonally.\n- Animation and transition timings (calendar slot picker, schedule confirmation, integration grid hover-reveal) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted — error / success states would need a sign-up or booking flow to confirm.\n- The actual booking widget surface (cal.com/{username}) is the product, not a marketing surface; its spec is out of scope.\n- Avatar photos in testimonial sections sometimes carry pastel circular fills with initials instead of photographs; both treatments coexist on the same page.\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/cal.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const calBrief = `---\nversion: alpha\nname: Cal.com\ndescription: A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors.\n\ncolors:\n  primary: \"#111111\"\n  primary-active: \"#242424\"\n  primary-disabled: \"#e5e7eb\"\n  ink: \"#111111\"\n  body: \"#374151\"\n  muted: \"#6b7280\"\n  muted-soft: \"#898989\"\n  hairline: \"#e5e7eb\"\n  hairline-soft: \"#f3f4f6\"\n  canvas: \"#ffffff\"\n  surface-soft: \"#f8f9fa\"\n  surface-card: \"#f5f5f5\"\n  surface-strong: \"#e5e7eb\"\n  surface-dark: \"#101010\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a1a1aa\"\n  brand-accent: \"#3b82f6\"\n  success: \"#10b981\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  badge-orange: \"#fb923c\"\n  badge-pink: \"#ec4899\"\n  badge-violet: \"#8b5cf6\"\n  badge-emerald: \"#34d399\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -2px\n  display-lg:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.5px\n  display-md:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1px\n  display-sm:\n    fontFamily: \"Cal Sans, Inter, sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.5px\n  title-lg:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: -0.3px\n  title-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 600\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\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-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  nav-pill-group:\n    backgroundColor: \"{colors.surface-soft}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.pill}\"\n    padding: 6px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-app-mockup-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  feature-icon-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  product-mockup-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    padding: 8px 14px\n    rounded: \"{rounded.md}\"\n  category-tab-active:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  avatar-circle:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  rating-stars:\n    backgroundColor: transparent\n    textColor: \"{colors.badge-orange}\"\n    typography: \"{typography.caption}\"\n  cta-band-light:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 48px\n  footer:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark-soft}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nCal.com's marketing surface is a clean, friendly modern-SaaS interface — white canvas (\\`{colors.canvas}\\` — #ffffff) with black primary CTAs (\\`{colors.primary}\\` — #111111), custom **Cal Sans** display typography, and \\`{colors.surface-card}\\` (#f5f5f5) light-gray cards holding product UI fragments. The system reads as confidently engineered without trying to impress — every band has clear hierarchy, generous whitespace, and a single primary action.\n\nType voice splits cleanly into two roles: **Cal Sans** (the brand's custom geometric display face — used for h1, h2, h3, and hero headlines) and **Inter** (used for everything else — body, buttons, nav, captions). Cal Sans uses weight 600 with negative letter-spacing (-0.5px to -2px depending on size) — it feels modern, slightly condensed, distinctly Cal.com.\n\nComponent voltage comes from **product UI fragments shown directly inside cards** — calendar widgets, scheduling forms, automation diagrams, integration tiles. Cal.com doesn't paint marketing illustrations of the product; it shows the actual product chrome at small scale embedded in the marketing flow.\n\nThe footer flips to \\`{colors.surface-dark}\\` (#101010) — a deep near-black that visually closes every long-scroll page. The footer is the only dark surface in the system; everything above stays white-with-light-gray-cards.\n\n**Key Characteristics:**\n- White canvas with black primary CTA (\\`{colors.primary}\\` — #111111). Buttons are \\`{rounded.md}\\` (8px) with confident weight-600 labels. Standard friendly-SaaS button.\n- Custom \\`Cal Sans\\` display typeface for headlines (substituted with Inter weight 600 here). Negative letter-spacing on display sizes — geometric, precise, slightly condensed.\n- Light-gray card surfaces (\\`{colors.surface-card}\\` — #f5f5f5) for feature cards, testimonials, and pricing tiers (non-featured). The featured pricing tier flips to \\`{colors.surface-dark}\\` (the only dark card on light pages).\n- Product UI fragments embedded directly in cards — Cal.com shows real schedule pickers, calendar widgets, integration grids inside its marketing cards. Brand voltage from real product chrome at small scale.\n- Nav-pill-group (\\`{component.nav-pill-group}\\`) — a small pill-radius wrapper around grouped nav segments (e.g., the sub-nav switcher between product views). The pill wrapper is one of the system's signature interactive components.\n- Avatars are circular (\\`{rounded.full}\\`), 36px diameter, used in testimonial rows and team-listing surfaces.\n- Footer is dark navy (\\`{colors.surface-dark}\\` — #101010) with light text (\\`{colors.on-dark-soft}\\` — #a1a1aa). The dark footer closes every page even though the body above is white.\n- Spacing rhythm is \\`{spacing.section}\\` (96px) between major bands — tight enough to feel modern-SaaS but generous enough to breathe.\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons + inputs, \\`{rounded.lg}\\` (12px) for content cards, \\`{rounded.xl}\\` (16px) for the hero app-mockup container, \\`{rounded.pill}\\` for nav-pill-group + badges, \\`{rounded.full}\\` for avatars + icon buttons.\n\n## Colors\n\n### Brand & Accent\n- **Primary** (\\`{colors.primary}\\` — #111111): The dominant action color. All primary CTAs, h1/h2 display type. Press state shifts to \\`{colors.primary-active}\\` (#242424).\n- **Brand Accent** (\\`{colors.brand-accent}\\` — #3b82f6): Used sparely on inline links and on a small badge / \"Customer story\" highlight. Cal.com is a near-monochrome brand — the blue appears rarely.\n- **Badge Pastels** — A small pastel set for category badges and avatar fills: \\`{colors.badge-orange}\\` (#fb923c), \\`{colors.badge-pink}\\` (#ec4899), \\`{colors.badge-violet}\\` (#8b5cf6), \\`{colors.badge-emerald}\\` (#34d399). These appear on tag pills and small accent moments inside product UI fragments — never on hero CTAs.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #ffffff): The default page floor.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f8f9fa): Nav-pill-group background, very-soft section dividers.\n- **Surface Card** (\\`{colors.surface-card}\\` — #f5f5f5): Feature cards, testimonial cards, badge pills, default avatar fills.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #e5e7eb): Hairline border alternative; disabled button background.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #101010): The footer background — the only dark surface on every page. Also used for the featured pricing tier card.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1a1a1a): Used for nested cards inside the dark footer or featured pricing card.\n- **Hairline** (\\`{colors.hairline}\\` — #e5e7eb): The 1px border tone on light surfaces. Used on input borders, table dividers, content card outlines (sometimes).\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f3f4f6): A barely-visible divider used between sections that share the white canvas.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #111111): All headlines and primary text.\n- **Body** (\\`{colors.body}\\` — #374151): Default running-text color.\n- **Muted** (\\`{colors.muted}\\` — #6b7280): Secondary text — sub-headings, breadcrumbs, footer body.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #898989): Tertiary text — captions, fine-print, copyright lines.\n- **On Primary / On Dark** (\\`{colors.on-primary}\\` / \\`{colors.on-dark}\\` — #ffffff): Text on primary buttons and dark footer.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a1a1aa): Footer body text — slightly muted white for the link rows.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #10b981): Confirmation states, success badges in product UI.\n- **Warning** (\\`{colors.warning}\\` — #f59e0b): Warning callouts.\n- **Error** (\\`{colors.error}\\` — #ef4444): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Cal Sans** for display + brand wordmark and **Inter** for everything else. Cal Sans is Cal.com's custom geometric display typeface — slightly condensed, weight 600, negative letter-spacing. Inter handles body, buttons, navigation, captions, and tabular code blocks. The fallback stack walks \\`-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for both families.\n\nThe split is functional:\n- Cal Sans (display, 600 weight, -0.5 to -2px tracking) — h1, h2, h3\n- Inter (body + UI, 400-600 weight, 0 letter-spacing) — paragraphs, labels, buttons, nav\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 600 | 1.05 | -2px | Homepage h1 (\"The better way to schedule your meetings\") — Cal Sans |\n| \\`{typography.display-lg}\\` | 48px | 600 | 1.1 | -1.5px | Section heads (\"Your all-purpose scheduling app\") — Cal Sans |\n| \\`{typography.display-md}\\` | 36px | 600 | 1.15 | -1px | Sub-section heads, card titles — Cal Sans |\n| \\`{typography.display-sm}\\` | 28px | 600 | 1.2 | -0.5px | CTA-band heads, pricing tier prices — Cal Sans |\n| \\`{typography.title-lg}\\` | 22px | 600 | 1.3 | -0.3px | Pricing plan names — Inter |\n| \\`{typography.title-md}\\` | 18px | 600 | 1.4 | 0 | Feature card titles, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0 | Default running-text |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.5 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| \\`{typography.code}\\` | 14px | 400 | 1.5 | 0 | Code snippets, API examples — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 600 | 1.0 | 0 | Standard button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nCal Sans is the brand voice — every display headline uses it. Inter handles the supporting type. The boundary is strict: never put body copy in Cal Sans, never put a display headline in Inter. Cal Sans without negative letter-spacing reads as off-brand — the -0.5 to -2px tracking is part of the voice.\n\nDisplay weight stays at 600 across all sizes — never 700, never 500. The middle weight is what makes Cal Sans feel modern and confident without becoming bombastic.\n\n### Note on Font Substitutes\nIf Cal Sans is unavailable, **Inter** at weight 600 with -0.04em letter-spacing is a usable approximation. The geometric character of Cal Sans differs from Inter's humanist forms, but the substitution preserves the weight + tracking signature. **Manrope** at weight 700 is another close alternative.\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}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) — the universal vertical rhythm between editorial bands.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards and pricing tier cards; \\`{spacing.lg}\\` (24px) for testimonial and product-mockup cards.\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:** ~1200px centered on marketing pages.\n- **Editorial body:** Single 12-column grid; hero band often uses 7/5 split (h1 left, app mockup card right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 4-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Footer:** 4-column link list at desktop, wrapping to 2-up at tablet, 1-up at mobile.\n\n### Whitespace Philosophy\nCal.com uses generous but not excessive whitespace — section padding sits at 96px (modern-SaaS standard), and card internal padding stays at 32px. The rhythm is calibrated for fast scanning: every band has a single h1 + h2 + supporting cards, never densely packed lists. The result reads as confident-not-shouting.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Inputs, table dividers, occasionally on cards |\n| Card surface | \\`{colors.surface-card}\\` background — no shadow | Feature cards, testimonials |\n| Subtle drop shadow | Faint shadow at low alpha | Pricing tier cards, hover-elevated states (the system uses \\`0 1px 2px rgba(0,0,0,0.05)\\` and \\`0 4px 12px rgba(0,0,0,0.08)\\`) |\n| Featured tier | \\`{colors.surface-dark}\\` background, no shadow needed | The featured pricing tier inverts to dark surface — color contrast does the elevation work |\n\nThe elevation philosophy is **soft and modern** — small drop shadows on elevated cards, color-block contrast for emphasis. No heavy shadows, no neumorphism, no glassmorphism.\n\n### Decorative Depth\n- Calendar widgets and product UI fragments embedded inside marketing cards carry their own internal shadows from the product UI itself — these are not system tokens, they're product chrome shown as content.\n- Avatar circles in testimonial sections sometimes carry pastel fill colors (\\`{colors.badge-orange}\\`, \\`{colors.badge-pink}\\`, etc.) — adds a small chromatic flourish without breaking the monochrome brand voice.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Almost no use — reserved for badge accents |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons, dropdown items |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs, category tabs |\n| \\`{rounded.lg}\\` | 12px | Content cards (feature cards, testimonial cards, pricing tier cards) |\n| \\`{rounded.xl}\\` | 16px | Hero app-mockup card (a slightly larger radius for the marquee component) |\n| \\`{rounded.pill}\\` | 9999px | Nav-pill-group, badge pills |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatars, icon buttons |\n\n### Photography Geometry\nAvatar photos use \\`{rounded.full}\\` (perfect circles) at 36px or 40px. Product UI fragments inside marketing cards retain their native chrome (which often has its own internal radii — e.g., calendar grid cells, button rows). Hero illustration zones use 16:9 or 4:3 ratios with \\`{rounded.xl}\\` corners.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — White nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the Cal.com wordmark + logo at left (the lowercase \"Cal.com\" with the brand circle), primary horizontal menu (Product, Solutions, Resources, Pricing, Enterprise) center, right-side cluster with \"Sign in\" text-link, \"Sign up free\" \\`{component.button-primary}\\`, and a sometimes-visible language selector. Menu items in \\`{typography.nav-link}\\` (Inter 14px / 500).\n\n**\\`nav-pill-group\\`** — A small pill-radius wrapper around 2-3 sub-nav segments (e.g., the product-mode switcher between \"Personal\" / \"Teams\" / \"Enterprise\"). Background \\`{colors.surface-soft}\\` with internal padding 6px, rounded \\`{rounded.pill}\\`. Active segment renders as a white-canvas pill with a subtle drop shadow inside the wrapper. The pill-in-pill treatment is one of Cal.com's signature interactive components.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature primary CTA. Background \\`{colors.primary}\\` (#111111), text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). Active state \\`button-primary-active\\` shifts to \\`{colors.primary-active}\\` (#242424).\n\n**\\`button-secondary\\`** — White button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border, same padding + height + radius as primary.\n\n**\\`button-icon-circular\\`** — 36 × 36px circular icon button. Background \\`{colors.canvas}\\`, hairline border, ink-color icon. Used for share, \"view more\", carousel arrows.\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" in the top nav and inline CTA links inside cards.\n\n**\\`text-link\\`** — Inline body links in \\`{colors.ink}\\` (the brand keeps inline links monochrome). Underlined on hover (not documented per the no-hover policy, but mentioned for context).\n\n### Cards & Containers\n\n**\\`hero-band\\`** — White-canvas hero with a 7-5 grid: h1 + sub-headline + button row on the left, \\`{component.hero-app-mockup-card}\\` on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-app-mockup-card\\`** — A larger product-UI mockup card showing the actual Cal.com booking widget with calendar grid, time slots, and a primary \"Confirm\" button inside. Background \\`{colors.canvas}\\`, 1px hairline border, rounded \\`{rounded.xl}\\` (16px), subtle drop shadow. Used as the hero's right-side artifact.\n\n**\\`feature-card\\`** — Used in 3-up feature grids (\"With us, appointment scheduling is easy\"). Background \\`{colors.surface-card}\\` (#f5f5f5), rounded \\`{rounded.lg}\\` (12px), internal padding \\`{spacing.xl}\\` (32px). Carries a small icon at top, an \\`{typography.title-md}\\` headline, and a body description in \\`{typography.body-md}\\`.\n\n**\\`feature-icon-card\\`** — A simpler card variant used in 4-up feature grids on lower-density bands. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Carries a small icon, \\`{typography.title-sm}\\` title, short description.\n\n**\\`product-mockup-card\\`** — A card showing actual Cal.com product UI fragments (workflow editor, calendar grid, integration grid, automation flow). Background \\`{colors.canvas}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). The product UI inside has its own internal chrome — these cards display the product, they don't decorate around it.\n\n**\\`testimonial-card\\`** — Used in customer-quote grids. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). Top row carries a \\`{component.avatar-circle}\\` + name + role; below sits the testimonial quote in \\`{typography.body-md}\\`.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.canvas}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px). Carries the plan name in \\`{typography.title-lg}\\`, price in \\`{typography.display-sm}\\`, feature checklist in \\`{typography.body-md}\\`, and a \\`{component.button-primary}\\` at the bottom.\n\n**\\`pricing-tier-card-featured\\`** — The featured tier (typically \"Teams\"). Background flips to \\`{colors.surface-dark}\\` (#101010), text inverts to \\`{colors.on-dark}\\`. The dark surface IS the featured-tier signal — no accent border, no badge, no scale shift.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px. 1px hairline border in \\`{colors.hairline}\\`.\n\n**\\`text-input-focused\\`** — Focus state. Border thickens or shifts to \\`{colors.ink}\\` for emphasis.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small pill label used for category tags (\"Product\", \"Article\", \"New\") and pastel-fill avatar substitutes. Background \\`{colors.surface-card}\\` or one of the badge pastels (\\`{colors.badge-orange}\\`, \\`{colors.badge-pink}\\`, etc.), text \\`{colors.ink}\\`, type \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n**\\`avatar-circle\\`** — 36px diameter, rounded \\`{rounded.full}\\`. Either holds a photo or a pastel fill with initials in \\`{typography.caption}\\`.\n\n**\\`rating-stars\\`** — Inline star rating in \\`{colors.badge-orange}\\` (#fb923c). Used near testimonial avatars to display a 5-star satisfaction score.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Used inside the nav-pill-group. Inactive: transparent background, \\`{colors.muted}\\` text. Active: \\`{colors.canvas}\\` background, \\`{colors.ink}\\` text, subtle drop shadow inside the pill-group wrapper. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-light\\`** — A pre-footer \"Smarter, simpler scheduling\" CTA card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xxl}\\` (48px). Carries an h2 in \\`{typography.display-sm}\\`, a sub-line, and a \\`{component.button-primary}\\` centered.\n\n**\\`footer\\`** — Dark navy footer that closes every page. Background \\`{colors.surface-dark}\\` (#101010), text \\`{colors.on-dark-soft}\\`. 4-column link list at desktop covering Product / Solutions / Company / Resources. Vertical padding 64px. The Cal.com wordmark sits at the top-left in \\`{colors.on-dark}\\`. The footer is the only dark surface on every page — the deliberate inversion visually closes the page.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (#111111) for primary CTAs and h1/h2 type. Cal.com's button is near-black, not blue.\n- Use Cal Sans for every display headline. Pair with Inter body. Never blur the boundary.\n- Apply negative letter-spacing on display sizes (-0.5 to -2px). Cal Sans without it reads as off-brand.\n- Use \\`{component.feature-card}\\` (light gray) and \\`{component.product-mockup-card}\\` (white with chrome) deliberately — the gray cards signal \"abstract feature claim\", white cards signal \"look at the actual product\".\n- Embed real product UI fragments inside marketing cards. Don't paint marketing illustrations of the product when you can show the product itself.\n- Keep avatar circles at 36px, perfect circles, sometimes with pastel fills. Avatars are the only place where badge pastels appear.\n- Use \\`{component.nav-pill-group}\\` for grouped sub-nav segments. The pill-in-pill treatment is signature.\n- End every page with the dark footer. The light-to-dark transition is part of the editorial rhythm.\n\n### Don't\n- Don't use accent colors (\\`{colors.brand-accent}\\`, badge pastels) on primary CTAs. The system is monochrome at the action layer.\n- Don't bold display weight beyond 600. Cal Sans at 700 reads as bombastic.\n- Don't use rounded radius beyond \\`{rounded.xl}\\` (16px) on cards. Larger radii read as consumer-app, not professional booking software.\n- Don't put dark surface cards anywhere except the footer and the featured pricing tier. The dark surface is a deliberate, scarce signal.\n- Don't repeat the same surface mode in two consecutive bands. Cal.com's pacing alternates white → light-gray → white → product-mockup-card → white → dark-footer.\n- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-app-mockup-card stacks below content; feature grids 1-up; pricing 1-up; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up |\n| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` at minimum 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG's 44 × 44 but the centered icon and full-circle silhouette compensate.\n- \\`{component.text-input}\\` height is 40px.\n- \\`{component.category-tab}\\` rendered inside nav-pill-group has 8 × 14 padding; effective tap area meets 44px+ with the surrounding pill.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; menu opens as a full-screen sheet.\n- Hero band's 7-5 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the app-mockup card below.\n- Feature grids reduce columns rather than scaling cards down.\n- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.\n- Nav-pill-group wraps to multi-row on tablet if the segments don't fit horizontally.\n- Avatar + testimonial card layouts stay grid-aligned at every breakpoint.\n\n### Image Behavior\n- Product UI fragments inside cards retain native aspect ratios; the cards themselves resize.\n- Avatar photos crop to circles at every breakpoint.\n- Hero app-mockup card scales proportionally on mobile — the calendar grid stays legible.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key directly (\\`{component.feature-card}\\`, \\`{component.pricing-tier-card-featured}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries in \\`components:\\`.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Cal Sans 600 with negative letter-spacing. Body stays Inter 400. The trinity does not blur.\n6. The dark footer is the only dark surface on most pages. Don't add other dark cards casually.\n7. When in doubt about emphasis: bigger Cal Sans before bolder Cal Sans.\n\n## Known Gaps\n\n- The dembrandt frequency analyzer captured \\`Buttons: 0 variants\\` — Cal.com renders most CTAs as styled \\`<a>\\` link elements rather than \\`<button>\\` tags, which dembrandt's button selector doesn't capture. Button styles are documented from screenshot ground-truth + standard Cal Sans / Inter baselines.\n- Cal Sans is licensed to Cal.com and not available as a public web font; substitutes are documented in the typography section.\n- The badge pastel set (orange / pink / violet / emerald) is documented from observed avatar fill colors; exact hex values may shift seasonally.\n- Animation and transition timings (calendar slot picker, schedule confirmation, integration grid hover-reveal) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted — error / success states would need a sign-up or booking flow to confirm.\n- The actual booking widget surface (cal.com/{username}) is the product, not a marketing surface; its spec is out of scope.\n- Avatar photos in testimonial sections sometimes carry pastel circular fills with initials instead of photographs; both treatments coexist on the same page.\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/claude.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const claudeBrief = `---\nversion: alpha\nname: Claude\ndescription: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display (\"Copernicus\" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.\n\ncolors:\n  primary: \"#cc785c\"\n  primary-active: \"#a9583e\"\n  primary-disabled: \"#e6dfd8\"\n  ink: \"#141413\"\n  body: \"#3d3d3a\"\n  body-strong: \"#252523\"\n  muted: \"#6c6a64\"\n  muted-soft: \"#8e8b82\"\n  hairline: \"#e6dfd8\"\n  hairline-soft: \"#ebe6df\"\n  canvas: \"#faf9f5\"\n  surface-soft: \"#f5f0e8\"\n  surface-card: \"#efe9de\"\n  surface-cream-strong: \"#e8e0d2\"\n  surface-dark: \"#181715\"\n  surface-dark-elevated: \"#252320\"\n  surface-dark-soft: \"#1f1e1b\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#faf9f5\"\n  on-dark-soft: \"#a09d96\"\n  accent-teal: \"#5db8a6\"\n  accent-amber: \"#e8a55a\"\n  success: \"#5db872\"\n  warning: \"#d4a017\"\n  error: \"#c64545\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.05\n    letterSpacing: -1.5px\n  display-lg:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-md:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: -0.5px\n  display-sm:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 28px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.3px\n  title-lg:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 22px\n    fontWeight: 500\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 12px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 1.5px\n  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.6\n    letterSpacing: 0\n  button:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\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-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-illustration-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  product-mockup-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  code-window-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  model-comparison-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  callout-card-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  connector-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  cookie-consent-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    padding: 8px 14px\n    rounded: \"{rounded.md}\"\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  badge-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  cta-band-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  footer:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark-soft}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nClaude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (\\`{colors.canvas}\\` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** (\"Copernicus\" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.\n\nBrand voltage comes from the **cream + coral pairing** — coral (\\`{colors.primary}\\` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.\n\nThe system has three surface modes that alternate page-by-page:\n1. **Cream canvas** (\\`{colors.canvas}\\`) — default body floor\n2. **Light cream cards** (\\`{colors.surface-card}\\`) — feature card backgrounds\n3. **Dark navy product surfaces** (\\`{colors.surface-dark}\\`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself\n\nThe dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.\n\n**Key Characteristics:**\n- Warm cream canvas (\\`{colors.canvas}\\` — #faf9f5) with dark warm-ink text (\\`{colors.ink}\\` — #141413). The brand's defining color choice.\n- Coral primary CTA (\\`{colors.primary}\\` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.\n- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.\n- Dark navy product mockup cards (\\`{colors.surface-dark}\\` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.\n- Light cream feature cards (\\`{colors.surface-card}\\` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.\n- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons + inputs, \\`{rounded.lg}\\` (12px) for content + product cards, \\`{rounded.xl}\\` (16px) for the hero illustration container, \\`{rounded.pill}\\` for badges.\n- Section rhythm \\`{spacing.section}\\` (96px) — modern-SaaS standard. Internal card padding stays generous at \\`{spacing.xl}\\` (32px).\n\n## Colors\n\n### Brand & Accent\n- **Coral / Primary** (\\`{colors.primary}\\` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.\n- **Coral Active** (\\`{colors.primary-active}\\` — #a9583e): The press / hover-darker variant.\n- **Coral Disabled** (\\`{colors.primary-disabled}\\` — #e6dfd8): A desaturated cream-tinted disabled state.\n- **Accent Teal** (\\`{colors.accent-teal}\\` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, \"active connection\" dots in connectors page).\n- **Accent Amber** (\\`{colors.accent-amber}\\` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f5f0e8): Section dividers, very-soft band backgrounds.\n- **Surface Card** (\\`{colors.surface-card}\\` — #efe9de): Feature cards, content cards. One step darker than canvas.\n- **Surface Cream Strong** (\\`{colors.surface-cream-strong}\\` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #252320): Elevated cards inside dark bands (settings panels in mockups).\n- **Surface Dark Soft** (\\`{colors.surface-dark-soft}\\` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.\n- **Hairline** (\\`{colors.hairline}\\` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as \\`{colors.primary-disabled}\\` — borders feel like one elevation step rather than ink lines.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebe6df): Barely-visible divider used inside the same band.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.\n- **Body Strong** (\\`{colors.body-strong}\\` — #252523): Emphasized paragraphs, lead text.\n- **Body** (\\`{colors.body}\\` — #3d3d3a): Default running-text color.\n- **Muted** (\\`{colors.muted}\\` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #8e8b82): Captions, fine-print, copyright lines.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): Text on coral buttons.\n- **On Dark** (\\`{colors.on-dark}\\` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a09d96): Footer body text, secondary labels in dark mockups.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #5db872): Green status dots, \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #d4a017): Warning callouts (rare on marketing surfaces).\n- **Error** (\\`{colors.error}\\` — #c64545): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks \\`Tiempos Headline, Garamond, \"Times New Roman\", serif\\` for display and \\`Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for body.\n\nThe display/body split is editorial:\n- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display\n- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels\n- JetBrains Mono → all code blocks and terminal text\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.05 | -1.5px | Homepage h1 (\"Meet your thinking partner\") — Copernicus serif |\n| \\`{typography.display-lg}\\` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |\n| \\`{typography.display-md}\\` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |\n| \\`{typography.display-sm}\\` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |\n| \\`{typography.title-lg}\\` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |\n| \\`{typography.title-md}\\` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 500 | 1.4 | 1.5px | Category tags, \"NEW\" badges |\n| \\`{typography.code}\\` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | Standard button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nDisplay sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.\n\nBody type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.\n\n### Note on Font Substitutes\nIf Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.\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}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) — modern-SaaS rhythm.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards, pricing tier cards, model comparison cards; \\`{spacing.lg}\\` (24px) for code-window cards and connector tiles.\n- **Callout / CTA bands:** \\`{spacing.xxl}\\` (48px) inside coral callout cards; 64px inside the larger dark CTA band.\n\n### Grid & Container\n- **Max content width:** ~1200px centered.\n- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.\n\n### Whitespace Philosophy\nThe cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Inputs, sub-nav, occasionally on cards |\n| Cream card | \\`{colors.surface-card}\\` background — no shadow | Feature cards, content cards |\n| Dark surface card | \\`{colors.surface-dark}\\` background — no shadow | Code editor mockups, model showcase cards |\n| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses \\`0 1px 3px rgba(20,20,19,0.08)\\` rarely) |\n\nThe elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.\n\n### Decorative Depth\n- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.\n- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in \\`{colors.muted-soft}\\`, status bars at the bottom in \\`{colors.surface-dark-elevated}\\`.\n- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Reserved for badge accents and tiny dropdowns |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons, dropdown items |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs, category tabs |\n| \\`{rounded.lg}\\` | 12px | Content cards (feature, pricing, code-window, model-comparison) |\n| \\`{rounded.xl}\\` | 16px | Hero illustration container, the larger marquee components |\n| \\`{rounded.pill}\\` | 9999px | Badge pills, \"NEW\" tags |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar substitutes, icon buttons |\n\n### Photography & Illustrations\nClaude's hero rarely uses photography. Instead it uses:\n- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas\n- Code editor mockups (the dominant \"hero\" treatment on developer-focused pages)\n- Terminal output mockups with monospace text on dark\n- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails\n\nWhen photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Cream nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the Anthropic spike-mark + \"Claude\" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with \"Sign in\" text-link, \"Try Claude\" \\`{component.button-primary}\\` (coral). Menu items in \\`{typography.nav-link}\\` (StyreneB 14px / 500).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature coral CTA. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), type \\`{typography.button}\\` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). Active state \\`button-primary-active\\` darkens to \\`{colors.primary-active}\\` (#a9583e).\n\n**\\`button-secondary\\`** — Cream button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border, same padding + height + radius as primary.\n\n**\\`button-secondary-on-dark\\`** — Used over \\`{colors.surface-dark}\\` cards. Background \\`{colors.surface-dark-elevated}\\` (#252320), text \\`{colors.on-dark}\\`. Stays dark — the system never inverts to a light secondary on dark surfaces.\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" in the top nav and inline CTA links.\n\n**\\`button-icon-circular\\`** — 36px circular icon button. Background \\`{colors.canvas}\\`, hairline border, ink-color icon. Used for carousel arrows, share, \"view more\".\n\n**\\`text-link\\`** — Inline body links in \\`{colors.primary}\\` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-illustration-card\\`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background \\`{colors.canvas}\\` or \\`{colors.surface-dark}\\` depending on context, rounded \\`{rounded.xl}\\` (16px).\n\n**\\`feature-card\\`** — Used in 3-up feature grids. Background \\`{colors.surface-card}\\` (#efe9de — slightly darker cream), rounded \\`{rounded.lg}\\` (12px), internal padding \\`{spacing.xl}\\` (32px). Carries a small icon at top, an \\`{typography.title-md}\\` headline, and a body description in \\`{typography.body-md}\\`.\n\n**\\`product-mockup-card-dark\\`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries text labels in \\`{colors.on-dark}\\` and product UI fragments below.\n\n**\\`code-window-card\\`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in \\`{typography.code}\\` (JetBrains Mono), and sometimes a \"Run\" button or terminal output panel below. Background \\`{colors.surface-dark}\\` with \\`{colors.surface-dark-soft}\\` for the inner code block, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). The signature visual element of Claude Code product pages.\n\n**\\`model-comparison-card\\`** — Used on the homepage's \"Which problem are you up against?\" section comparing Opus / Sonnet / Haiku. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries the model name, a short capability blurb, and a \\`{component.text-link}\\` to learn more.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px). Carries the plan name in \\`{typography.title-lg}\\` (StyreneB), price in \\`{typography.display-sm}\\` (Copernicus serif!), feature checklist in \\`{typography.body-md}\\`, and a \\`{component.button-primary}\\` at the bottom.\n\n**\\`pricing-tier-card-featured\\`** — The featured tier (typically \"Pro\" or \"Team\"). Background flips to \\`{colors.surface-dark}\\`, text inverts to \\`{colors.on-dark}\\`. The dark surface IS the featured-tier signal.\n\n**\\`callout-card-coral\\`** — A full-bleed coral card carrying a major call-to-action. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), rounded \\`{rounded.lg}\\`, padding \\`{spacing.xxl}\\` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).\n\n**\\`connector-tile\\`** — Used on the connectors page's integration grid. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding 20px. Each tile carries a logo at top, a \\`{typography.title-sm}\\` connector name, and a short description.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px. 1px hairline border in \\`{colors.hairline}\\`.\n\n**\\`text-input-focused\\`** — Focus state. Border thickens or shifts to \\`{colors.primary}\\` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.\n\n**\\`cookie-consent-card\\`** — Bottom-right floating dark cookie banner. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). One of the few places dark surface appears at small scale on cream pages.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small pill label used for category tags. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n**\\`badge-coral\\`** — Coral-fill badge for \"NEW\", \"BETA\", featured highlights. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.caption-uppercase}\\` (12px / 500 / 1.5px tracking), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, \\`{colors.muted}\\` text. Active: \\`{colors.surface-card}\\` background, \\`{colors.ink}\\` text. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-coral\\`** — A pre-footer \"Try Claude\" CTA card. Full-width coral fill, white type, rounded \\`{rounded.lg}\\`, padding 64px. Carries an h2 in \\`{typography.display-sm}\\` (still serif!), a sub-line, and a cream-button CTA.\n\n**\\`cta-band-dark\\`** — Alternative pre-footer band on developer-focused pages. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding 64px. Often pairs with a code-window card.\n\n**\\`footer\\`** — Dark navy footer that closes every page. Background \\`{colors.surface-dark}\\` (#181715), text \\`{colors.on-dark-soft}\\`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + \"Anthropic\" wordmark sits at the top in \\`{colors.on-dark}\\`. The footer never inverts.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the cream canvas. Pure white reads as \"any other AI tool\"; the warm tint is the brand differentiator.\n- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.\n- Reserve \\`{colors.primary}\\` (coral) for primary CTAs and full-bleed \\`{component.callout-card-coral}\\` moments. Don't paint accent moments coral elsewhere.\n- Use \\`{component.product-mockup-card-dark}\\` and \\`{component.code-window-card}\\` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.\n- Pair \\`{component.feature-card}\\` (cream) with \\`{component.product-mockup-card-dark}\\` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.\n- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.\n- Apply \\`{spacing.section}\\` (96px) between major bands.\n\n### Don't\n- Don't use cool grays or pure white for canvas. Cream is the brand.\n- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.\n- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.\n- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.\n- Don't use Inter for display headlines. The serif character is the brand voice.\n- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.\n- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |\n| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` at minimum 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.\n- \\`{component.text-input}\\` height is 40px.\n- Connector tile entire card area is tappable; effective tap area >> 44px.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.\n- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.\n- Feature grids reduce columns rather than scaling cards down.\n- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.\n- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.\n\n### Image Behavior\n- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.\n- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.\n- Avatar photos in testimonials crop to circles at every breakpoint.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.feature-card}\\`, \\`{component.code-window-card}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries in \\`components:\\`.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.\n6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).\n7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.\n\n## Known Gaps\n\n- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.\n- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.\n- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted — error / success states would need a sign-up or feedback flow to confirm.\n- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.\n- The \"agent\" / \"computer use\" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/claude.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const claudeBrief = `---\nversion: alpha\nname: Claude\ndescription: A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display (\"Copernicus\" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark.\n\ncolors:\n  primary: \"#cc785c\"\n  primary-active: \"#a9583e\"\n  primary-disabled: \"#e6dfd8\"\n  ink: \"#141413\"\n  body: \"#3d3d3a\"\n  body-strong: \"#252523\"\n  muted: \"#6c6a64\"\n  muted-soft: \"#8e8b82\"\n  hairline: \"#e6dfd8\"\n  hairline-soft: \"#ebe6df\"\n  canvas: \"#faf9f5\"\n  surface-soft: \"#f5f0e8\"\n  surface-card: \"#efe9de\"\n  surface-cream-strong: \"#e8e0d2\"\n  surface-dark: \"#181715\"\n  surface-dark-elevated: \"#252320\"\n  surface-dark-soft: \"#1f1e1b\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#faf9f5\"\n  on-dark-soft: \"#a09d96\"\n  accent-teal: \"#5db8a6\"\n  accent-amber: \"#e8a55a\"\n  success: \"#5db872\"\n  warning: \"#d4a017\"\n  error: \"#c64545\"\n\ntypography:\n  display-xl:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 64px\n    fontWeight: 400\n    lineHeight: 1.05\n    letterSpacing: -1.5px\n  display-lg:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 48px\n    fontWeight: 400\n    lineHeight: 1.1\n    letterSpacing: -1px\n  display-md:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 36px\n    fontWeight: 400\n    lineHeight: 1.15\n    letterSpacing: -0.5px\n  display-sm:\n    fontFamily: \"Copernicus, Tiempos Headline, serif\"\n    fontSize: 28px\n    fontWeight: 400\n    lineHeight: 1.2\n    letterSpacing: -0.3px\n  title-lg:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 22px\n    fontWeight: 500\n    lineHeight: 1.3\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.55\n    letterSpacing: 0\n  caption:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 13px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 12px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 1.5px\n  code:\n    fontFamily: \"JetBrains Mono, ui-monospace, monospace\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.6\n    letterSpacing: 0\n  button:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"StyreneB, Inter, sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\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-secondary:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n    height: 40px\n  button-secondary-on-dark:\n    backgroundColor: \"{colors.surface-dark-elevated}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 20px\n  button-text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  button-icon-circular:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.full}\"\n    size: 36px\n  text-link:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.body-md}\"\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  hero-illustration-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  product-mockup-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  code-window-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  model-comparison-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-card-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-lg}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  callout-card-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  connector-tile:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  text-input:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 14px\n    height: 40px\n  text-input-focused:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n  cookie-consent-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  category-tab:\n    backgroundColor: transparent\n    textColor: \"{colors.muted}\"\n    typography: \"{typography.nav-link}\"\n    padding: 8px 14px\n    rounded: \"{rounded.md}\"\n  category-tab-active:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    rounded: \"{rounded.md}\"\n  badge-pill:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  badge-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 12px\n  cta-band-coral:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  cta-band-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.display-sm}\"\n    rounded: \"{rounded.lg}\"\n    padding: 64px\n  footer:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark-soft}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px\n---\n\n## Overview\n\nClaude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (\\`{colors.canvas}\\` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** (\"Copernicus\" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.\n\nBrand voltage comes from the **cream + coral pairing** — coral (\\`{colors.primary}\\` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.\n\nThe system has three surface modes that alternate page-by-page:\n1. **Cream canvas** (\\`{colors.canvas}\\`) — default body floor\n2. **Light cream cards** (\\`{colors.surface-card}\\`) — feature card backgrounds\n3. **Dark navy product surfaces** (\\`{colors.surface-dark}\\`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself\n\nThe dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.\n\n**Key Characteristics:**\n- Warm cream canvas (\\`{colors.canvas}\\` — #faf9f5) with dark warm-ink text (\\`{colors.ink}\\` — #141413). The brand's defining color choice.\n- Coral primary CTA (\\`{colors.primary}\\` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.\n- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.\n- Dark navy product mockup cards (\\`{colors.surface-dark}\\` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.\n- Light cream feature cards (\\`{colors.surface-card}\\` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.\n- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.\n- Border radius is hierarchical: \\`{rounded.md}\\` (8px) for buttons + inputs, \\`{rounded.lg}\\` (12px) for content + product cards, \\`{rounded.xl}\\` (16px) for the hero illustration container, \\`{rounded.pill}\\` for badges.\n- Section rhythm \\`{spacing.section}\\` (96px) — modern-SaaS standard. Internal card padding stays generous at \\`{spacing.xl}\\` (32px).\n\n## Colors\n\n### Brand & Accent\n- **Coral / Primary** (\\`{colors.primary}\\` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.\n- **Coral Active** (\\`{colors.primary-active}\\` — #a9583e): The press / hover-darker variant.\n- **Coral Disabled** (\\`{colors.primary-disabled}\\` — #e6dfd8): A desaturated cream-tinted disabled state.\n- **Accent Teal** (\\`{colors.accent-teal}\\` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, \"active connection\" dots in connectors page).\n- **Accent Amber** (\\`{colors.accent-amber}\\` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.\n- **Surface Soft** (\\`{colors.surface-soft}\\` — #f5f0e8): Section dividers, very-soft band backgrounds.\n- **Surface Card** (\\`{colors.surface-card}\\` — #efe9de): Feature cards, content cards. One step darker than canvas.\n- **Surface Cream Strong** (\\`{colors.surface-cream-strong}\\` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #252320): Elevated cards inside dark bands (settings panels in mockups).\n- **Surface Dark Soft** (\\`{colors.surface-dark-soft}\\` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.\n- **Hairline** (\\`{colors.hairline}\\` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as \\`{colors.primary-disabled}\\` — borders feel like one elevation step rather than ink lines.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebe6df): Barely-visible divider used inside the same band.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.\n- **Body Strong** (\\`{colors.body-strong}\\` — #252523): Emphasized paragraphs, lead text.\n- **Body** (\\`{colors.body}\\` — #3d3d3a): Default running-text color.\n- **Muted** (\\`{colors.muted}\\` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #8e8b82): Captions, fine-print, copyright lines.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): Text on coral buttons.\n- **On Dark** (\\`{colors.on-dark}\\` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a09d96): Footer body text, secondary labels in dark mockups.\n\n### Semantic\n- **Success** (\\`{colors.success}\\` — #5db872): Green status dots, \"available\" indicators.\n- **Warning** (\\`{colors.warning}\\` — #d4a017): Warning callouts (rare on marketing surfaces).\n- **Error** (\\`{colors.error}\\` — #c64545): Validation errors.\n\n## Typography\n\n### Font Family\nThe system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks \\`Tiempos Headline, Garamond, \"Times New Roman\", serif\\` for display and \\`Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif\\` for body.\n\nThe display/body split is editorial:\n- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display\n- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels\n- JetBrains Mono → all code blocks and terminal text\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-xl}\\` | 64px | 400 | 1.05 | -1.5px | Homepage h1 (\"Meet your thinking partner\") — Copernicus serif |\n| \\`{typography.display-lg}\\` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |\n| \\`{typography.display-md}\\` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |\n| \\`{typography.display-sm}\\` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |\n| \\`{typography.title-lg}\\` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |\n| \\`{typography.title-md}\\` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |\n| \\`{typography.body-sm}\\` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |\n| \\`{typography.caption}\\` | 13px | 500 | 1.4 | 0 | Badge labels, captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 500 | 1.4 | 1.5px | Category tags, \"NEW\" badges |\n| \\`{typography.code}\\` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |\n| \\`{typography.button}\\` | 14px | 500 | 1.0 | 0 | Standard button labels |\n| \\`{typography.nav-link}\\` | 14px | 500 | 1.4 | 0 | Top-nav menu items |\n\n### Principles\nDisplay sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.\n\nBody type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.\n\n### Note on Font Substitutes\nIf Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.\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}\\` 96px.\n- **Section padding:** \\`{spacing.section}\\` (96px) — modern-SaaS rhythm.\n- **Card internal padding:** \\`{spacing.xl}\\` (32px) for feature cards, pricing tier cards, model comparison cards; \\`{spacing.lg}\\` (24px) for code-window cards and connector tiles.\n- **Callout / CTA bands:** \\`{spacing.xxl}\\` (48px) inside coral callout cards; 64px inside the larger dark CTA band.\n\n### Grid & Container\n- **Max content width:** ~1200px centered.\n- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).\n- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.\n- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.\n\n### Whitespace Philosophy\nThe cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat | No shadow, no border | Body sections, top nav, hero bands |\n| Soft hairline | 1px \\`{colors.hairline}\\` border | Inputs, sub-nav, occasionally on cards |\n| Cream card | \\`{colors.surface-card}\\` background — no shadow | Feature cards, content cards |\n| Dark surface card | \\`{colors.surface-dark}\\` background — no shadow | Code editor mockups, model showcase cards |\n| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses \\`0 1px 3px rgba(20,20,19,0.08)\\` rarely) |\n\nThe elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.\n\n### Decorative Depth\n- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.\n- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in \\`{colors.muted-soft}\\`, status bars at the bottom in \\`{colors.surface-dark-elevated}\\`.\n- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.xs}\\` | 4px | Reserved for badge accents and tiny dropdowns |\n| \\`{rounded.sm}\\` | 6px | Small inline buttons, dropdown items |\n| \\`{rounded.md}\\` | 8px | Standard CTA buttons, text inputs, category tabs |\n| \\`{rounded.lg}\\` | 12px | Content cards (feature, pricing, code-window, model-comparison) |\n| \\`{rounded.xl}\\` | 16px | Hero illustration container, the larger marquee components |\n| \\`{rounded.pill}\\` | 9999px | Badge pills, \"NEW\" tags |\n| \\`{rounded.full}\\` | 9999px / 50% | Avatar substitutes, icon buttons |\n\n### Photography & Illustrations\nClaude's hero rarely uses photography. Instead it uses:\n- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas\n- Code editor mockups (the dominant \"hero\" treatment on developer-focused pages)\n- Terminal output mockups with monospace text on dark\n- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails\n\nWhen photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Cream nav bar pinned to the top of every page. 64px tall, \\`{colors.canvas}\\` background. Carries the Anthropic spike-mark + \"Claude\" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with \"Sign in\" text-link, \"Try Claude\" \\`{component.button-primary}\\` (coral). Menu items in \\`{typography.nav-link}\\` (StyreneB 14px / 500).\n\n### Buttons\n\n**\\`button-primary\\`** — The signature coral CTA. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), type \\`{typography.button}\\` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded \\`{rounded.md}\\` (8px). Active state \\`button-primary-active\\` darkens to \\`{colors.primary-active}\\` (#a9583e).\n\n**\\`button-secondary\\`** — Cream button with hairline outline. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, 1px hairline border, same padding + height + radius as primary.\n\n**\\`button-secondary-on-dark\\`** — Used over \\`{colors.surface-dark}\\` cards. Background \\`{colors.surface-dark-elevated}\\` (#252320), text \\`{colors.on-dark}\\`. Stays dark — the system never inverts to a light secondary on dark surfaces.\n\n**\\`button-text-link\\`** — Inline text button, no background. Used for \"Sign in\" in the top nav and inline CTA links.\n\n**\\`button-icon-circular\\`** — 36px circular icon button. Background \\`{colors.canvas}\\`, hairline border, ink-color icon. Used for carousel arrows, share, \"view more\".\n\n**\\`text-link\\`** — Inline body links in \\`{colors.primary}\\` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.\n\n### Cards & Containers\n\n**\\`hero-band\\`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding \\`{spacing.section}\\` (96px).\n\n**\\`hero-illustration-card\\`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background \\`{colors.canvas}\\` or \\`{colors.surface-dark}\\` depending on context, rounded \\`{rounded.xl}\\` (16px).\n\n**\\`feature-card\\`** — Used in 3-up feature grids. Background \\`{colors.surface-card}\\` (#efe9de — slightly darker cream), rounded \\`{rounded.lg}\\` (12px), internal padding \\`{spacing.xl}\\` (32px). Carries a small icon at top, an \\`{typography.title-md}\\` headline, and a body description in \\`{typography.body-md}\\`.\n\n**\\`product-mockup-card-dark\\`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background \\`{colors.surface-dark}\\`, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries text labels in \\`{colors.on-dark}\\` and product UI fragments below.\n\n**\\`code-window-card\\`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in \\`{typography.code}\\` (JetBrains Mono), and sometimes a \"Run\" button or terminal output panel below. Background \\`{colors.surface-dark}\\` with \\`{colors.surface-dark-soft}\\` for the inner code block, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). The signature visual element of Claude Code product pages.\n\n**\\`model-comparison-card\\`** — Used on the homepage's \"Which problem are you up against?\" section comparing Opus / Sonnet / Haiku. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, internal padding \\`{spacing.xl}\\` (32px). Carries the model name, a short capability blurb, and a \\`{component.text-link}\\` to learn more.\n\n**\\`pricing-tier-card\\`** — Standard tier card. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding \\`{spacing.xl}\\` (32px). Carries the plan name in \\`{typography.title-lg}\\` (StyreneB), price in \\`{typography.display-sm}\\` (Copernicus serif!), feature checklist in \\`{typography.body-md}\\`, and a \\`{component.button-primary}\\` at the bottom.\n\n**\\`pricing-tier-card-featured\\`** — The featured tier (typically \"Pro\" or \"Team\"). Background flips to \\`{colors.surface-dark}\\`, text inverts to \\`{colors.on-dark}\\`. The dark surface IS the featured-tier signal.\n\n**\\`callout-card-coral\\`** — A full-bleed coral card carrying a major call-to-action. Background \\`{colors.primary}\\` (#cc785c), text \\`{colors.on-primary}\\` (white), rounded \\`{rounded.lg}\\`, padding \\`{spacing.xxl}\\` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).\n\n**\\`connector-tile\\`** — Used on the connectors page's integration grid. Background \\`{colors.canvas}\\` with hairline border, rounded \\`{rounded.lg}\\`, padding 20px. Each tile carries a logo at top, a \\`{typography.title-sm}\\` connector name, and a short description.\n\n### Inputs & Forms\n\n**\\`text-input\\`** — Standard text input. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, type \\`{typography.body-md}\\`, rounded \\`{rounded.md}\\` (8px), padding 10px × 14px, height 40px. 1px hairline border in \\`{colors.hairline}\\`.\n\n**\\`text-input-focused\\`** — Focus state. Border thickens or shifts to \\`{colors.primary}\\` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.\n\n**\\`cookie-consent-card\\`** — Bottom-right floating dark cookie banner. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding \\`{spacing.lg}\\` (24px). One of the few places dark surface appears at small scale on cream pages.\n\n### Tags / Badges\n\n**\\`badge-pill\\`** — Small pill label used for category tags. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption}\\` (13px / 500), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n**\\`badge-coral\\`** — Coral-fill badge for \"NEW\", \"BETA\", featured highlights. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.caption-uppercase}\\` (12px / 500 / 1.5px tracking), rounded \\`{rounded.pill}\\`, padding 4px × 12px.\n\n### Tab / Filter\n\n**\\`category-tab\\`** + **\\`category-tab-active\\`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, \\`{colors.muted}\\` text. Active: \\`{colors.surface-card}\\` background, \\`{colors.ink}\\` text. Padding 8px × 14px, rounded \\`{rounded.md}\\`.\n\n### CTA / Footer\n\n**\\`cta-band-coral\\`** — A pre-footer \"Try Claude\" CTA card. Full-width coral fill, white type, rounded \\`{rounded.lg}\\`, padding 64px. Carries an h2 in \\`{typography.display-sm}\\` (still serif!), a sub-line, and a cream-button CTA.\n\n**\\`cta-band-dark\\`** — Alternative pre-footer band on developer-focused pages. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`, rounded \\`{rounded.lg}\\`, padding 64px. Often pairs with a code-window card.\n\n**\\`footer\\`** — Dark navy footer that closes every page. Background \\`{colors.surface-dark}\\` (#181715), text \\`{colors.on-dark-soft}\\`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + \"Anthropic\" wordmark sits at the top in \\`{colors.on-dark}\\`. The footer never inverts.\n\n## Do's and Don'ts\n\n### Do\n- Anchor every page on the cream canvas. Pure white reads as \"any other AI tool\"; the warm tint is the brand differentiator.\n- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.\n- Reserve \\`{colors.primary}\\` (coral) for primary CTAs and full-bleed \\`{component.callout-card-coral}\\` moments. Don't paint accent moments coral elsewhere.\n- Use \\`{component.product-mockup-card-dark}\\` and \\`{component.code-window-card}\\` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.\n- Pair \\`{component.feature-card}\\` (cream) with \\`{component.product-mockup-card-dark}\\` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.\n- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.\n- Apply \\`{spacing.section}\\` (96px) between major bands.\n\n### Don't\n- Don't use cool grays or pure white for canvas. Cream is the brand.\n- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.\n- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.\n- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.\n- Don't use Inter for display headlines. The serif character is the brand voice.\n- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.\n- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |\n| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |\n| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |\n| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |\n\n### Touch Targets\n- \\`{component.button-primary}\\` at minimum 40 × 40px.\n- \\`{component.button-icon-circular}\\` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.\n- \\`{component.text-input}\\` height is 40px.\n- Connector tile entire card area is tappable; effective tap area >> 44px.\n\n### Collapsing Strategy\n- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.\n- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.\n- Feature grids reduce columns rather than scaling cards down.\n- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.\n- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.\n\n### Image Behavior\n- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.\n- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.\n- Avatar photos in testimonials crop to circles at every breakpoint.\n\n## Iteration Guide\n\n1. Focus on ONE component at a time. Reference its YAML key (\\`{component.feature-card}\\`, \\`{component.code-window-card}\\`).\n2. Variants of an existing component (\\`-active\\`, \\`-disabled\\`, \\`-focused\\`) live as separate entries in \\`components:\\`.\n3. Use \\`{token.refs}\\` everywhere — never inline hex.\n4. Never document hover. Default and Active/Pressed states only.\n5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.\n6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).\n7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.\n\n## Known Gaps\n\n- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.\n- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.\n- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.\n- Form validation states beyond \\`{component.text-input-focused}\\` are not extracted — error / success states would need a sign-up or feedback flow to confirm.\n- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.\n- The \"agent\" / \"computer use\" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}